<template>
  <a-modal
    v-model="opened"
    :title="title"
    centered
    :maskClosable="false"
    :footer="null"
    @cancel="cancel"
    width="600px">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-form-model
        id="chooseCustom-form"
        ref="ruleForm"
        :model="form"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol">
        <a-form-model-item label="收款单号:" prop="no"> <span>{{ form.no }}</span>
        </a-form-model-item>
        <a-form-model-item label="付款方:" prop="payerName"> <span>{{ form.payerName }}</span>
        </a-form-model-item>
        <a-form-model-item label="开票日期:" prop="invoiceDate">
          <a-date-picker
            id="noticeEdit-releaseDate"
            format="YYYY-MM-DD"
            placeholder="请选择开票日期"
            v-model="form.invoiceDate"/>
          <div style="color:#999">如果没有开票，则不填写即可</div>
        </a-form-model-item>
        <!-- <a-form-model-item label="备注:">
          <a-textarea id="noticeEdit-remarks" rows="4" v-model="form.remarks" :maxlenght="100" placeholder="请输入备注(最多100字符)"></a-textarea>
        </a-form-model-item> -->
        <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;margin-top: 50px;">
          <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
          <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import {
  updateDetailInvoiceDate
} from '@/api/financeBook.js'
export default {
  name: 'InvoiceModal',
  props: {
    show: [Boolean],
    info: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data () {
    return {
      opened: this.show,
      spinning: false,
      title: '开票日期',

      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 14
        }
      },
      form: {
        no: undefined,
        payerName: undefined,
        invoiceDate: undefined,
        bookDetailSn: ''
      }
    }
  },
  methods: {
    disabledDate (current) {
      return current && current < moment().startOf('day')
    },
    disabledDateTime (date) {
      if (!date) {
        date = moment()
      }
      return {
        disabledHours: () => this.getDisabledHours(date.format('YYYY-MM-DD HH:mm:ss')),
        disabledMinutes: () => this.getDisabledMinutes(date.format('YYYY-MM-DD HH:mm:ss')),
        disabledSeconds: () => this.getDisabledSeconds(date.format('YYYY-MM-DD HH:mm:ss'))
      }
    },
    // 禁用时间范围  时
    getDisabledHours (nowTime) {
      const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
      const time = nowTime.split(' ')
      const times = todayDate.split(' ')
      const timeArrs = times[1].split(':')
      const hours = []
      if (todayDate.split(' ')[0] == time[0]) {
        for (var i = 0; i < parseInt(timeArrs[0]); i++) {
          hours.push(i)
        }
      }
      return hours
    },
    // 禁用时间范围  分
    getDisabledMinutes (nowTime) {
      const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
      const time = nowTime.split(' ')
      const times = todayDate.split(' ')
      const timeArr = time[1].split(':')
      const timeArrs = times[1].split(':')
      const minutes = []
      if (todayDate.split(' ')[0] == time[0] && timeArrs[0] == timeArr[0]) {
        for (var i = 0; i < parseInt(timeArrs[1]); i++) {
          minutes.push(i)
        }
      }
      return minutes
    },
    // 禁用时间范围  秒
    getDisabledSeconds (nowTime) {
      const todayDate = moment().format('YYYY-MM-DD HH:mm:ss')
      const time = nowTime.split(' ')
      const times = todayDate.split(' ')
      const timeArr = time[1].split(':')
      const timeArrs = times[1].split(':')
      const second = []
      if (todayDate.split(' ')[0] == time[0] && timeArrs[0] == timeArr[0] && timeArrs[1] == timeArr[1]) {
        for (var i = 0; i <= parseInt(timeArrs[2]); i++) {
          second.push(i)
        }
      }
      return second
    },
    //  保存
    handleSubmit (e) {
      const _this = this
      const invoiceDate = moment(this.form.invoiceDate).format('YYYY-MM-DD')
      const ajax_form = {
        'bookDetailSn': this.form.bookDetailSn,
        'invoiceDate': this.form.invoiceDate ? invoiceDate : ''
      }
      _this.spinning = true
      updateDetailInvoiceDate(ajax_form).then(res => {
        if (res.status == 200) {
          _this.$message.success(res.message)
          _this.cancel()
          _this.spinning = false
        } else {
          _this.spinning = false
        }
      })
    },
    cancel () {
      this.opened = false
      this.$emit('cancel')
      this.$refs.ruleForm.resetFields()
    }
  },
  watch: {
    show (newValue, oldValue) {
      this.opened = newValue
      if (!newValue) {
        this.cancel()
      } else {
        this.form = this.info
      }
    }
  }
}
</script>
<style lang="less" scoped>
 .ant-form-item{
   margin-bottom:0 !important;
 }
</style>
