<!--
  @description: 邀请函列表选择邀请人弹框-可邀请人列表
  @Modifier: haoFx
  @routerPath:
  @date: 2020/1/19-10:38
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogData.supplierSelectVisible"
      :close-on-click-modal="false"
      title="选择供应商"
      width="840px"
      custom-class="el-dialog__body-p8 el-dialog_table"
    >
      <!--搜索-->
      <section class="clearfix">
        <el-form ref="searchForm" :model="searchForm" inline @submit.native.prevent>
          <el-form-item label="供应商名称" prop="departName">
            <el-input
              v-model="searchForm.departName"
              placeholder="供应商名称"
              @keyup.enter.native="onSearch"
            />
          </el-form-item>
          <el-form-item class="fr">
            <el-button
              type="primary"
              @click="onSearch('searchForm')"
            >
              搜 索
            </el-button>
            <el-button
              plain
              type="info"
              @click="resetForm('searchForm')"
            >
              重 置
            </el-button>
          </el-form-item>
        </el-form>
      </section>
      <!--查询列表-->
      <section>
        <el-table
          ref="multipleTable"
          :data="supplierList"
          :row-key="getRowKeys"
          size="mini"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :reserve-selection="true"
            type="selection"
          />
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          />
          <el-table-column
            prop="departName"
            label="供应商名称"
          />
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClick">
          确 定
        </el-button>
        <el-button @click="cancelClick">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* 接口*/
import { listCanInvitedSupplierPages } from '@/api/bidding/bidInvitation'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 公用方法*/
import { filterObj, cloneObject } from '@/assets/js/utils'// 常用方法
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
export default {
  name: 'InvitationSupplierListDialog',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin],
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          supplierId: [], // 供应商Id去重列表
          packIndex: '', // 标段索引
          supplierSelectVisible: false// 弹框展示状态
        }
      }
    }
  },
  data() {
    return {
      groupId: this.$store.getters.groupId, // 包id 阶段id
      // 获取row的key值
      getRowKeys(row) {
        return row.id
      },
      searchForm: {
        ids: [], // 去重供应商Id
        departName: '' // 供应商名称
      },
      selectSupplierListData: [], // 已选供应商列表
      supplierList: [] // 供应商列表
    }
  },
  watch: {
    'dialogData.supplierSelectVisible'(val) {
      if (val) {
        this.supplierList = [] // 物料列表
        // 初始化-分页
        this.paginationData.pageNo = 1
        this.paginationData.pageSize = 10
        this.loadData()
      }
    }
  },
  methods: {
    // 获取数据
    loadData() {
      this.searchForm.ids = this.dialogData.supplierId// 去重供应商Id
      const params = this.getQueryParams()// 查询条件
      listCanInvitedSupplierPages(params).then(response => {
        this.paginationData.total = response.data.total
        this.supplierList = response.data.records
      }).catch(() => {

      })
    },
    // 查询条件
    getQueryParams() {
      this.searchForm.packId = this.groupId.packId
      this.searchForm.departRoleName = '12' // 10投标人 11代理机构 12邀请投标人
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 选择供应商
    handleSelectionChange(val) {
      /* 转换为要存储字段*/
      val.map((item) => {
        item.supplierId = item.id
        item.supplierName = item.departName
        item.linkName = item.linkerName
        item.linkTel = item.mobilePhone
      })
      this.selectSupplierListData = val
    },
    // 判断是否选择投标人
    submitClick() {
      if (this.selectSupplierListData.length > 0) {
        const data = cloneObject(this.selectSupplierListData)// 深层拷贝
        /* 删除不必存储字段*/
        data.map((item) => {
          delete item.id
          delete item.departName
          delete item.linkerName
          delete item.mobilePhone
        })
        // 返回已选中的供应商列表
        this.$emit('supplierSelect', data, this.dialogData.packIndex, '01')
        this.$refs.multipleTable.clearSelection()// 清空已选的数据
        this.selectSupplierListData = []// 制空
        this.dialogData.supplierSelectVisible = false
      } else {
        this.$message({
          message: '请选择投标人',
          type: 'warning'
        })
      }
    },
    // 取消邀请
    cancelClick() {
      this.dialogData.supplierSelectVisible = false // 关闭弹框
      this.selectSupplierListData = [] // 已选供应商列表
      this.$refs.multipleTable.clearSelection()
    },
    // 搜索重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs[formName].resetFields()
      this.loadData()
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()
    }
  }
}
</script>

<style lang="less" scoped>

</style>

