<template>
  <a-modal
    :visible="value"
    :title="isUpdateTime?'批量更新过期时间':'新建兑换卡'"

    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
    >
      <a-form-item
        label="兑换卡"
        v-bind="formItemLayout"
      >
        <a-input-number
          v-decorator="[
            'start_no',
            {
              initialValue:formData.start_no,
              rules: [{ required: true, message: '请输入'}]
            }
          ]"
          :min="0"
        /> -
        <a-input-number
          v-decorator="[
            'end_no',
            {
              initialValue:formData.end_no,
              rules: [{ required: true, message: '请输入'}]
            }
          ]"
          :min="0"
        />
      </a-form-item>
      <a-form-item
        label="绑定销售"
        v-if="!isUpdateTime"
        v-bind="formItemLayout"
      >
        <a-select
          @change="formData.sales_user_id=$event"
          v-decorator="[
            'sales_user_id',
            {
              initialValue:formData.sales_user_id,
              rules: [{ required: true, message: '请选择'}]
            }
          ]"
        >
          <a-select-option
            v-for="ticket in salesUserList"
            :key="ticket.id"
          >
            {{ ticket.nick_name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="过期时间"
        v-bind="formItemLayout"
      >
        <a-date-picker
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择过期时间"
          v-decorator="[
            `expire_time`,
            {
              initialValue:'',
              rules: [{ required: isUpdateTime, message: '请选择时间' }]
            }
          ]"
          :disabled-date="disabledDate"
          :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
        />

      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addExchangeCard, batchUpdateExpireTime } from '@/api/marketingSetting/salesUser'
import moment from 'moment'
import exchangeCardMixin from './exchangeCardMixin.js'

export default {
  mixins: [exchangeCardMixin],
  props: {
    salesUserList: {
      type: Array,
      default: () => []
    },
    isUpdateTime: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        sales_user_id: '',
        start_no: '',
        end_no: '',
        expire_time: ''
      }
    }
  },

  methods: {
    moment,
    disabledDate (current) {
      // Can not select days before today and today
      return (current < moment().startOf('day'))
    },
    handleOk (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log('values', values)
        values.expire_time = values.expire_time ? moment(values.expire_time).format('YYYY-MM-DD HH:mm:ss') : ''
        if (!err) {
          if (this.isUpdateTime) {
            batchUpdateExpireTime(values).then(res => {
              this.$message.success('更新成功。')
              this.form.resetFields()
              this.$emit('input', false)
              this.$emit('update')
            })
          } else {
            addExchangeCard(values).then(res => {
              this.$message.success('添加成功。')
              this.form.resetFields()
              this.$emit('input', false)
              this.$emit('update')
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container>>>.ant-modal-content{
  width: 800px;
}
</style>
