<!--
  @description: 项目管理-监标人设置-选择监标人组件
  @Modifier: 张慢慢
  @routerPath:
  @date: 2021/8/9
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.visible"
    :lock-scroll="false"
    title="选择监标人"
    width="1000px"
    class="el-dialog__body-p0"
  >
    <div style="padding-bottom:10px">
      <section class="p0-16">
        <!--查询条件-->
        <div class="crud_menu_title clearfix">
          <span class="icon-line fl">查询条件</span>
        </div>
        <section class="clearfix SearchContent">
          <div class="SearchContent_leftInput fl">
            <el-form
              ref="searchForm"
              :model="searchForm"
              label-width="98px"
              label-position="left"
              inline
            >
              <!--姓名-->
              <el-form-item
                ref="realName"
                label="姓名"
                prop="realName"
                class="el-form-item--two"
              >
                <el-input
                  v-model.trim="searchForm.realName"
                  placeholder="姓名"
                  style="width:15vw"
                  @keyup.enter.native="onSearch"
                />
              </el-form-item>
              <!--联系方式-->
              <el-form-item
                ref="mobilePhone"
                label="联系方式"
                prop="mobilePhone"
                class="el-form-item--two"
              >
                <el-input
                  v-model.trim="searchForm.mobilePhone"
                  placeholder="联系方式"
                  style="width:15vw"
                  @keyup.enter.native="onSearch"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="fr">
            <el-button type="primary" @click="onSearch">
              搜 索
            </el-button>
            <el-button plain type="info" @click="resetForm('searchForm')">
              重 置
            </el-button>
          </div>
        </section>
        <!--查询结果-->
        <div class="crud_menu_title">
          <span class="icon-line">查询结果</span>
        </div>
        <div class="table_border_wrap">
          <el-table
            ref="singleTable"
            v-loading="loading"
            :data="list"
            stripe
            class="pointer"
            size="mini"
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
            />
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column label="姓名" prop="realName" />
            <!-- <el-table-column label="所属单位" prop="departName" align="center" /> -->
            <el-table-column label="联系方式" prop="mobilePhone" align="center" width="200" />
          </el-table>
          <!--分页组件-->
          <pagination :pagination-data="paginationData" @change="initData" />
        </div>
      </section>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="okdialog('formData')">确认</el-button>
      <el-button @click="close">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  setBidSupervisor // 设置监标人
} from '@api/bidding/biddingProject'
/* 接口*/
import {
  selectUserInfoListByRoleCodes // 监标人列表
} from '@/api/procurement/commonUser'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
/* 公用方法*/
import { filterObj, restoreInitialValue } from '@/assets/js/utils'// 常用方法
export default {
  name: 'InspectPeopleDislog',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      groupId: this.$store.getters.groupId, // 项目信息
      searchForm: {
        realName: '', // 姓名
        mobilePhone: '', // 联系方式
        roleCodes: 'supervisor' // 角色编码
      },
      // 弹框参数
      dialogData: {
        visible: false
      },
      list: [],
      loading: false,
      selectData: [], // 已选数据
      seletunPackList: [] // 已勾选标段
    }
  },
  methods: {
    open(data) {
      this.seletunPackList = data // 已勾选标段
      this.dialogData.visible = true // 打开弹框
      this.initData()
    },
    // 获取数据
    initData() {
      this.loading = true
      const params = this.getQueryParams() // 查询条件
      selectUserInfoListByRoleCodes(params).then((res) => {
        this.loading = false
        this.list = res.data.records
        this.paginationData.total = res.data.total
      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.initData() // 查询数据
    },
    // 重置
    resetForm() {
      // 清空数据
      this.createTime = []
      restoreInitialValue(this.searchForm)
      this.onSearch() // 查询数据
    },
    // 选中数据
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 确认按钮
    okdialog() {
      if (this.selectData.length > 0) {
        const params = {
          bidSupervisorList: [], // 已选择人员
          stageIdList: [] // 已勾选标段
        }
        // 设置已选择监标人
        this.selectData.forEach((v) => {
          params.bidSupervisorList.push({
            supervisorName: v.realName, // 用户名称
            supervisorId: v.userId, // 用户id
            mobilePhone: v.mobilePhone // 手机号
          })
        })
        // 获取已勾选标段的标段id
        this.seletunPackList.forEach((v) => {
          params.stageIdList.push(v.stageId)
        })
        // 设置监标人接口
        setBidSupervisor(params).then((res) => {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          // 设置成功向父组件传递状态
          this.$emit('inspectPeopleInfo', true)
          this.close()
        })
      } else {
        this.$message({
          message: '请选择监标人',
          type: 'warning'
        })
      }
    },
    // 取消按钮
    close() {
      this.dialogData.visible = false
    }
  }
}
</script>
