<template>
  <el-form
    inline
    :model="form"
    ref="form"
    class="form-wrap"
    label-width="150px"
  >

    <div class="dialog-info">
      <el-form-item
        label="可开票门票"
        prop="ticketNos">
        <el-select
          v-model="form.ticketNos"
          multiple
          placeholder="请选择">
          <el-option
            v-for="item in tickets"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="开票金额"
        prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item
        label="订单下单时间"
        prop="orderCreateTime">
        <el-date-picker
          v-model="form.orderCreateTime"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="买方名称"
        prop="invoiceSellerName">
        <el-input v-model="form.invoiceSellerName"></el-input>
      </el-form-item>
      <el-form-item
        label="买方税号"
        prop="invoiceSellerTaxpayerNum">
        <el-input v-model="form.invoiceSellerTaxpayerNum"></el-input>
      </el-form-item>
      <el-form-item
        label="买方地址"
        prop="invoiceSellerAddress">
        <el-input v-model="form.invoiceSellerAddress"></el-input>
      </el-form-item>
      <el-form-item
        label="买方联系电话"
        prop="invoiceSellerPhone">
        <el-input v-model="form.invoiceSellerPhone"></el-input>
      </el-form-item>
      <el-form-item
        label="买方开户银行"
        prop="invoiceSellerBank">
        <el-input v-model="form.invoiceSellerBank"></el-input>
      </el-form-item>
      <el-form-item
        label="买方银行账号"
        prop="invoiceSellerBankAccount">
        <el-input v-model="form.invoiceSellerAccount"></el-input>
      </el-form-item>
      <el-form-item
        label="买方接收邮箱"
        prop="invoiceBuyerReceiveEmail">
        <el-input v-model="form.invoiceBuyerReceiveEmail"></el-input>
      </el-form-item>
      <el-form-item
        label="买方接收号码"
        prop="invoiceBuyerReceivePhone">
        <el-input v-model="form.invoiceBuyerReceivePhone"></el-input>
      </el-form-item>
      <el-form-item
        label="开票备注"
        prop="remark">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
    </div>

    <div class="dialog-btn-wrap">
      <el-button
        @click="handleClose">
        取消
      </el-button>
      <el-button
        @click="submit"
        type="primary">
        保存
      </el-button>
    </div>
  </el-form>
</template>

<script>
import { doInvoice, getInvoiceTickets } from '@/api/invoice'
import moment from 'moment'

export default {
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    },
    dialogType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      tickets: [],
      form: {
        ticketNos: [],
        price: '',
        orderCreateTime: '',
        invoiceSellerName: '',
        invoiceSellerTaxpayerNum: '',
        invoiceSellerAddress: '',
        invoiceSellerPhone: '',
        invoiceSellerBank: '',
        invoiceSellerAccount: '',
        invoiceBuyerReceiveEmail: '',
        invoiceBuyerReceivePhone: '',
        remark: ''
      }
    }
  },
  watch: {
    visible (val) {
      this.reset()
      this.form = Object.assign({}, this.currentItem)
      this.getInvoiceTickets()
    }
  },
  methods: {
    getInvoiceTickets () {
      getInvoiceTickets().then(res => {
        this.tickets = res.data
      })
    },
    handleClose () {
      this.reset()
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.updateTicket()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateTicket () {
      if (this.form.orderCreateTime) {
        this.form.orderCreateTime = moment(this.form.orderCreateTime).format('YYYY-MM-DD HH:mm:ss')
      }
      doInvoice(this.form).then(res => {
        this.$message.success('保存成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-alert{
   margin-bottom: 20px;
   p{
      margin: 0;margin: 0;
   }
}

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
     ::v-deep .el-input{
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
</style>
