<template>
  <a-modal
    centered
    class="promotionRules-basicInfo-modal"
    :footer="null"
    :maskClosable="false"
    :title="itemSn?'编辑':'新增'"
    v-model="isShow"
    @cancel="isShow = false"
    :width="960">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-form-model
        id="promotionRules-basicInfo-form"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
      >
        <a-form-model-item label="活动名称" prop="name" :label-col="{span: 4}">
          <a-input
            id="promotionRules-basicInfo-name"
            :maxLength="100"
            v-model.trim="form.name"
            placeholder="请输入活动名称(最多100个字符)"
            allowClear />
        </a-form-model-item>
        <a-row :gutter="15">
          <a-col span="12">
            <a-form-model-item label="活动时间" prop="activeDateEnable">
              <a-select
                id="promotionRules-basicInfo-activeDateEnable"
                placeholder="请选择"
                @change="handleChange('activeDateEnable')"
                v-model="form.activeDateEnable"
                style="width: 100%;">
                <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col span="12" v-if="form.activeDateEnable=='1'">
            <a-form-model-item prop="activeDate">
              <a-range-picker
                style="width:100%"
                id="promotionRules-basicInfo-activeDate"
                :disabledDate="disabledDate"
                v-model="form.activeDate"
                :format="dateFormat"
                :placeholder="['开始时间', '结束时间']" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="15">
          <a-col span="12">
            <a-form-model-item label="参与客户" prop="buyerLimitEnable">
              <a-select
                id="promotionRules-basicInfo-buyerLimitEnable"
                placeholder="请选择"
                @change="handleChange('buyerLimitEnable')"
                v-model="form.buyerLimitEnable"
                style="width: 100%;">
                <a-select-option v-for="item in rangeCList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col span="12" v-if="form.buyerLimitEnable=='1'">
            <a-form-model-item prop="buyerSns">
              <a-button id="promotionRules-basicInfo-choose" type="primary" class="button-success" @click="openCustomerModal=true">选择</a-button>
              <span style="font-weight: bold;">当前已选：{{ chooseCust.length }}个</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="15">
          <a-col span="12">
            <a-form-model-item prop="activeAmountEnable">
              <template slot="label">
                <a-popover style="margin-top: 13px;">
                  <template slot="content">即促销品的销售价总额不能高于限值，达到后活动不能参与。</template>
                  <a-icon type="question-circle" theme="twoTone" />
                </a-popover>
                <span>活动经费上限</span>
              </template>
              <a-select
                id="promotionRules-basicInfo-activeAmountEnable"
                placeholder="请选择"
                @change="handleChange('activeAmountEnable')"
                v-model="form.activeAmountEnable"
                style="width: 100%;">
                <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col span="12" v-if="form.activeAmountEnable=='1'">
            <a-form-model-item prop="activeAmount">
              <a-input-number
                id="promotionRules-basicInfo-activeAmount"
                v-model="form.activeAmount"
                :min="1"
                :max="99999999"
                :precision="2"
                style="width: 85%;margin-right: 5px;"
                placeholder="请输入活动经费上限(1~999999)"
                allowClear />
              <span>万元</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="15">
          <a-col span="12">
            <a-form-model-item prop="orderAmountEnable">
              <template slot="label">
                <a-popover style="margin-top: 13px;">
                  <template slot="content">即限制每个采购单需达到下限金额才能参与促销。</template>
                  <a-icon type="question-circle" theme="twoTone" />
                </a-popover>
                <span>订单起订金额</span>
              </template>
              <a-select
                id="promotionRules-basicInfo-orderAmountEnable"
                placeholder="请选择"
                @change="handleChange('orderAmountEnable')"
                v-model="form.orderAmountEnable"
                style="width: 100%;">
                <a-select-option v-for="item in rangeList" :key="item.val" :value="item.val">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col span="12" v-if="form.orderAmountEnable=='1'">
            <a-form-model-item prop="orderAmount">
              <a-input-number
                id="promotionRules-basicInfo-orderAmount"
                v-model="form.orderAmount"
                :min="1"
                :max="99999999"
                :precision="2"
                style="width: 85%;margin-right: 5px;"
                placeholder="请输入订单起订金额(1~99999999)"
                allowClear />
              <span>万元</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item label="备注" prop="remark" :label-col="{span: 4}">
          <a-textarea
            id="promotionRules-basicInfo-remark"
            :maxLength="100"
            v-model.trim="form.remark"
            placeholder="请输入备注(最多100个字符)"
            allowClear />
        </a-form-model-item>
      </a-form-model>
      <div class="btn-cont">
        <a-button type="primary" id="promotionRules-basicInfo-modal-save" @click="handleSave">保存</a-button>
        <a-button id="promotionRules-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
      </div>
    </a-spin>
    <!-- 选择参与客户 -->
    <choose-customer-modal :openModal="openCustomerModal" :chooseCust="chooseCust" @close="openCustomerModal=false" @ok="handleOk" />
  </a-modal>
</template>

<script>
import moment from 'moment'
import { VSelect } from '@/components'
import chooseCustomerModal from '@/views/common/chooseCustomerModal.vue'
import { promoActiveSave, promoActiveDetail } from '@/api/promoActive'
export default {
  name: 'StoreTransferOutBasicInfoModal',
  components: { VSelect, chooseCustomerModal },
  props: {
    openModal: {
      //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemSn: {
      type: String || Number,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      spinning: false,
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
      },
      form: {
        name: '',
        activeDateEnable: '0', //  活动时间启用标记
        activeDate: [],
        activeDateStart: '', // 活动时间-开始
        activeDateEnd: '', // 活动时间-结束
        buyerLimitEnable: '0', //  参与客户启用标记
        buyerSns: '', //  部分客户
        activeAmountEnable: '0', //  活动经费启用标记
        activeAmount: '', // 活动经费上限
        orderAmountEnable: '0', //  起订金额启用标记
        orderAmount: '', // 订单起订金额
        remark: ''
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        activeDateEnable: [{ required: true, message: '请选择是否限制活动时间', trigger: 'change' }],
        activeDate: [{ required: true, message: '请选择限制的活动时间', trigger: 'change' }],
        buyerLimitEnable: [{ required: true, message: '请选择是否限制参与客户', trigger: 'change' }],
        buyerSns: [{ required: true, message: '请选择参与客户', trigger: 'blur' }],
        activeAmountEnable: [{ required: true, message: '请选择是否限制活动经费', trigger: 'change' }],
        activeAmount: [{ required: true, message: '请输入活动经费上限', trigger: 'blur' }],
        orderAmountEnable: [{ required: true, message: '请选择是否限制起订金额', trigger: 'change' }],
        orderAmount: [{ required: true, message: '请输入订单起订金额', trigger: 'blur' }]
      },
      dateFormat: 'YYYY-MM-DD',
      rangeList: [ //  是否限制
        { name: '不限', val: '0' },
        { name: '限制', val: '1' }
      ],
      rangeCList: [ //  是否全部
        { name: '全部客户', val: '0' },
        { name: '部分客户', val: '1' }
      ],
      openCustomerModal: false,
      chooseCust: [] //  当前已选客户
    }
  },
  methods: {
    // 详情
    getDetail () {
      const _this = this
      promoActiveDetail({ sn: this.itemSn }).then(res => {
        if (res.status == 200) {
          const data = res.data
          this.form = Object.assign(this.form, data)
          if (data.activeDateStart) {
            this.form.activeDate[0] = moment(data.activeDateStart).format(this.dateFormat)
          }
          if (data.activeDateEnd) {
            this.form.activeDate[1] = moment(data.activeDateEnd).format(this.dateFormat)
          }
          // 活动经费上限   单位为万元
          if (data.activeAmountEnable && data.activeAmountEnable == '0') {
            this.form.activeAmount = ''
          } else if (data.activeAmountEnable && data.activeAmountEnable == '1' && data.activeAmount && data.activeAmount != 0) {
            this.form.activeAmount = Number(data.activeAmount) / 10000
          }
          // 订单起订金额   单位为万元
          if (data.orderAmountEnable && data.orderAmountEnable == '0') {
            this.form.orderAmount = ''
          } else if (data.orderAmountEnable && data.orderAmountEnable == '1' && data.orderAmount && data.orderAmount != 0) {
            this.form.orderAmount = Number(data.orderAmount) / 10000
          }
          this.chooseCust = []
          if (data.promoBuyerList && data.promoBuyerList.length > 0) {
            data.promoBuyerList.map(item => {
              _this.chooseCust.push(item.buyerSn)
            })
          }
        }
      })
    },
    //  保存
    handleSave () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(_this.form))
          if (form.activeDate && form.activeDate.length > 0) {
            form.activeDateStart = moment(form.activeDate[0]).format(this.dateFormat)
            form.activeDateEnd = moment(form.activeDate[1]).format(this.dateFormat)
          } else {
            form.activeDateStart = undefined
            form.activeDateEnd = undefined
          }
          delete form.activeDate
          // 活动经费上限   单位为万元
          if (form.activeAmountEnable == '1' && form.activeAmount) {
            form.activeAmount = Number(form.activeAmount) * 100 * 100 // 分两次为解决精度问题
          }
          // 订单起订金额   单位为万元
          if (form.orderAmountEnable == '1' && form.orderAmount) {
            form.orderAmount = Number(form.orderAmount) * 100 * 100
          }
          if (!this.itemSn && form.id) {
            delete form.id
          }
          _this.spinning = true
          promoActiveSave(form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                _this.isShow = false
                _this.$emit('ok', res.data)
                _this.spinning = false
              }, 1000)
            } else {
              _this.spinning = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleOk (obj) {
      this.chooseCust = obj
      // this.form.buyerSns = this.chooseCust.join(',')
    },
    // select   change
    handleChange (val) {
      // 数据更改为不限时需重置之前所选数据
      if (val == 'activeDateEnable' && this.form.activeDateEnable == 0) { //  活动时间
        this.form.activeDate = []
        this.form.activeDateStart = ''
        this.form.activeDateEnd = ''
      } else if (val == 'buyerLimitEnable' && this.form.buyerLimitEnable == 0) { //  参与客户
        this.chooseCust = []
        this.form.buyerSns = ''
      } else if (val == 'activeAmountEnable' && this.form.activeAmountEnable == 0) { //  活动经费
        this.form.activeAmount = ''
      } else if (val == 'orderAmountEnable' && this.form.orderAmountEnable == 0) { //  起订金额
        this.form.orderAmount = ''
      }
    },
    // 不可选日期
    disabledDate (date, dateStrings) {
      return date && date.valueOf('day') < moment().subtract(1, 'day') // 今天以后，包含今天
    },
    // 重置表单数据
    resetForm () {
      this.form.name = ''
      this.form.activeDateEnable = '0'
      this.form.activeDate = []
      this.form.activeDateStart = ''
      this.form.activeDateEnd = ''
      this.form.buyerLimitEnable = '0'
      this.form.buyerSns = ''
      this.form.activeAmountEnable = '0'
      this.form.activeAmount = ''
      this.form.orderAmountEnable = '0'
      this.form.orderAmount = ''
      this.form.remark = ''
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.chooseCust = []
        this.resetForm()
      }
    },
    itemSn (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetail()
      }
    },
    chooseCust: {
      handler (newValue, oldValue) {
        if (this.isShow && newValue) {
          this.form.buyerSns = newValue.join(',')
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="less">
.promotionRules-basicInfo-modal {
	.ant-modal-body {
		padding: 40px 40px 24px;
	}
	.btn-cont {
		text-align: center;
		margin: 35px 0 10px;
	}
}
</style>
