<template>
  <el-dialog
    :title="title"
    :visible.sync="visible_"
    :close-on-click-modal="false"
    :before-close="close_before"
    append-to-body
    @open="openDialog"
    width="720px"
    class="selectAG"
  >
    <el-container>
      <el-aside style="width:438px;">
        <div class="flex-box flex-d-center asideHead">
          <span v-for="(item,index) in activeList" :key="index" :class="{'active':item.value == asidetableparams.cycle_type}" @click="cliasideHead(item.value)">{{item.label}}</span>
        </div>
        <div style="padding: 15px 5px 15px 0;">
          <JxSearch :screen="1" title="请输入关键字搜索" @confirm="groupSearch"></JxSearch>
        </div>
        <el-table
			stripe
          ref="asideTabData"
          max-height="350"
          :data="asidetableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="asideSChange"
          v-loading="asideTabLoad"
          @cell-click="asideSClick"
          class="asideTable"
        >
          <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
          <el-table-column label="全选">
            <template slot-scope="scope">
              <div class="flex-box flex-d-center asidetabDie">
                <span>{{scope.row.name}}</span>
                <span>
                  <span>{{
                    scope.row.cycle_type == 1?'天':
                    scope.row.cycle_type == 2?'月度':
                    scope.row.cycle_type == 3?'季度':
                    scope.row.cycle_type == 4?'半年度':
                    scope.row.cycle_type == 5?'年度':
                    scope.row.cycle_type == 6?'自定义':''
                  }}</span>
                  <span>{{scope.row.employee_num}}人</span>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-aside>

      <el-main>
        <div class="mainHead flex-box flex-d-center" v-if="asideSChangeData.length>0">
          <span>已选择{{asideSChangeData.length}}个</span>
          <span @click="mainEmpty">清空</span>
        </div>
        <div class="mainTag">
          <el-tag
            v-for="(item,index) in asideSChangeData"
            :key="index"
            closable
            :disable-transitions="true"
            @close="mainTagClose(item,index)">
            {{item.name}}
          </el-tag>
        </div>
      </el-main>
    </el-container>
    <el-footer class="flex-box flex-box-end">
      <el-button round @click="dialogno">取消</el-button>
      <el-button type="primary" round @click="dialogok" >确定</el-button>
    </el-footer>
  </el-dialog>
</template>

<script>
import JxSearch from '@/components/public/JxSearch'
export default {
  props:{
    title:{//头部title
      type: String,
      default: '考核表筛选'
    },
    visible:{//弹窗开关
      type: Boolean,
      default: false,
    },
    selectedAG:{
      type: [Array,Object],
      default:[],
    }

  },
  data() {
    return {
      // asideinput:'',//搜索
      asidetableData:[],//考核表数据列表
      asidetableparams:{
        search_words :null,
        cycle_type :0,//选项时间的标识
        page :0,
        page_size:null,
        // permissions:0
      },
      asideSChangeData:[],//已选考核表
      asideTabLoad:false,//考核表TabLoading

      visible_:false,//弹窗开关
      activeList: [
        { value: 0, label: "全部" },
        { value: 2, label: "月度" },
        { value: 3, label: "季度" },
        { value: 4, label: "半年度" },
        { value: 5, label: "年度" },
        { value: 1, label: "日" },
        { value: 6, label: "自定义" }
      ],
    };
  },
  components:{JxSearch},
  watch: {
    visible(val){
      this.visible_ = val
    },
  },
  created() {
    this.asideData()
  },
  mounted() {},
  methods: {
    selectable(row,index){
      return row.employee_num==0? false:true
    },
    groupSearch(data){//搜索huidiao
      this.asidetableparams.search_words = data
      this.asideData()
    },
    //点击取消
    dialogno(){
      this.close()
    },
    //点击确定
    dialogok(){
      if(this.asideSChangeData.length>0){
        let list = this.asideSChangeData[0].cycle_type
        let waitCT = false
        this.asideSChangeData.forEach((item,index)=>{
          if(list != item.cycle_type){
            waitCT = true
            return
          }
        })
        if(waitCT){
          this.errorage('只能选择同一周期类型的考核表')
        }else{
          this.$emit('confirm', {
            assessgroup: this.asideSChangeData
          });
          this.close()
        }
      }else{
        this.errorage('请选择考核表')
      }
    },
    errorage(arr){
      this.$message({
        message: arr,
        type: 'warning'
      });
    },
    //请求考核表列表
    asideData(){
      this.asideTabLoad = true
      this.$axios('get','/api/per/evaluation/all_group',this.asidetableparams).then((res)=>{
        if(res.data.code == 1){
          this.asidetableData  = res.data.data.list
          this.$nextTick(()=>{
            if(this.selectedAG.length>0){
              let arrInter = [...this.asidetableData].filter(x => [...this.selectedAG].some(y => y.id === x.id));
              this.toggleSelection(arrInter)
            }
          })
        }
      }).finally(()=>{
        this.asideTabLoad = false
      })
    },
    //打开Dialog回调
    openDialog() {
      if(this.selectedAG.length>0){
        this.cliasideHead(this.selectedAG[0].cycle_type)//传入已选的时间标识 cycle_type
      }
    },
    //关闭前的回调
    close_before(){
      this.close()
    },
    //关闭Dialog
    close(){
      this.$emit('update:visible',false)
      setTimeout(()=>{//延迟清空
        this.mainEmpty()//清空选中
      },150)
    },


    cliasideHead(value){//时间选项点击
      this.asidetableparams.cycle_type = value//传入标识-作用变色
      this.asideData()//请求数据
      this.mainEmpty()//清空选中
    },

    asideSChange(val){
      this.asideSChangeData = val
      // console.log(val)
    },
    //表格点击行
    asideSClick(row, column, cell, event) {
      if(row.employee_num==0){
        return false
      }
      this.toggleSelection([row]);
    },
    //点击行选中
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.asideTabData.toggleRowSelection(row);
        });
      } else {
        this.$refs.asideTabData.clearSelection();
      }
    },
    mainEmpty(){//清空选中
      this.toggleSelection(this.asideSChangeData)
    },

    mainTagClose(item,index){//清除右侧tag
      this.asideSChangeData.splice(index,1)
      this.toggleSelection([item])
    },
  }
};
</script>

<style scoped="scoped" lang="scss">
.selectAG{
  ::v-deep .el-dialog{
    border-radius: 5px;
  }
  ::v-deep .el-dialog__header{
    background-color: #ECF5FF;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  ::v-deep .el-dialog__title{
    font-size: 16px;
  }
  ::v-deep .el-dialog__body{
    padding: 0;
  }
  ::v-deep aside{
    width:440px;
    height:500px;
    padding: 20px;
    border-right: 1px solid #e6e6e6;
  }
}
.asideHead {
  span{
    width: 52px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    border-radius: 3px;
    color: rgb(65, 65, 65);
    font-size: 13px;
    cursor:pointer;
  }
  ::v-deep .active{
    background-color: #409EFF;
    color: #fff;
  }
}
.asideTable ::v-deep td,.asideTable ::v-deep th,.asideTable ::v-deep tr{
  border: 0;
}
.asideTable::before{
  width: 0;
}




/* .asideTable ::v-deep th{
  border: 0;
} */
.asidetabDie{
  cursor:pointer;
}

/* 滚动条样式 */
aside ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
aside ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条的设置*/
aside ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/
aside ::v-deep .el-table__body-wrapper:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}


.mainHead{
  margin-bottom: 13px;
  span:nth-child(2){
    color: #409EFF;
    cursor:pointer;
  }
}
.mainTag{
  height: 430px;
  overflow-x: hidden;
  overflow-y: auto;
  ::v-deep .el-tag--medium{
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 20px;
    color: #4c4c4c;
    margin: 5px 5px 5px 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    padding: 0 20px 0 10px;
  }
  .el-tag--medium ::v-deep i{
    color: #8f8f8f;
    position: absolute;
    right: 5px;
    top: 5px;
  }
  .el-tag--medium ::v-deep i:hover{
    background-color: #9b9b9b;
    color: #fff;
  }
}

/* 滚动条样式 */
.mainTag::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.mainTag::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条的设置*/
.mainTag::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/
.mainTag:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}

footer{
  border-top: 1px solid #e6e6e6;
}
footer button{
  height: 40px;
  width: 90px;
  margin-top: 9px;
};








</style>
