<!--
  @description: 新版邀请公告-邀请人名单-（分包）选择投标人
  @Modifier: 张慢慢
  @routerPath:
  @date: 2020/1/19-10:11
-->
<template>
  <div>
    <!--标段列表-->
    <div>
      <div class="page-title">
        邀请名单
      </div>
      <el-table
        ref="package"
        :data="packageList"
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        />
        <el-table-column
          header-align="center"
          label="标段（包）编号"
          align="center"
          prop="packNo"
        />
        <el-table-column
          header-align="center"
          label="标段（包）名称"
          prop="packName"
          align="center"
        />
        <el-table-column
          header-align="center"
          label=""
          align="left"
          width="250"
        >
          <template slot-scope="scope">
            <el-link
              v-if="invitationType!=='02'"
              type="primary"
              @click="inviteSuppliers(scope.row,scope.$index)"
            >
              [邀请供应商]
            </el-link>
            <el-link
              :underline="false"
              type="primary"
              @click="selectedSuppliers(scope.row,scope.$index)"
            >
              [已选供应商]（{{ supplierSize[scope.row,scope.$index] }}）
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--选择招标人弹框-->
    <invitationSupplierListDialog
      :dialog-data="dialogData"
      @supplierSelect="supplierSelect"
    />
    <!--（分包）已挑选招标人弹框-->
    <packageSelectedSuppliersListDialog
      :dialog-data="selectSupplierListData"
      @supplierSelect="supplierSelect"
    />
  </div>
</template>

<script>
/* api*/
import { listInvitationSupplierRoster, queryInvitationSupplierList } from '@/api/bidding/bidInvitation'
import invitationSupplierListDialog from './invitationSupplierList-dialog'
import packageSelectedSuppliersListDialog from './packageSelectedSuppliersList-dialog'
export default {
  name: 'InvitationSupplierInfoAdd',
  components: {
    invitationSupplierListDialog,
    packageSelectedSuppliersListDialog
  },
  props: {
    // 驱动数据
    packageListInfo: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      invitationType: this.$store.getters.tenderBase.invitationType, // 邀请函类型
      // 标段列表
      packageList: [],
      tenderId: this.$route.query.id, // 项目Id
      invitationId: this.$route.query.invitationId, // 邀请函Id
      confirmLoading: false, // 暂存、下一步Loding
      // 挑选供应商弹框
      dialogData: {
        supplierId: [], // 供应商Id去重列表
        packIndex: '', // 标段索引,
        supplierSelectVisible: false// 弹框展示状态
      },
      // 查看标段已选供应商
      selectSupplierListData: {
        isShowRemoveBtn: true, // 是否显示移除按钮
        dialog: false, // // 弹框展示状态
        packIndex: '', // 标段索引,
        suppliersList: []// 物料列表
      },
      supplierSize: [] // 已选数据
    }
  },
  watch: {
    // 监听变化
    'packageListInfo': {
      handler(val) {
        this.packageList = val
        if (val.length > 0) {
          const len = this.packageList.length
          for (let i = 0; i < len; i++) {
            this.getInvitationSupplierList(i)
          }
        } else {
          // 加载数据
          this.loadData()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // 加载数据
    // this.loadData()
    // if (this.packageList.length > 0) {
    //   const len = this.packageList.length
    //   for (let i = 0; i < len; i++) {
    //     this.getInvitationSupplierList(i)
    //   }
    // } else {
    //   // 加载数据
    //   this.loadData()
    // }
  },
  methods: {
    // 邀请函已制作的标段（包）
    loadData() {
      listInvitationSupplierRoster(this.invitationId).then(res => {
        this.packageList = res.data// 标段列表数据
        const len = this.packageList.length
        for (let i = 0; i < len; i++) {
          this.getInvitationSupplierList(i)
        }
      })
    },
    // 获取已选择投标人信息列表
    getInvitationSupplierList(index) {
      this.supplierSize = []
      const data = {
        invitationId: this.invitationId,
        stageId: this.packageList[index].stageId
      }
      if (this.invitationId) {
        queryInvitationSupplierList(data).then(res => {
          this.packageList[index].suppliersList = res.data || [] // 标段对应供应商列表
          // 计算标段已选供应商数supplierSize
          this.packageList[index].supplierSize = res.data.length
        }).catch(() => {

        })
      }
      this.packageList.map((v) => {
        this.supplierSize.push(v.supplierSize)
      })
      this.$emit('invitedSupplierTableData', this.packageList)
    },
    /* ---------------------------查看已挑选供应商-弹框 Start------------------------------*/
    // 查看已挑选供应商
    selectedSuppliers(row, index) {
      this.selectSupplierListData.packIndex = index
      this.selectSupplierListData.isShowRemoveBtn = true
      this.selectSupplierListData.dialog = true// 查看状态
      this.selectSupplierListData.suppliersList = this.packageList[index].suppliersList
    },
    /* ---------------------------查看已挑选供应商-弹框 End------------------------------*/
    /* ---------------------------挑选供应商-弹框 Start------------------------------*/
    // 邀请供应商
    inviteSuppliers(row, packIndex) {
      // 取出供应商id去重
      const supplierId = []
      if (!this.packageList[packIndex].suppliersList) {
        this.$set(this.packageList[packIndex], 'suppliersList', [])
      }
      this.packageList[packIndex].suppliersList.map(item => {
        supplierId.push(item.supplierId)
      })
      this.dialogData = {
        supplierId: supplierId, // 供应商Id
        packIndex: packIndex, // 标段索引
        supplierSelectVisible: true// 弹框展示状态
      }
    },
    // 带回已选择的供应商 supplierList 选择的供应商
    supplierSelect(supplierList, packIndex, status) {
      this.supplierSize = []
      if (status === '01') { // 添加供应商
        supplierList.map((item) => {
          item.packId = this.packageList[packIndex].packId
          item.stageId = this.packageList[packIndex].stageId
          item.tenderId = this.tenderId
        })
        // this.$set(this.packageList[packIndex], 'suppliersList', [...this.packageList[packIndex].suppliersList, ...supplierList])
        this.packageList[packIndex].suppliersList = [...this.packageList[packIndex].suppliersList, ...supplierList]
      } else { // 移除
        // this.$set(this.packageList[packIndex], 'suppliersList', [...supplierList])
        this.packageList[packIndex].suppliersList = [...supplierList]
      }
      // 计算标段已选供应商数supplierSize
      // this.$set(this.packageList[packIndex], 'supplierSize', this.packageList[packIndex].suppliersList.length)
      this.packageList[packIndex].supplierSize = this.packageList[packIndex].suppliersList.length
      this.packageList.map((v) => {
        this.supplierSize.push(v.supplierSize)
      })
      // this.supplierSize = this.packageList[packIndex].suppliersList.length
      this.$emit('invitedSupplierTableData', this.packageList)
    }
  }
}
</script>

<style scoped lang="less">

</style>
