<!--
  @description: 联合体供应商
  @Modifier: haoFx
  @routerPath:
  @date: 2021-06-03-10:18
-->
<template>
  <div>
    <el-form ref="form" :model="invitatinSupplierInfo" :rules="rules" :inline-message="true">
      <table class="from_table">
        <tr class="singleRow">
          <td>
            <el-form-item label="牵头人" prop="leadSupplierName" />
          </td>
          <td colspan="3">
            <el-input
              v-model="invitatinSupplierInfo.leadSupplierName"
              style="width: calc(80% - 180px)"
              disabled
              placeholder="请选择"
              class="mr10"
            />
            <el-button type="primary" plain @click="selectSupplier('00')">
              选择
            </el-button>
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            <el-form-item label="联合体成员" prop="consortiumSupplierName" />
          </td>
          <td colspan="3">
            <el-input
              v-model="invitatinSupplierInfo.consortiumSupplierName"
              disabled
              style="width: calc(80% - 180px)"
              class="mr10"
              placeholder="请选择"
            />
            <el-button type="primary" plain @click="selectSupplier('01')">
              选择
            </el-button>
            <el-button type="primary" :loading="confirmLoading" @click="saveProcurementPackInvitatinSupplier('form')">
              确 认
            </el-button>
          </td>
        </tr>
      </table>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="supplierList"
      class="mt10"
      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
        prop="supplierName"
        header-align="center"
        label="供应商"
      />
      <el-table-column
        prop="businesslicence"
        header-align="center"
        label="统一社会信用代码"
        min-width="110"
        align="left"
      />
      <el-table-column
        prop="linkerName"
        header-align="center"
        label="联系人"
      />
      <el-table-column
        prop="linkerTel"
        align="center"
        label="联系方式"
      />
      <el-table-column
        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-column
        label="操作"
        align="center"
        fixed="right"
        min-width="80"
      >
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.supplierIfComboType ==='00'"
            type="primary"
            @click.stop="removeSupplier(scope.row)"
          >
            移除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 选择供应商 -->
    <selSupplierDialog :dialog-data="selSupplierDialogData" @consignContractInfo="consignContractInfo" />
  </div>
</template>

<script>
/* api*/
import { queryProcurementPackInvitatinSupplierList, saveProcurementPackInvitatinSupplierList, removeProcurementPackInvitatinSupplierList } from '@/api/procurement/purchasplan' // 打包
import { restoreInitialValue } from '@/assets/js/utils' // 公用方法
/* 公用组件*/
import selSupplierDialog from '@/views/procurement/components/selSupplier-dialog.vue' // 选择供应商
export default {
  name: 'ConsortiumSupplier',
  components: {
    selSupplierDialog // 选择供应商
  },
  props: {
    formData: {
      type: Object,
      default: function() {
        return {
        }
      }
    }
  },
  data() {
    return {
      confirmLoading: false, // 控制按钮重复点击Loding
      supplierList: [], // 供应商选择数据
      // 选择供应商参数
      selSupplierDialogData: {
        departId: '', // 当前登录人的机构id
        tenderId: '',
        tenderMethod: '', // 采购方式
        tenderType: '', // 公开/邀请
        purPlanType: '00', // 集采计划打包 00 框架计划编制 01
        consignContractVisible: false // 弹框状态
      },
      purchaseInvitationSupplierList: [], // 保存牵头人、联合体集合
      // 表单显示
      invitatinSupplierInfo: {
        leadSupplierName: '', // 牵头人名称
        consortiumSupplierName: '' // 联合体成员
      },
      // 校验输入内容
      rules: {
        leadSupplierName: [{ required: true, message: '请选择', trigger: 'blur' }], //  牵头人名称
        consortiumSupplierName: [{ required: true, message: '请选择', trigger: 'blur' }] // 联合体成员
      }
    }
  },
  watch: {
    'formData'(val) {
    }
  },
  created() {
  },
  methods: {
    // 查询供应商
    queryProcurementSupplierList() {
      const params = {
        tenderId: this.formData.tenderId
      }
      // 查询选择供应商
      queryProcurementPackInvitatinSupplierList(params).then((res) => {
        this.supplierList = res.data
        this.$emit('getSupplierList', this.supplierList)
        // 判断树形数据不为空，执行方法
        if (this.supplierList.length > 0) this.setTableIndex(this.supplierList)
      })
    },
    // 树形列表index层级，实现方法（可复制直接调用）
    setTableIndex(arr, index) {
      arr.forEach((item, key) => {
        item.index = key + 1
        if (index) {
          item.index = index + '.' + (key + 1)
        }
        if (item.lists) {
          this.setTableIndex(item.lists, item.index)
        }
      })
    },
    // 选择供应商弹框关闭时再次请求
    consignContractInfo(currentDataInfo, supplierType) {
      //  supplierType 00 牵头人
      if (supplierType === '00') {
        this.purchaseInvitationSupplierList.push(...currentDataInfo)
        this.invitatinSupplierInfo.leadSupplierName = currentDataInfo[0].supplierName
      }
      // 01 联合体成员
      let consortiumSupplierName = [] // 联合体成员名称
      if (supplierType === '01') {
        this.purchaseInvitationSupplierList[0].list = []
        this.purchaseInvitationSupplierList[0].list.push(...currentDataInfo)
        consortiumSupplierName = currentDataInfo.map(item => item.supplierName).join(',')
        this.invitatinSupplierInfo.consortiumSupplierName = consortiumSupplierName
      }
    },
    // 选择供应商 type 00 牵头人 01 联合体成员
    selectSupplier(type) {
      let single = true
      if (type === '00') {
        this.purchaseInvitationSupplierList = []
        this.invitatinSupplierInfo.consortiumSupplierName = ''
        single = true
      } else {
        if (!this.invitatinSupplierInfo.leadSupplierName) {
          this.$message.warning('请选择牵头人')
          return false
        }
        single = false
      }
      this.selSupplierDialogData.supplierType = type // 选择供应商类型
      this.selSupplierDialogData.ifCombo = this.formData.ifCombo // 是否联合体
      this.selSupplierDialogData.tenderId = this.formData.tenderId // 采购单id
      this.selSupplierDialogData.tenderMethod = this.formData.tenderMethod // 采购方式
      this.selSupplierDialogData.tenderType = this.formData.tenderType // 采购类型
      this.selSupplierDialogData.single = single // 判断是否单选 牵头人单选  联合体成员可多选
      this.selSupplierDialogData.departId = this.$store.getters.info.companyId // 当前登录角色的机构id
      this.selSupplierDialogData.consignContractVisible = true // 弹框状态
    },
    // 保存邀请供应商成员（联合体）
    saveProcurementPackInvitatinSupplier(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          const params = {
            ifCombo: this.formData.ifCombo, // 是否联合体 00-否;01-是
            tenderId: this.formData.tenderId, // 采购单id
            tenderMethod: this.formData.tenderMethod, // 采购方式
            tenderType: this.formData.tenderType, // 采购类型
            list: this.purchaseInvitationSupplierList // 选择数据
          }
          saveProcurementPackInvitatinSupplierList(params).then((res) => {
            restoreInitialValue(this.invitatinSupplierInfo)
            this.purchaseInvitationSupplierList = []
            this.confirmLoading = false
            this.queryProcurementSupplierList()
          }).catch(() => {})
          this.confirmLoading = false
        }
      })
    },
    // 移除选择供应商
    removeSupplier(row) {
      const params = { id: row.id }
      removeProcurementPackInvitatinSupplierList(params).then((res) => {
        this.queryProcurementSupplierList()
      })
    }
  }
}
</script>

<style scoped>

</style>
