<!--
  @description:招标项目/采购项目-合同签订详情
  @Modifier:zyy
  @routerPath:bidding/calibration/bidContractSigning
  @date:2021/4/21-17:52
-->
<template>
  <div :key="contractSource">
    <section class="title p0-16 clearfix">
      <template>
        <div class="title-back pointer" @click="back">
          <i class="iconfont icon-fanhui mr10" />协议采购
        </div>
      </template>
    </section>
    <div class="p0-16">
      <table class="tableData">
        <tr>
          <td colspan="4" style="background: #fff;border:none">
            <div class="page-title" style="display: inline-block">
              1.协议信息
            </div>
          </td>
        </tr>
        <tr>
          <td>
            协议编号
          </td>
          <td>
            {{ formData.focusContractNo }}
          </td>
          <td>
            协议名称
          </td>
          <td>
            {{ formData.focusContractName }}
          </td>
        </tr>
        <tr>
          <td colspan="4" style="background: #fff;border:none">
            <div class="page-title">
              2.合同基本信息
            </div>
          </td>
        </tr>
        <tr>
          <td>
            合同编号
          </td>
          <td>
            {{ formData.contractNo }}
          </td>
          <td>
            合同名称
          </td>
          <td>
            {{ formData.contractName }}
          </td>
        </tr>
        <tr>
          <td>
            合同金额(元)
          </td>
          <td>
            {{ formData.contractTotalMoney }}
          </td>
          <td />
          <td />
        </tr>
        <tr>
          <td colspan="4" style="background: #fff;border:none">
            <div class="page-title">
              3.合同供方
            </div>
          </td>
        </tr>
        <template v-for="(item, index) in formData.supplyContractPartyVo">
          <tr :key="index+'departName'">
            <td>
              单位名称
            </td>
            <td>
              {{ item.departName }}
            </td>
            <td>
              社会统一信用代码
            </td>
            <td>
              {{ item.unified }}
            </td>
          </tr>
          <tr :key="index+'corporation'">
            <td>
              法定代表人
            </td>
            <td>
              {{ item.corporation }}
            </td>
            <td>
              税号
            </td>
            <td>
              {{ item.taxNo }}
            </td>
          </tr>
          <tr :key="index+'bankName'">
            <td>
              开户行
            </td>
            <td>
              {{ item.bankName }}
            </td>
            <td>
              账号
            </td>
            <td>
              {{ item.bankNo }}
            </td>
          </tr>
          <tr :key="index+'address'">
            <td>
              单位地址
            </td>
            <td colspan="3">
              {{ item.address }}
            </td>
          </tr>
          <tr :key="index+'agent'">
            <td>
              委托代理人
            </td>
            <td>
              {{ item.agent }}
            </td>
            <td>
              电话
            </td>
            <td>
              {{ item.tel }}
            </td>
          </tr>
          <tr :key="index+'bankNo'">
            <td>
              传真
            </td>
            <td>
              {{ item.fax }}
            </td>
            <td>
              邮箱
            </td>
            <td>
              {{ item.mail }}
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="4" style="background: #fff;border:none">
            <div class="page-title">
              4.合同需方
            </div>
          </td>
        </tr>
        <template v-for="(item, index) in formData.demandContractPartyVo">
          <tr :key="index+'demandDepartName'">
            <td>
              单位名称
            </td>
            <td>
              {{ item.departName }}
            </td>
            <td>
              社会统一信用代码
            </td>
            <td>
              {{ item.unified }}
            </td>
          </tr>
          <tr :key="index+'demandCorporation'">
            <td>
              法定代表人
            </td>
            <td>
              {{ item.corporation }}
            </td>
            <td>
              税号
            </td>
            <td>
              {{ item.taxNo }}
            </td>
          </tr>
          <tr :key="index+'demandBankName'">
            <td>
              开户行
            </td>
            <td>
              {{ item.bankName }}
            </td>
            <td>
              账号
            </td>
            <td>
              {{ item.bankNo }}
            </td>
          </tr>
          <tr :key="index+'demandAddress'">
            <td>
              单位地址
            </td>
            <td colspan="3">
              {{ item.address }}
            </td>
          </tr>
          <tr :key="index+'demandAgent'">
            <td>
              委托代理人
            </td>
            <td>
              {{ item.agent }}
            </td>
            <td>
              电话
            </td>
            <td>
              {{ item.tel }}
            </td>
          </tr>
          <tr :key="index+'demandBankNo'">
            <td>
              传真
            </td>
            <td>
              {{ item.fax }}
            </td>
            <td>
              邮箱
            </td>
            <td>
              {{ item.mail }}
            </td>
          </tr>
        </template>
      </table>
      <div class="page-title" style="margin-top: 10px;margin-bottom: 10px">
        5.合同标的物
      </div>
      <el-table :data="formData.detailList">
        <el-table-column type="index" label="序号" min-width="60" align="center" />
        <el-table-column header-align="center" label="产品名称" min-width="180" prop="productName" align="center" />
        <el-table-column header-align="center" label="物资规格" min-width="180" prop="productSpecs" align="center" />
        <el-table-column header-align="center" label="单位" prop="unit" align="center">
          <template slot-scope="scope">
            <span>{{ filterDictText(purchaseUnitList,scope.row.unit ) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="180"
          prop="quantity"
          label="数量"
        />
        <el-table-column header-align="center" label="单价（元）" prop="price" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price?moneyFormat(parseFloat(scope.row.price).toFixed(2)):scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="总价（元）" prop="totalPrice" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.totalPrice?moneyFormat(parseFloat(scope.row.totalPrice).toFixed(2)):scope.row.totalPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="offerRemarks"
          label="备注"
          min-width="180"
        />
      </el-table>
      <div class="page-title" style="margin-top: 10px;margin-bottom: 10px">
        6.月度计划
      </div>
      <el-table :data="formData.detailPurchasePlanList">
        <el-table-column type="index" label="序号" min-width="60" align="center" />
        <el-table-column header-align="center" label="产品名称" min-width="180" prop="productName" align="center" />
        <el-table-column header-align="center" label="单位" prop="unit" align="center">
          <template slot-scope="scope">
            <span>{{ filterDictText(purchaseUnitList,scope.row.unit ) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="180"
          prop="quantity"
          label="数量"
        />
        <el-table-column header-align="center" label="预算单价（元）" prop="price" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price?moneyFormat(parseFloat(scope.row.price).toFixed(2)):scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="预算总价（元）" prop="totalPrice" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.totalPrice?moneyFormat(parseFloat(scope.row.totalPrice).toFixed(2)):scope.row.totalPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="offerRemarks"
          label="备注"
          min-width="180"
        />
      </el-table>
    </div>
    <!-- 审核状态图片 -->
    <div class="supper_auditStatus">
      <!-- 待审核 -->
      <img v-if="formData.auditStatus==='00'" src="@assets/img/common/audit/auditWait.png" alt="">
      <!-- 审核通过 -->
      <img v-if="formData.auditStatus==='01'" src="@assets/img/common/audit/auditOk.png" alt="">
      <!-- 审核不通过 -->
      <img v-if="formData.auditStatus==='02'" src="@assets/img/common/audit/auditNo.png" alt="">
    </div>
    <div>
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button :loading="confirmLoading" @click="next">
              下一页，查看附件
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* 接口*/
import { getBidtCalibrationTenderContractData } from '@/api/contractManagement/index'// 招标项目-编辑初始化数据 招标项目-签订保存
/* 公用方法*/
import { moneyFormat, filterDictText } from '@/assets/js/utils'// 常用方法
export default {
  name: 'PurchaseAgreementDetail',
  components: {
  },
  data() {
    return {
      confirmLoading: false,
      contractSource: '', // 合同来源00采购01招标
      id: '', // 合同详情id
      moneyFormat: moneyFormat, // 千分位转换
      formData: {
        auditStatus: '', // 合同审批状态
        noticeId: '', // 通知书id
        tenderName: '', // 项目名称
        tenderNo: '', // 项目编号
        tenderId: '', // 项目id
        tenderMethod: '', // 采购方式
        packNo: '', // 标段编号
        packName: '', // 标段名称
        contractNo: '', // 合同编号
        contractName: '', // 合同名称
        contractTotalMoney: '', // 合同金额
        // contractPartyVo: {
        //   /* 供方 */
        //   supplyDepartName: '', // 中标人名称/供方单位
        //   supplyDepartId: '', // 供方人id
        //   supplyUnified: '', // 供方统一社会信用代码
        //   supplyTel: '', // 供方电话
        //   supplyCorporation: '', // 供方法人
        //   supplyBankName: '', // 供方开户行
        //   supplyMail: '', // 供方邮箱
        //   supplyAddress: '', // 供方地址
        //   supplyAgent: '', // 供方代理人
        //   supplyFax: '', // 供方传真
        //   supplyBankNo: '', // 供方银行账号
        //   supplyTaxNo: '', // 供方税号
        //   /* 需方 */
        //   demandDepartId: '', // 需方机构id
        //   demandDepartName: '', // 需方机构名称
        //   demandUnified: '', // 需方统一社会信用代码
        //   demandCorporation: '', // 需方法人
        //   demandTel: '', // 需方电话
        //   demandBankName: '', // 需方开户行
        //   demandMail: '', // 需方邮箱
        //   demandAddress: '', // 需方地址
        //   demandAgent: '', // 需方代理人
        //   demandFax: '', // 需方传真
        //   demandBankNo: '', // 需方银行账号
        //   demandTaxNo: '' // 需方税号
        // },
        supplyContractPartyVo: '', // 合同供方
        demandContractPartyVo: '', // 合同需方
        detailList: [], // 框架协议
        detailPurchasePlanList: [] // 月度计划
      }
    }
  },
  created() {
    // 字典信息
    this.initGroup()
    this.initData(this.$route.params.id)
  },
  methods: {
    filterDictText, // 字典值替换文本通用方法
    // 获取字典方法
    initGroup() {
      const data = ['purchaseUnit']
      this.$store.dispatch('getGroupType', data).then(res => {
        this.purchaseUnitList = res.bidTypeData.purchaseUnitList
      })
    },
    // 编辑初始化数据
    initData(id) {
      const data = {
        id: id
      }
      getBidtCalibrationTenderContractData(data).then(response => {
        this.formData = response.data
      }).catch(() => {
        this.loading = false
      })
    },
    // 返回
    back() {
      this.$router.push({
        path: '/contractManagement/purchaseAgreement-list'
      })
    },
    next() {
      this.$router.push({
        path: '/contractManagement/purchaseAgreementPdfDetail',
        query: {
          id: this.$route.params.id // 合同id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
// 审核图片
.supper_auditStatus{
  position: absolute;
  top: 10px;
  right:100px;
  z-index: 9;
}
</style>
