<!--
  @description:招标项目/采购项目-合同-验收
  @Modifier:郝定康
  @routerPath:
  @date:2021-10-26 10:16:15
-->
<template>
  <div class="p0-16">
    <!--标题-->
    <section class="title title_border">
      <!-- @click="back()" -->
      <i class="iconfont icon-fanhui pointer" />
      验收
    </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">
      验收记录
      <el-button type="primary" @click="acceptanceAdd('')">
        新增验收
      </el-button>
    </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="checkNo"
        label="验收申请编号"
      />
      <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="checkDesc"
        label="验收申请概述"
      />
      <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="checkTime"
        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="useStatus"
        label="状态"
      >
        <template slot-scope="scope">
          {{ filterDictText(useStatusList, scope.row.useStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="操作"
        align="center"
        width="140"
      >
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.useStatus === '00'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="acceptanceAdd(scope.row.id)"
          >
            [编辑]
          </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" />
    <acceptanceAddDialog :dialog-data="acceptanceAddDialogData" @callback="loadData" />
    <acceptanceDetailDialog :dialog-data="acceptanceDetailDialogData" />
  </div>
</template>

<script>
/* api*/
import { getBidtCalibrationTenderContractData, listContractCheckStage } from '@/api/contractManagement/index'
/* 公共混入 */
import { ListMixin } from '@/mixins/ListMixin'
/* 公共方法*/
import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 组件 */
import pagination from '@comp/common/pagination/pagination'
import acceptanceAddDialog from './acceptanceAdd-dialog'
import acceptanceDetailDialog from './acceptanceDetail-dialog'
export default {
  name: 'AcceptanceAdd',
  components: {
    pagination,
    acceptanceAddDialog,
    acceptanceDetailDialog
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: false,
      useStatusList: [],
      dictionaryType: ['useStatus'],
      formData: {},
      tableData: [],
      acceptanceAddDialogData: {
        dialog: false,
        contractId: '',
        id: '',
        contractNo: '',
        contractName: ''
      },
      acceptanceDetailDialogData: {
        dialog: false,
        id: '',
        contractNo: '',
        contractName: ''
      }
    }
  },
  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
      }
      listContractCheckStage(data).then(response => {
        this.loading = false
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    acceptanceAdd(id) {
      this.acceptanceAddDialogData.dialog = true
      this.acceptanceAddDialogData.contractId = this.formData.id
      this.acceptanceAddDialogData.id = id || ''
      this.acceptanceAddDialogData.contractNo = this.formData.contractNo
      this.acceptanceAddDialogData.contractName = this.formData.contractName
    },
    acceptanceDetail(id) {
      this.acceptanceDetailDialogData.dialog = true
      this.acceptanceDetailDialogData.id = id
      this.acceptanceDetailDialogData.contractNo = this.formData.contractNo
      this.acceptanceDetailDialogData.contractName = this.formData.contractName
    }
  }
}
</script>

<style lang="less" scoped>

</style>
