<!--
  @description: 邀请函
  @Modifier: sxm
  @routerPath:
  @date: 2020-5-7 10:20:31
-->
<template>
  <div>
    <p class="page-title" style="display:inline-block">
      1、邀请供应商
    </p>
    <el-button type="primary" style="margin-left:10px; display:inline-block" @click="addClick">
      追加供应商
    </el-button>
    <section>
      <el-table
        ref="smallTable"
        :data="tableData"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        />
        <el-table-column
          prop="supplierName"
          align="left"
          label="供应商"
          header-align="center"
        />
        <el-table-column
          prop="businesslicence"
          align="center"
          width="160"
          label="统一社会信用代码"
          header-align="center"
        />
        <el-table-column
          prop="linkerName"
          align="center"
          label="联系人"
          header-align="center"
        />
        <el-table-column
          prop="linkerTel"
          align="center"
          label="联系方式"
          header-align="center"
        />
      </el-table>
    </section>
    <p class="page-title">
      2、邀请函标题
    </p>
    <table class="tableData">
      <tr class="singleRow">
        <td>邀请函标题</td>
        <td colspan="3">
          {{ formData.title }}
        </td>
      </tr>
    </table>
    <p class="page-title">
      3、备注
    </p>
    <table class="tableData">
      <tr class="singleRow">
        <td v-if="formData.remark !== null">
          对供应商要求
        </td>
        <td colspan="3">
          {{ formData.remark }}
        </td>
      </tr>
      <tr class="singleRow">
        <td>注意事项</td>
        <td colspan="3">
          {{ formData.mattersNeedingAttention }}
        </td>
      </tr>
    </table>
    <!-- 公告预览 -->
    <!-- <div v-if="flgsPrve" class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button type="primary">邀请函预览</el-button>
        </div>
      </div>
    </div> -->
    <!-- 添加供应商弹框 -->
    <projectInfoDialog :dialog-data="dialogData" @consignContractInfo="consignContractInfo" />
  </div>
</template>

<script>
/* 接口*/
import { queryProcurementInvitatinByTenderId, queryProcurementInvitatinDetailPage, saveProcurementInvitatinDetailSupplierList } from '@/api/procurement/procurementProject'// 获取信息
import projectInfoDialog from './InvitationPurchase-dialog'
export default {
  name: 'InvitationDetail',
  components: {
    projectInfoDialog
  },
  mixins: [],
  props: {
    // 弹框展示状态bu
    tenderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [], // 邀请供应商列表
      formData: {},
      serchForm: {
        pageNo: 1,
        pageSize: 10,
        tenderId: this.$route.query.id
      },
      dialogData: {
        consignContractVisible: false, // 添加供应商
        departId: '', // 审核单位id
        excludeSupplierIds: '' // 已被邀请供应商所有id拼接的字符串
      },
      supplerlist: { // 调用保存供应商接口
        list: [],
        tenderId: this.$route.query.id
      }
    }
  },
  created() {
    this.initData(this.tenderId)// 查询邀请函信息
    this.initSupplierData(this.serchForm)
  },
  methods: {
    // 查询邀请函信息
    initData(tenderId) {
      queryProcurementInvitatinByTenderId(tenderId).then(response => {
        if (response.header.ret === '0') {
          this.formData = response.data
        }
      }).catch(() => {
      })
    },
    // 查询邀请供应商列表
    initSupplierData() {
      queryProcurementInvitatinDetailPage(this.serchForm).then(res => {
        if (res.header.ret === '0') {
          this.tableData = res.data.records
        }
      })
    },
    // 添加供应商的数据
    consignContractInfo(val) {
      this.supplerlist.list = val
      saveProcurementInvitatinDetailSupplierList(this.supplerlist).then(res => {
        // 添加成功之后重新调用查询邀请函详情方法
        this.initSupplierData()
        this.$message({
          message: '添加供应商成功',
          type: 'success'
        })
      })
    },
    // 打开弹框
    addClick() {
      this.dialogData.consignContractVisible = true
    }
  }
}
</script>

<style lang="less" scoped>

</style>
