<!--
  @description: 添加专家-弹窗
  @Modifier: qrf
  @routerPath:
  @date: 2020/10/20-15:27
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="addExpertVisible.dialog"
    :close-on-click-modal="false"
    title="录入专家"
    class="relevance_f"
  >
    <el-form ref="expertSearch" :model="expertSearch" inline>
      <el-form-item label="专家姓名">
        <el-input v-model="expertSearch.expertName" />
      </el-form-item>
      <el-form-item label="专家身份证号">
        <el-input v-model="expertSearch.certificateCode" />
      </el-form-item>
      <div class="fr">
        <el-button @click="getExpertList">
          查询
        </el-button>
        <el-button @click="resetFn">
          重置
        </el-button>
      </div>
    </el-form>
    <el-table :data="expertData" @selection-change="handleSelectionChangeExpert">
      <el-table-column type="selection" />
      <el-table-column label="序号" type="index" />
      <el-table-column label="专家姓名" prop="realName" />
      <el-table-column label="专家身份证号" prop="certificateCode" />
      <el-table-column label="专业" prop="specialName">
        <template slot-scope="{row}">
          {{ row.specialName ? row.specialName :"暂无数据" }}
        </template>
      </el-table-column>
      <el-table-column label="区域" prop="area">
        <template slot-scope="{row}">
          {{ row.area ? row.area :"暂无数据" }}
        </template>
      </el-table-column>
      <el-table-column label="联系方式" prop="mobile" />
    </el-table>
    <el-row class="pagination p16">
      <div
        class="page-number fl"
      >
        共{{ Math.ceil(expertTotal/expertSearch.pageSize) }}页 {{ expertTotal }}条
      </div>
      <el-pagination
        :current-page="expertSearch.page"
        :page-size="expertSearch.pageSize"
        :total="expertTotal"
        layout="prev, pager, next, sizes"
        class="fr"
        background
        @current-change="pickHandleEx"
        @size-change="handleSizeProjectChangeEx"
      />
    </el-row>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="addDirect">
        确 定
      </el-button>
      <el-button @click="addExpertVisible = false">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
/* 公用方法*/
import { getExpertList } from '@/api/expert/expertscloud'
export default {
  name: 'AddExpertDialog',
  data() {
    return {
      addExpertVisible: {
        dialog: false
      },
      expertSearch: { // 专家查询
        expertName: '',
        certificateCode: '',
        expertIds: [],
        page: 1,
        pageSize: 10
      },
      entryExpertList: [], // 直接指定录入专家列表
      addExpertList: [], // 添加专家变量
      expertData: [],
      checkedExpert: [],
      expertTotal: 0 // 专家条数
    }
  },
  methods: {
    openDialog() {
      this.addExpertVisible.dialog = true
      this.expertSearch.expertName = ''
      this.expertSearch.certificateCode = ''
      this.expertSearch.pageNo = 1
      this.expertSearch.pageSize = 10
      this.getExpertList()
    },
    getExpertList() {
      getExpertList(this.expertSearch).then(res => {
        this.expertData = res.data.records
        this.expertTotal = res.data.total * 1
      }).catch(() => {
      })
    },
    resetFn() {
      this.expertSearch.expertName = ''
      this.expertSearch.certificateCode = ''
      this.expertSearch.page = 1
      this.expertSearch.pageSize = 10
      this.getExpertList()
    },
    handleSelectionChangeExpert(val) {
      val.forEach(val => {
        val.expertName = val.realName
        val.expertId = val.id
      })
      this.checkedExpert = val
      this.addExpertList = this.addExpertList.concat(this.checkedExpert)
    },
    // 分页
    pickHandleEx(val) {
      this.expertSearch.pageNo = val
      this.expertSearch.pageSize = 10
      this.getExpertList()
    },
    // 分页
    handleSizeProjectChangeEx(val) {
      this.expertSearch.pageNo = 1
      this.expertSearch.pageSize = val
      this.getExpertList()
    },
    addDirect() {
      const arr = []
      this.checkedExpert.forEach(val => {
        arr.push(val.expertId)
      })
      this.addExpertVisible = false
      const obj = {}
      this.addExpertList = this.addExpertList.reduce(function(item, next) {
        obj[next.expertId] ? '' : obj[next.expertId] = true && item.push(next)
        return item
      }, [])
      this.entryExpertList = JSON.parse(JSON.stringify(this.addExpertList))
    }
  }
}
</script>
