<template>
  <popup-right
    v-if="showPopup"
    @cancel="hundlePopupHide"
    @submit="handleSubmitPopup"
    :title="title"
    class="popup"
  >
    <div slot="content">
      <div class="line-space ">
        <div class="line-space ">
          <el-input
            v-model="rqAssessmentParameter.searchName"
            @change="handlePopupSearchChange"
            prefix-icon="el-icon-search"
            placeholder="按姓名搜索"
            size="small"
          ></el-input>
        </div>
        <div>
          <el-button
            @click="handleChooseDepartment"
            size="small"
          >选择部门<i class="el-icon-arrow-down"></i></el-button>
          <el-button
            @click="handleChooseGroup"
            size="small"
          >选择考评组<i class="el-icon-arrow-down"></i></el-button>
        </div>

      </div>
      <div class="popup-table">
        <el-table
          v-if="popupData.tableList.length"
          ref="popupMultipleTable"
          :data="popupData.tableList"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          :row-key="handleGetRowKeys"
        >
          <el-table-column
            type="selection"
            width="40"
            :reserve-selection="true"
          ></el-table-column>
          <el-table-column
            label="姓名"
            width="250"
          ><template slot-scope="scope"><img
                src="xx"
                class="popup-table-img"
              />{{scope.row.name}}</template></el-table-column>
        </el-table>
        <div
          v-else
          class="popup-empty comonPromptFont"
        >
          <img
            src=""
            style="height: 150px; width: 150px;"
          />
          <div>暂无数据</div>
        </div>
      </div>
      <el-pagination
        :hide-on-single-page="true"
        :current-page.sync="rqAssessmentParameter.currPage"
        :page-size="rqAssessmentParameter.pageSize"
        :total="rqAssessmentParameter.totalCount"
        :page-count="rqAssessmentParameter.totalPage"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <div
      slot="footer-left"
      class="popup-footer-left"
    >已选择：{{popupData.selectedList.length}}个</div>
  </popup-right>
</template>

<script>
import PopupRight from '@/components/PopupRight'
export default {
  props: {
    title: {
      type: String,
      default: '请选择开始评分的考评组'
    },
    showPopup: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      popupData: {
        tableList: [],
        selectedList: []
      },
      rqAssessmentParameter: {
        currPage: 1,
        pageSize: 100,
        searchName: '',
        totalCount: 1,
        totalPage: 1
      }
    }
  },
  components: {
    PopupRight
  },
  computed: {},
  beforeMount () { },
  mounted () { },
  methods: {
    handlePopupSearchChange (val) {
      // 去搜搜
      this.handleGainAssessmentGroupList()
    },
    handleChooseDepartment () {

    },
    handleChooseGroup () {

    },
    handleSelectionChange (val) {
      //  选择发生变化
      this.popupData.selectedList = val
    },
    handleEmpty () {
      this.showChooseList = false
      // 新建考评组
      // this.$router.push({ name: 'workbench-edit-group' })
    },
    handleSubmitPopup () {
      const list = this.popupData.selectedList
    },
    hundlePopupHide () {
      this.$emit('update:showPopup', false)
    },
    handleCurrentChange (val) {
      this.handleGainAssessmentGroupList(val)
    },
    // 获取数据
    handleGainAssessmentGroupList (currPage) {
    }

  },
  watch: {}

}

</script>

<style lang='less' scoped>
.popup {
  .line-space {
    margin-bottom: 20px;
  }
  &-table {
    &-img {
      width: 34px;
      height: 34px;
      border-radius: 17px;
    }
  }
  &-empty {
    padding-top: 100px;
    height: 500px;
    width: 440px;
    font-size: 14px;
    text-align: center;
    display: block;
    align-content: center;
    justify-content: center;
  }

  &-footer-left {
    color: @fontBlue;
  }
}
</style>
