<!--
@description: 修改保证金发票弹框
@Modifier: gaoMy
@routerPath:
@date: 2020-5-13 13:20:15
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.consignContractVisible"
    :close-on-click-modal="false"
    title="修改开票信息"
    width="1000px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <section class="tools p0-16 pt16">
      <el-form
        ref="form"
        :model="invoiceData"
        :rules="rules"
        :inline-message="true"
      >
        <!--      点击修改-->
        <table class="from_table">
          <tr>
            <td>
              <el-form-item label="发票类型" />
            </td>
            <td>
              电子发票<span
                v-for="(item, index) in invoiceTypeData"
                v-if="item.typecode === invoiceData.invoiceType"
                :key="index"
              >{{ `(${item.typename})` }}</span>
            </td>
            <td>
              <el-form-item label="电子邮箱" prop="email">
                <el-popover
                  placement="top-start"
                  popper-class="hint"
                  width="420"
                  offset="5"
                  trigger="hover"
                  content="用于接收电子发票"
                >
                  <el-button slot="reference" type="info" class="prompt">
                    <i class="iconfont icon-qm" />
                  </el-button>
                </el-popover>
              </el-form-item>
            </td>
            <td>
              <el-input
                v-model="invoiceData.email"
                placeholder="请输入电子邮箱"
                clearable
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="发票抬头" prop="invoiceTitle" />
            </td>
            <td>
              <el-input
                v-model="invoiceData.invoiceTitle"
                placeholder="请输入"
                clearable
              />
            </td>
            <td>
              <el-form-item
                label="纳税人识别号"
                prop="taxpayerIdentificationNumber"
              />
            </td>
            <td>
              <el-input
                v-model="invoiceData.taxpayerIdentificationNumber"
                placeholder="请输入"
                clearable
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="地址、电话" prop="taxpayeraddr" />
            </td>
            <td>
              <el-input
                v-model="invoiceData.taxpayeraddr"
                placeholder="请输入"
                clearable
              />
            </td>
            <td>
              <el-form-item label="开户行及账号" prop="bankname" />
            </td>
            <td>
              <el-input
                v-model="invoiceData.bankname"
                placeholder="请输入"
                clearable
              />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="一般纳税人证明文件说明" />
            </td>
            <td>
              <el-link>点击查看开具增值税专用发票证明文件说明</el-link>
            </td>
            <td>
              <el-form-item label="一般纳税人证明" prop="bnkname" />
            </td>
            <td>
              <upload
                ref="upload"
                :on-change="principalFile"
                :data="principalData"
                :file-list="principalList"
                :auto-delete="true"
                :auto-upload="false"
                :limit="1"
                :action="importFileUrl"
                :tip-text="'彩色扫描件,只限图片,word,psf文档'"
                :title="''"
                file-ref="fileRef"
                but-text="点击上传"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </section>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button
        :loading="confirmLoading"
        type="primary"
        @click="ensure('form')"
      >{{ language.Determine }}</el-button>
      <el-button @click="dialogData.consignContractVisible = false">{{
        language.cancel
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* api接口*/
import {
  saveFeeInvoice
} from '@/api/procurement/procurementFee' // 保存发票信息
import { saveInvoice } from '@api/common/user'
import { getCurrentDepartInvoiceByType } from '@api/procurement/commonUser' // 发票管理保存发票信息
// vuex
import { mapGetters } from 'vuex'
// 公共方法
import { procurementTenderfeeMixins } from '../mixins/procurementTenderfeeMixins'
// 文件上传地址
import { upLoadFileUrl } from '@/api/common/uploadCenter'
// 文件上传组件
import upload from '@comp/common/updownload/upload'
/* 公用方法*/
import { email, taxpayerIdentificationNumber } from '@/assets/js/validate' // 校验输入内容
export default {
  name: 'ProcurementCollectionDialogVue',
  components: {
    upload
  },
  mixins: [procurementTenderfeeMixins],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {}
    }
  },
  data() {
    return {
      confirmLoading: false,
      importFileUrl: upLoadFileUrl, // 文件上传地址
      principalData: {
        id: '', // 上传Id
        fileType: 'pay_extinfo_invoice_attachment_base' // 文件类型
      },
      invoiceData: {},
      principalList: [],
      // 开票信息数据
      invoiceDatas: {
        invoiceTitle: '',
        invoiceType: '',
        taxpayerIdentificationNumber: '',
        bankname: '',
        taxpayeraddr: '',
        email: ''
      },
      // 校验规则
      rules: {
        invoiceType: [{ required: true, message: '请选择', trigger: 'blur' }], // 发票类型
        email: [{ required: true, validator: email, trigger: 'blur' }], // 邮箱
        invoiceTitle: [{ required: true, message: '请选择', trigger: 'blur' }], // 发票抬头
        taxpayerIdentificationNumber: [
          {
            required: true,
            validator: taxpayerIdentificationNumber,
            trigger: 'blur'
          }
        ], // 纳税号
        taxpayeraddr: [{ required: true, message: '请选择', trigger: 'blur' }], // 地址、电话
        bankname: [{ required: true, message: '请选择', trigger: 'blur' }] // 开户行及账号
      }
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.consignContractVisible'(val) {
      if (val) {
        // 弹框已打开
        // 加载数据
        this.loadData()
      }
    }
  },
  methods: {
    // 选择信息-确定
    ensure(formName) {
      this.confirmLoading = true
      this.$refs[formName].validate((valid, field) => {
        if (valid) {
          this.saveInvoice()
        } else {
          return false
        }
      })
    },
    assetsDatas() {
      const data = {
        id: this.dialogData.id,
        invoiceTitle: this.invoiceData.invoiceTitle,
        invoiceType: this.invoiceData.invoiceType,
        taxpayerIdentificationNumber: this.invoiceData.taxpayerIdentificationNumber,
        bankname: this.invoiceData.bankname,
        taxpayeraddr: this.invoiceData.taxpayeraddr,
        email: this.invoiceData.email,
        supplierId: this.dialogData.supplierId
      }
      return data
    },
    // 附件上传
    principalFile(file, fileList) {
      this.principalList = fileList
    },
    // 初始化加载开票信息数据方法
    loadData() {
      const type = this.dialogData.type
      // 添加email信息
      this.invoiceData.email = this.dialogData.email
      getCurrentDepartInvoiceByType(type)
        .then(res => {
          // 合并对象
          this.invoiceData = { ...this.invoiceData, ...res.data }
        })
        .catch(res => {})
    },
    // 封装发票管理保存发票信息方法
    saveInvoice() {
      this.invoiceData.status = '01'
      const data = this.invoiceData
      saveInvoice(data)
        .then(res => {
          // 返回id代表？？
          this.principalData.id = res.data
          // 判断是否有文件上传
          if (this.principalList.length > 0) {
            this.$refs.upload.submitUpload()// 上传附件
          }
          // 调用保存缴费发票的方法
          this.saveFeeInvoices()
        })
        .catch(res => {
          this.confirmLoading = false
        })
    },
    // 封装采购文件保存发票的方法
    saveFeeInvoices() {
      const data = this.assetsDatas()
      saveFeeInvoice(data).then(res => {
        // 保存成功
        if (res.header.ret === '0') {
          setTimeout(() => {
            this.confirmLoading = false
            this.dialogData.consignContractVisible = false
            this.$emit('consignContractInfo', true)
            this.$emit('consignContractId', res.data)
          }, 3000)
        }
      }).catch(res => {
      })
    }
  }
}
</script>

<style scoped></style>
