<template>
  <a-modal
    :visible="value"
    :title="isUpdateTime?'更新过期时间':'编辑兑换卡'"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
      v-if="formData"
    >
      <a-form-item
        label="兑换卡号"
        v-bind="formItemLayout"
      >
        <a-input
          style="width:150px"
          :disabled="isUpdateTime"
          v-decorator="[
            'exchange_card_no',
            {
              initialValue:formData.exchange_card_no,
              rules: [{ required: true, message: '请输入兑换卡号' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="绑定销售"
        v-bind="formItemLayout"
      >
        <a-select
          @change="formData.salesUser.id=$event"
          :disabled="isUpdateTime"
          v-decorator="[
            'salesUser.id',
            {
              initialValue:formData.salesUser.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
        v-if="isUpdateTime"
        label="过期时间"
        v-bind="formItemLayout"
      >
        <a-date-picker
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择过期时间"
          v-decorator="[
            `expire_time`,
            {
              initialValue:formData.expire_time,
              rules: [{ required: true, message: '请选择时间' }]
            }
          ]"
          :disabled-date="disabledDate"
          :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
        />

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

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

export default {
  mixins: [exchangeCardMixin],
  props: {
    formData: {
      type: Object,
      default: () => null
    },
    isUpdateTime: {
      type: Boolean,
      default: false
    },
    salesUserList: {
      type: Array,
      default: () => []
    }
  },
  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) => {
        if (!err) {
          console.log('values', values)
          const params = {
            expire_time: moment(values.expire_time).format('YYYY-MM-DD HH:mm:ss'),
            exchangeCardNo: values.exchange_card_no,
            sales_user_id: values.salesUser.id,
            id: this.formData.id
          }
          if (this.isUpdateTime) {
            updateExpireTime(params).then(res => {
              this.$message.success('更新成功。')
              this.$emit('update')
              this.form.resetFields()
              this.$emit('input', false)
            })
          } else {
            editExchangeCard(params).then(res => {
              this.$message.success('修改成功。')
              this.$emit('update')
              this.form.resetFields()
              this.$emit('input', false)
            })
          }
        }
      })
    }
  }
}
</script>

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