<!--
  @description: 查看邀请的供应商
  @author: 高铭昱
  @date：2021-2-8 17:16
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    title="查看邀请供应商"
    width="896px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div>
      <el-table
        :loading="loading"
        :data="tableData"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'lists', hasChildren:'hasChildren'}"
      >
        <!-- 序号 -->
        <el-table-column type="index" label="序号" width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.index }}</span>
          </template>
        </el-table-column>
        <!-- 供应商名称 -->
        <el-table-column
          header-align="center"
          prop="supplierName"
          label="供应商名称"
          min-width="230"
          align="left"
        />
        <!-- 统一社会信用代码 -->
        <el-table-column
          prop="businesslicence"
          label="统一社会信用代码"
          min-width="110"
          align="center"
        />
        <!-- 联系人 -->
        <el-table-column
          header-align="center"
          prop="linkerName"
          align="left"
          label="联系人"
        />
        <!-- 联系方式 -->
        <el-table-column
          prop="linkerTel"
          label="联系方式"
          align="center"
        />
        <el-table-column
          v-if="ifCombo==='01'"
          prop="supplierIfComboType"
          align="center"
          label="类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.supplierIfComboType==='00'">牵头人</span>
            <span v-if="scope.row.supplierIfComboType==='01'">联合体成员</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">
        关 闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* 接口*/
import {
  queryProcurementPackInvitatinSupplierList
} from '@/api/procurement/purchasplan' // 查询邀请供应商
/*  公共方法 */
import { paging } from '@/assets/js/utils/index.js' // 前端分页
/*  公共组件 */
import pagination from '@comp/common/pagination/pagination' // 分页组件
/*  混合开发-参数字段 */
import { ListMixin } from '@/mixins/ListMixin' // 分页

export default {
  name: 'InviteSupplierDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin],
  props: {
    // 弹框数据
    dialogData: {
      type: Object,
      default: () => {
        return {
          tenderId: '' // 项目id
        }
      }
    }
  },
  data() {
    return {
      ifCombo: '00',
      loading: true, // loading
      tableData: [], // 表格数据
      supplierList: [] // 查看供应商数据
    }
  },
  watch: {
    // 监听弹框打开情况
    'dialogData.dialog': {
      handler(val) {
        if (val) {
          // 打开弹窗数据初始化
          this.queryProcSupplierList()
        }
      },
      deep: true
    }
  },
  created() {

  },
  methods: {
    /*
    * 查询供应商
    * @params tenderId 项目id
    * 查看选择的供应商
    */
    queryProcSupplierList() {
      const params = {
        tenderId: this.dialogData.tenderId
      }
      queryProcurementPackInvitatinSupplierList(params).then((res) => {
        this.loading = false // laoding
        this.supplierList = res.data
        // 判断树形数据不为空，执行方法
        if (this.supplierList.length > 0) this.setTableIndex(this.supplierList)
        this.loadData() // 分页
      })
    },
    // 树形列表index层级，实现方法（可复制直接调用）
    setTableIndex(arr, index) {
      arr.forEach((item, key) => {
        if (item.supplierIfComboType) {
          this.ifCombo = '01'
        } else {
          this.ifCombo = '00'
        }
        item.index = key + 1
        if (index) {
          item.index = index + '.' + (key + 1)
        }
        if (item.lists) {
          this.setTableIndex(item.lists, item.index)
        }
      })
    },
    // 分页
    loadData() {
      this.tableData = paging({}, this.supplierList, this.paginationData)
    },
    // 关闭弹框
    handleCloseDialog() {
      this.dialogData.dialog = false
    }
  }
}
</script>

<style scoped>

</style>
