<!--
  @description: 邀请人名单-（分包）选择投标人
  @Modifier: haoFx
  @routerPath: /bidding/projectDrive/invitation/tabs/packageInvitationSupplierInfo-add
  @date: 2020/1/19-10:11
-->
<template>
  <div>
    <!--标段列表-->
    <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)"
            >
              [已选供应商]（{{ scope.row.supplierSize }}）
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button @click="prevStep">
          上一步
        </el-button>
        <el-button :loading="confirmLoading" type="primary" @click="nextStep()">
          暂存，进入下一步
        </el-button>
      </div>
    </div>
    <!--选择招标人弹框-->
    <invitationSupplierListDialog
      :dialog-data="dialogData"
      @supplierSelect="supplierSelect"
    />
    <!--（分包）已挑选招标人弹框-->
    <packageSelectedSuppliersListDialog
      :dialog-data="selectSupplierListData"
      @supplierSelect="supplierSelect"
    />
  </div>
</template>

<script>
/* api*/
import { listInvitationSupplierRoster, invitationSupplierSave, queryInvitationSupplierList } from '@/api/bidding/bidInvitation'
import invitationSupplierListDialog from './invitationSupplierList-dialog'
import packageSelectedSuppliersListDialog from './packageSelectedSuppliersList-dialog'
export default {
  name: 'InvitationSupplierInfoAdd',
  components: {
    invitationSupplierListDialog,
    packageSelectedSuppliersListDialog
  },
  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: []// 物料列表
      }
    }
  },
  created() {
    // 加载数据
    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) {
      const data = {
        invitationId: this.invitationId,
        stageId: this.packageList[index].stageId
      }
      queryInvitationSupplierList(data).then(res => {
        this.packageList[index].suppliersList = res.data // 标段对应供应商列表
        // 计算标段已选供应商数supplierSize
        this.packageList[index].supplierSize = res.data.length
      }).catch(() => {

      })
    },
    /* ---------------------------查看已挑选供应商-弹框 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 = []
      this.packageList[packIndex].suppliersList.map(item => {
        supplierId.push(item.supplierId)
      })
      this.dialogData = {
        supplierId: supplierId, // 供应商Id
        packIndex: packIndex, // 标段索引
        supplierSelectVisible: true// 弹框展示状态
      }
    },
    // 带回已选择的供应商 supplierList 选择的供应商
    supplierSelect(supplierList, packIndex, status) {
      if (status === '01') { // 添加供应商
        supplierList.map((item) => {
          item.packId = this.packageList[packIndex].packId
          item.stageId = this.packageList[packIndex].stageId
          item.tenderId = this.tenderId
        })
        this.packageList[packIndex].suppliersList = [...this.packageList[packIndex].suppliersList, ...supplierList]
      } else { // 移除
        this.packageList[packIndex].suppliersList = supplierList
      }
      // 计算标段已选供应商数supplierSize
      this.packageList[packIndex].supplierSize = this.packageList[packIndex].suppliersList.length
    },
    /* ---------------------------挑选供应商-弹框 End------------------------------*/
    // 上一步
    prevStep() {
      // router携带参数
      const pathData = {
        ...this.$route.query
      }
      this.$emit('stepPage', 'prev', pathData)// 步骤条切换方法 prev 上一步
    },
    // 保存数据组装
    packageData() {
      /* 处理保存供应商信息参数*/
      const len = this.packageList.length
      const invitedTableData = [] // 已选供应商列表
      for (let i = 0; i < len; i++) {
        invitedTableData.push(...this.packageList[i].suppliersList)
      }
      /* 最终保存参数*/
      const data = {
        invitationId: this.invitationId,
        invitationSupplierInfoDtos: invitedTableData
      }
      return data
    },
    // 下一步
    nextStep() {
      let flagSupplierSize = true
      let recordPackName = ''
      this.packageList.forEach((v) => {
        if (v.supplierSize < 3) {
          recordPackName = v.packName
          flagSupplierSize = false
        }
      })
      if (!flagSupplierSize) {
        return this.$elAlert('【' + recordPackName + '】已选供应商不能少于3家', 'warning')
      }
      const data = this.packageData()// 保存数据组装
      invitationSupplierSave(data).then(() => {
        // route携带参数
        const pathData = {
          ...this.$route.query
        }
        this.$emit('stepPage', 'next', pathData)// 步骤条切换方法 next 下一步
        this.confirmLoading = false// btnLoding
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
