<template>
  <a-modal
    centered
    class="promotionRules-basicInfo-modal"
    :footer="null"
    :maskClosable="false"
    title="新增"
    v-model="isShow"
    @cancle="isShow = false"
    width="80%">
    <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="999999"
              :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="999999"
              :precision="2"
              style="width: 85%;margin-right: 5px;"
              placeholder="请输入订单起订金额(1~999999)"
              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>
    <!-- 选择参与客户 -->
    <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 './chooseCustomerModal'
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, //  是否打开弹框
      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)
          }
          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
          promoActiveSave(form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                _this.isShow = false
                _this.$emit('ok', res.data)
              }, 1000)
            }
          })
        } 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') // 今天以后，包含今天
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.$refs.ruleForm.resetFields()
      }
    },
    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>
