<!--
  @description:招标项目/采购项目-合同-付款
  @Modifier:郝定康
  @routerPath:
  @date:2021-10-26 18:18:11
-->
<template>
  <div class="p0-16">
    <!--标题-->
    <section class="title title_border">
      <!-- @click="back()" -->
      <div class="title-back pointer" @click="back">
        <i class="iconfont icon-fanhui " />
        付款
      </div>
    </section>
    <p class="page-title">
      合同基本信息
    </p>
    <table class="tableData">
      <tr>
        <td>
          合同编号
        </td>
        <td>
          {{ formData.contractNo }}
        </td>
        <td>
          时间
        </td>
        <td>
          {{ formData.createTime }}
        </td>
      </tr>
      <tr>
        <td>
          合同金额(元)
        </td>
        <td colspan="3">
          {{ formData.contractTotalMoney }}
        </td>
      </tr>
      <tr>
        <td>
          合同名称
        </td>
        <td colspan="3">
          {{ formData.contractName }}
        </td>
      </tr>
      <!-- <tr>
        <td>
          交货地点
        </td>
        <td colspan="3">
          {{ formData.deliveryAddress }}
        </td>
      </tr> -->
    </table>
    <p class="page-title">
      付款申请记录
    </p>
    <el-table
      ref="smallTable"
      v-loading="loading"
      class="clear-hint"
      :data="tableData"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
        fixed
      />
      <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="paymentStage"
        label="付款阶段"
      />
      <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="paymentName"
        label="付款阶段名称"
      />
      <el-table-column
        header-align="center"
        min-width="220"
        align="center"
        prop="collectionDepartName"
        :label="formData.contractSupplyType === '02' ? '收' : '付' + '款单位'"
      />
      <el-table-column
        header-align="center"
        min-width="220"
        align="center"
        prop="departName"
        :label="formData.contractSupplyType === '02' ? '付' : '收' + '款单位'"
      />
      <!-- <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="checkUserRealName"
        label="联系人"
      />
      <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="checkUserRealName"
        label="电话"
      /> -->
      <!-- <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="paymentCurrency"
        label="币种"
      /> -->
      <el-table-column
        header-align="center"
        min-width="150"
        align="center"
        prop="paymentMoney"
        label="应付金额"
      />
      <!-- <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="useStatus"
        label="付款状态"
      >
        <template slot-scope="scope">
          {{ filterDictText(useStatusList, scope.row.useStatus) }}
        </template>
      </el-table-column> -->
      <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="auditStatus"
        label="审核状态"
      >
        <template slot-scope="scope">
          {{ scope.row.auditStatus ? filterDictText(auditStatusList, scope.row.auditStatus) : '未提交' }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="操作"
        align="center"
        width="300"
      >
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.supplierEvaluationFlag === '01' && scope.row.supplierUseStatus === '00'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="contractPaymentEvaluation(scope.row)"
          >
            [履约评价]
          </el-link>
          <el-link
            v-if="scope.row.supplierEvaluationFlag === '01' && scope.row.supplierUseStatus === '01'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="contractPaymentEvaluationDetail(scope.row)"
          >
            [履约评价详情]
          </el-link>
          <el-link
            v-if="!scope.row.auditStatus || scope.row.auditStatus === '02'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="contractPayment(scope.row)"
          >
            [发票付款]
          </el-link>
          <el-link
            v-if="scope.row.auditStatus"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="contractPaymentDetail(scope.row)"
          >
            [发票付款详情]
          </el-link>
          <!-- <el-link
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="acceptanceDetail(scope.row.id)"
          >
            [付款申请]
          </el-link> -->
          <!-- <el-link
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="deleteRow(scope.row)"
          >
            [移除]
          </el-link> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination :pagination-data="paginationData" @change="loadData" />
    <!-- 发票付款 -->
    <contractPaymentDialog :dialog-data="contractPaymentDialogData" @callback="loadData" />
    <!-- 发票付款详情 -->
    <contractPaymentDetailDialog :dialog-data="contractPaymentDetailDialogData" />
    <!-- 履约评价 -->
    <contractPaymentEvaluationDialog :dialog-data="contractPaymentEvaluationDialogData" @callback="loadData" />
    <!-- 履约评价详情 -->
    <contractPaymentEvaluationDetailDialog :dialog-data="contractPaymentEvaluationDetailData" />
  </div>
</template>

<script>
/* api*/
import { getBidtCalibrationTenderContractData, listPaymentRequestInfo } from '@/api/contractManagement/index'
/* 公共混入 */
import { ListMixin } from '@/mixins/ListMixin'
/* 公共方法*/
import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 组件 */
import pagination from '@comp/common/pagination/pagination'
import contractPaymentDialog from './contractPayment-dialog' // 发票付款
import contractPaymentDetailDialog from './contractPaymentDetail-dialog' // 发票付款详情
import contractPaymentEvaluationDialog from './contractPaymentEvaluation-dialog' // 履约评价
import contractPaymentEvaluationDetailDialog from './contractPaymentEvaluationDetail-dialog' // 履约评价详情

export default {
  name: 'AcceptanceAdd',
  components: {
    pagination,
    contractPaymentDialog, // 发票付款
    contractPaymentDetailDialog, // 发票付款详情
    contractPaymentEvaluationDialog, // 履约评价
    contractPaymentEvaluationDetailDialog // 履约评价详情
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: false,
      useStatusList: [],
      auditStatusList: [],
      dictionaryType: ['useStatus', 'auditStatus'],
      formData: {},
      tableData: [],
      // 发票付款
      contractPaymentDialogData: {
        dialog: false,
        contractId: '', // 合同id
        id: '', // 付款阶段id
        checkId: '' // 验收id
      },
      // 发票付款详情
      contractPaymentDetailDialogData: {
        dialog: false,
        contractId: '', // 合同id
        id: '', // 付款阶段id
        checkId: '' // 验收id
      },
      // 履约评价
      contractPaymentEvaluationDialogData: {
        dialog: false,
        contractId: '', // 合同id
        id: '', // 付款阶段id
        checkId: '' // 验收id
      },
      // 履约评价详情
      contractPaymentEvaluationDetailData: {
        dialog: false,
        contractId: '', // 合同id
        id: '', // 付款阶段id
        checkId: '' // 验收id
      }
    }
  },
  created() {
    this.getGroupType()
    this.initData()
    this.loadData()
  },
  methods: {
    filterDictText,
    getGroupType() {
      // 获取字典信息
      this.$store.dispatch('getGroupType', this.dictionaryType).then((data) => {
      // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
        /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    // 初始化数据
    initData() {
      const data = {
        id: this.$route.params.id
      }
      getBidtCalibrationTenderContractData(data).then(response => {
        this.formData = response.data
      }).catch(() => {
        this.loading = false
      })
    },
    loadData() {
      this.loading = true
      const data = {
        contractId: this.$route.params.id,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      listPaymentRequestInfo(data).then(response => {
        this.loading = false
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    dialogDataSet(row) {
      return {
        contractId: row.contractId, // 合同id
        id: row.id, // 付款阶段id
        checkId: row.checkId, // 验收id
        dialog: true
      }
    },
    // 发票付款
    contractPayment(row) {
      window.console.log(row)
      this.contractPaymentDialogData = {
        ...this.dialogDataSet(row)
      }
    },
    // 发票付款详情
    contractPaymentDetail(row) {
      this.contractPaymentDetailDialogData = {
        ...this.dialogDataSet(row)
      }
    },
    // 履约评价
    contractPaymentEvaluation(row) {
      this.contractPaymentEvaluationDialogData = {
        ...this.dialogDataSet(row)
      }
    },
    // 履约评价详情
    contractPaymentEvaluationDetail(row) {
      this.contractPaymentEvaluationDetailData = {
        ...this.dialogDataSet(row)
      }
    },
    // 返回
    back() {
      const path = '/contractManagement/contractSigning-list'
      window.console.log('122222222')
      this.$router.push({
        path
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
