<!--
  @description: 付款-发票付款
  @author: 郝定康
  @routerPath:
  @date： 2021-11-29 17:12:28
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :before-close="close"
    :lock-scroll="false"
    append-to-body
    width="1000px"
    title="发票付款详情"
  >
    <div class="p0-16 mb10">
      <p class="page-title">
        1.合同信息
      </p>
      <table class="tableData">
        <tr>
          <td>
            合同名称
          </td>
          <td colspan="3">
            {{ formData.contractName }}
          </td>
          <td>
            合同编号
          </td>
          <td>
            {{ formData.contractNo }}
          </td>
        </tr>
      </table>
      <p class="page-title">
        2.验收行项目
      </p>
      <el-table
        ref="smallTable"
        :data="formData.checkDetailInfos"
        highlight-current-row
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        />
        <el-table-column
          prop="productNo"
          label="产品编码"
          align="center"
        />
        <el-table-column
          prop="productName"
          label="产品名称"
          align="center"
        />
        <el-table-column
          prop="quantity"
          label="成交数量"
          align="center"
        />
        <el-table-column
          prop="price"
          label="含税单价（元）"
          align="center"
        />
        <el-table-column
          prop="checkQuantity"
          label="验收数量"
          align="center"
        />
        <el-table-column
          prop="checkPrice"
          label="验收单价（元）"
          align="center"
        />
      </el-table>
      <p class="page-title">
        3.申请验收信息
      </p>
      <table class="tableData">
        <tr>
          <td>
            收款单位名称
          </td>
          <td>
            {{ formData.proceedsDepartName }}
          </td>
          <td>
            收款单位电话
          </td>
          <td>
            {{ formData.proceedsTel }}
          </td>
        </tr>
        <tr>
          <td>
            收款单位开户行
          </td>
          <td>
            {{ formData.proceedsBankName }}
          </td>
          <td>
            收款单位地址
          </td>
          <td>
            {{ formData.proceedsAddress }}
          </td>
        </tr>
        <tr>
          <td>
            收款单位法人
          </td>
          <td>
            {{ formData.proceedsCorporation }}
          </td>
          <td>
            收款单位银行账号
          </td>
          <td>
            {{ formData.proceedsBankNo }}
          </td>
        </tr>
        <tr>
          <td>
            付款单位名称
          </td>
          <td>
            {{ formData.paymentDepartName }}
          </td>
          <td>
            付款单位电话
          </td>
          <td>
            {{ formData.paymentTel }}
          </td>
        </tr>
        <tr>
          <td>
            付款单位开户行
          </td>
          <td>
            {{ formData.paymentBankName }}
          </td>
          <td>
            付款单位地址
          </td>
          <td>
            {{ formData.paymentAddress }}
          </td>
        </tr>
        <tr>
          <td>
            付款单位法人
          </td>
          <td>
            {{ formData.paymentCorporation }}
          </td>
          <td>
            付款单位银行账号
          </td>
          <td>
            {{ formData.paymentBankNo }}
          </td>
        </tr>
        <tr>
          <td>
            发票附件
          </td>
          <td colspan="3">
            <downloadFile :data="contract_invoice" />
          </td>
        </tr>
        <tr>
          <td>
            申请说明
          </td>
          <td colspan="3">
            {{ formData.applyDesc }}
          </td>
        </tr>
      </table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">
        取消
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
/* api */
import { queryContractInvoiceByCheckId } from '@/api/contractManagement/index'
/* 公共混入*/
import { contractSigningMixins } from '../mixins/contractSigningMixins'
/* 公共组件*/
import downloadFile from '@comp/common/updownload/downloadFile' // 附件回显
export default {
  name: 'ContractPaymentDetailDialog',
  components: {
    downloadFile
  },
  mixins: [contractSigningMixins],
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
      }
    }
  },
  watch: {
    'dialogData.dialog'(val) {
      // 打开弹框加载数据
      if (val) {
        this.initData()
      }
    }
  },
  created() {
  },
  methods: {
    // 付款发票附件
    contractInvoiceChange(file, fileList) {
      if (fileList.length > 0) {
        this.$set(this.formData, 'contract_invoice', 'true') // 上传了
      } else {
        this.$set(this.formData, 'contract_invoice', '') // 未上传
      }
    },
    // 获取详情
    initData() {
      const params = {
        contractId: this.dialogData.contractId, // 合同id
        payStageId: this.dialogData.id, // 付款阶段id
        checkId: this.dialogData.checkId // 验收id
      }
      queryContractInvoiceByCheckId(params).then(res => {
        this.formData = res.data
        this.contract_invoice.bizId = this.formData.id // 付款发票附件
      })
    },
    // 取消
    close() {
      this.dialogData.dialog = false
    }
  }
}
</script>

<style scoped lang="less">
</style>
