<template>
  <div>
    <popup-right
      v-if="showPopup"
      @cancel="hundlePopupHide"
      @submit="handleSubmitPopup"
      :title="title"
      class="popup"
    >
      <div slot="content">
        <div class="line-space  commonFont">
          <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"
            ><div class="popup-btn"><span class="popup-btn-left-title">{{deptFilterData.deptNames}}</span><i class="el-icon-arrow-down"></i></div></el-button>
            <el-button
              @click="handleChooseGroup"
              size="small"
            ><div class="popup-btn"><span class="popup-btn-left-title">{{groupFilterData.groupNames}}</span><i class="el-icon-arrow-down"></i></div></el-button>
          </div>
          <div
            v-if="groupFilterData.selectedList.length>0|| deptFilterData.showDataList.list.length>0"
            class="popup-tags "
          >
            <span>筛选条件:</span>
            <el-tag
              v-for="(item, index) in deptFilterData.showDataList.list"
              :key="index+'dept'"
              @close="handleTagDeptClose(item,index)"
              closable
            >{{ item.departmentName }}
            </el-tag>
            <el-tag
              v-for="(item, index) in groupFilterData.selectedList"
              :key="index+'group'"
              effect="plain"
              type="warning"
              @close="handleTagGroupClose(item,index)"
              closable
            >{{ item.name }}
            </el-tag>
            <span>共筛选出<span class="comonBlue">{{deptFilterData.sumPerson + groupFilterData.sumPerson}}</span>人</span>
          </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="40px"
              :reserve-selection="true"
            ></el-table-column>
            <el-table-column
              label="姓名"
              width="55px"
            ><template slot-scope="scope">
                <img
                  :src="scope.row.avatar"
                  class="popup-table-img"
                />
              </template></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                {{scope.row.staffName}}
              </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>

    <EvaluationTeamFilter
      v-if="visibleGroupFilter"
      :value='groupFilterData.evaluationIds'
      :filtersDic="{startId: this.startId }"
      :dialogVisible.sync='visibleGroupFilter'
      @submitClick='handleTeamSubmit'
      @close='visibleGroupFilter = false'
    />

    <dialog-depart
      v-if="visibleDeptFilter"
      :isShow.sync='visibleDeptFilter'
      :showDataList.sync='deptFilterData.showDataList'
      @cb="handleDeptSubmit"
    />
    <el-dialog title="删除确认" :visible.sync="visibleRemovePerson" width="440px">
      <div class="commonFont line-space">确认将选中的{{popupData.selectedList.length}}人，从考核中删除，删除后，绩效考核数据将被清空，数据无法恢复，请确认是否删除</div>
      <div class="commonFont line-space">请在下方输入框中输入<span style="color: red;">“删除”</span>二字，确认您已知晓删除将导致数据无法恢复</div>
      <div><el-input v-model="removeConfirmInput" placeholder="请输入“删除二字”" size="small"></el-input></div>
      <div slot="footer">
        <el-button @click="visibleRemovePerson = false" size="small">取 消</el-button>
        <el-button  @click="handleConfirmRemovePerson" type="primary"  size="small" :disabled="removeConfirmInput!=='删除'">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import PopupRight from '@/components/PopupRight'
import EvaluationTeamFilter from '@/components/EvaluationTeamFilter'
import dialogDepart from '@/components/getDepart'

import { apiManagerDetail } from '@/api/assessment'

export default {
  props: {
    title: {
      type: String,
      default: '请选择开始评分的考评组'
    },
    showPopup: {
      type: Boolean,
      default: false
    },
    startId: null

  },
  data () {
    return {
      visibleRemovePerson: false, // 显示删除人员提示
      removeConfirmInput: '', // 删除确认文案
      visibleGroupFilter: false, // 考评组筛选
      groupFilterData: {
        groupNames: '选择考评组',
        evaluationIds: '', // 选中值group
        selectedList: [], //  选中考评组
        sumPerson: 0 // 考评组  总人数
      },
      visibleDeptFilter: false, // 部门组筛选
      deptFilterData: {
        staffIds: '', // 人员id
        deptNames: '选择部门',
        showDataList: {
          list: [],
          title: '',
          value: '' // 选中值部门ids
        }, //  选中考评组
        sumPerson: 0 // 考评部门  总人数
      },
      popupData: {
        tableList: [],
        selectedList: []
      },
      rqAssessmentParameter: {
        currPage: 1,
        pageSize: 100,
        searchName: '',
        totalCount: 1,
        totalPage: 1,
        evaluationIds: '', // 考勤组ids
        staffIds: '', // 部门 id串
        startId: ''// 考核id
      }
    }
  },
  components: {
    PopupRight,
    dialogDepart,
    EvaluationTeamFilter
  },
  computed: {},
  beforeMount () { },
  mounted () { },
  methods: {
    handleGetRowKeys (row) {
      return row.id
    },
    handlePopupSearchChange (val) {
      // 去搜搜
      this.handleGainAssessmentGroupList()
    },
    handleChooseDepartment () {
      this.visibleDeptFilter = true
    },
    handleChooseGroup () {
      this.visibleGroupFilter = true
    },
    handleSelectionChange (val) {
      //  选择发生变化
      this.popupData.selectedList = val
    },
    handleSubmitPopup () {
      // 确定选择
      this.visibleRemovePerson = true
      // const list = this.popupData.selectedList
      // this.$emit('update:showPopup', false)
    },
    handleConfirmRemovePerson () {
      // 确认删除  选中用户 删除成功页面刷新
      console.log('删除')
      this.visibleRemovePerson = false
      this.$emit('update:showPopup', false)
      this.$emit('cb')
    },
    hundlePopupHide () {
      this.$emit('update:showPopup', false)
    },
    handleCurrentChange () {
      this.handleGainAssessmentGroupList()
    },
    // 获取数据
    handleGainAssessmentGroupList () {
      this.rqAssessmentParameter.startId = this.startId
      apiManagerDetail(this.rqAssessmentParameter).then(res => {
        if (res.code !== 200) {
          return
        }
        this.rqAssessmentParameter.totalPage = res.data.totalPage
        this.rqAssessmentParameter.totalCount = res.data.totalCount
        this.rqAssessmentParameter.currPage = res.data.currPage
        this.popupData.tableList = res.data.list
        console.log('获取数据成功')
      })
    },
    // 部门筛选
    handleDeptSubmit (val) {
      this.deptFilterData.showDataList = val
      console.log('部门筛选--====-==-==  ', val)
      let deptNames = []
      this.deptFilterData.showDataList.list.forEach(item => {
        deptNames.push(item.departmentName)
      })
      this.deptFilterData.deptNames = deptNames.join()
      // 递归方法 生成 json tree 数据
      this.handleGainDeptData()
      this.visibleDeptFilter = false
    },
    handleGainDeptData () {
      //  获取真实数据 重新选择   删除标签
      let dicIds = {}
      this.handleGainDeptPerson(dicIds, this.deptFilterData.showDataList.list)
      let arrPersonId = Object.keys(dicIds)
      this.deptFilterData.sumPerson = arrPersonId.length
      this.deptFilterData.staffIds = arrPersonId.join()
      //  重新获取数据
      this.rqAssessmentParameter.staffIds = this.deptFilterData.staffIds
      this.handleGainAssessmentGroupList()
      console.log('部门筛选--====-==-==  ', this.deptFilterData)
    },
    handleGainDeptPerson (dicArr, list) {
      for (let index = 0; index < list.length; index++) {
        const dept = list[index]
        for (let index = 0; index < dept.staffDtos.length; index++) {
          const person = dept.staffDtos[index]
          dicArr[person.staffId.toString()] = 1
        }
        if (dept.list instanceof Array) {
          if (dept.list.length > 0) {
            this.handleGainDeptPerson(dicArr, dept.list)
          }
        }
      }
    },
    handleTagDeptClose (item, index) {
      this.deptFilterData.showDataList.list.splice(index, 1)
      this.handleGainDeptData()
      let newTitle = '选择部门'
      let newVal = ''
      if (this.deptFilterData.showDataList.list.length > 0) {
        let titles = this.deptFilterData.deptNames.split(',')
        let vals = this.deptFilterData.showDataList.value.split(',')
        titles.splice(titles.indexOf(item.departmentName), 1)
        vals.splice(vals.indexOf(item.departmentId), 1)
        newTitle = titles.join()
        newVal = vals.join()
      }
      this.deptFilterData.deptNames = newTitle
      this.deptFilterData.showDataList.value = newVal
    },
    //  考评组筛选
    handleTeamSubmit (val) {
      let groupNames = []
      val.selectedList.forEach((item) => {
        groupNames.push(item.name)
      })
      this.groupFilterData.groupNames = groupNames.join()
      this.visibleGroupFilter = false
      this.groupFilterData.selectedList = val.selectedList
      this.groupFilterData.sumPerson = val.sumCounts
      this.groupFilterData.evaluationIds = val.value
      this.rqAssessmentParameter.evaluationIds = val.value
      // 重新获取
      this.handleGainAssessmentGroupList()
    },
    handleTagGroupClose (item, index) {
      this.groupFilterData.sumPerson -= item.counts
      this.groupFilterData.selectedList.splice(index, 1)
      let groupIds = ''
      let groupNameStr = '选择考评组'
      if (this.groupFilterData.selectedList.length > 0) {
        let arrS = []
        let groupNames = []
        this.groupFilterData.selectedList.forEach((item) => {
          arrS.push(item.id)
          groupNames.push(item.name)
        })
        groupIds = arrS.join()
        groupNameStr = groupNames.join()
      }
      this.groupFilterData.evaluationIds = groupIds
      this.groupFilterData.groupNames = groupNameStr

      // 重新获取
      this.rqAssessmentParameter.evaluationIds = groupIds
      this.handleGainAssessmentGroupList()
    }
  },
  watch: {
    'showPopup': function (newVal, oldVal) {
      if (newVal) {
        this.handleGainAssessmentGroupList()
        console.log('显示人员选择---------')
      } else {
        this.rqAssessmentParameter.startId = null
        this.rqAssessmentParameter.staffIds = ''
        this.rqAssessmentParameter.evaluationIds = ''
        this.rqAssessmentParameter.searchName = ''
        this.rqAssessmentParameter.currPage = 1
        this.rqAssessmentParameter.totalCount = 1
        this.rqAssessmentParameter.totalPage = 1
        this.staffIds = ''
        this.popupData.tableList = []
        this.popupData.selectedList = []
      }
    }
  }

}

</script>

<style lang='less' scoped>
  .line-space {
    margin-bottom: 20px;
  }

.popup {
   max-width: 440px;
  .el-button {
    max-width: 104px;
    width: 104px;
  }
  &-btn{
    display: flex;
     &-left-title {
      width: 74px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .el-tag{
    margin-right: 10px;
    margin-top: 10px;
  }
  &-tags {
    width: 440px;
    word-break: break-all;
  }
  &-table {
    width: 440px;
    .el-table {
      width: 100%;
    }
    &-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>
