
<template>
  <div class="all" v-loading="loading">
    <div class="demo-ruleForm">
      <div class="title">分组信息</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="考核表名称:" prop="name">
          <el-popover placement="right" width="400" trigger="hover" key="2">
            <div class="fontColorB">
              考核表用来做什么？
              <br />
              相同考核周期、考核内容的员工可以放在同一考核表，支持跨部门同岗位统一考核
              <br />
              如：20个销售员可以放在同个考核表里面
            </div>
            <el-input type="textarea" v-model="ruleForm.name" slot="reference" placeholder="请输入名称" class="width-250 scroll-bar"
            :autosize="{ minRows: 2, maxRows: 6}"
            show-word-limit maxlength="100"
            ></el-input>
          </el-popover>
		  <span style=" position: relative;left:10px;top:-10px;cursor: pointer;" class="blue" @click="isRule=true">示例</span>
        </el-form-item>
        <el-form-item label="考核周期">
          <el-radio-group v-model="ruleForm.cycle_type">
            <el-radio :label="item.value" v-for="(item,index) in $getCycleType()" :key="item.value" v-show="item.value!=0">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="考核表管理员">
			
		<el-popover placement="right" key="1" width="400" trigger="hover" >
		  <div class="fontColorB">
			考核表管理员用来做什么？
			<br />
			考核表管理员可以删除修改当前考核表
		  </div>
		  <div class="border flex-box-ce" slot="reference">
		    <div class="flex-1" v-if="Administrator.length == 0">请选择管理员</div>
		    <div v-else style="width: 180px;" class="font-flex-word">
		      <span v-for="(item, index) in Administrator" :key="index">
		        <i v-if="index != 0">,</i>{{ item.name }}
		      </span>
		    </div>
		    <span v-if="Administrator.length >0" class="blue">{{Administrator.length}}人</span>
		    <i class="el-icon-arrow-down icon-right" v-else></i>
		    <div @click="openAdministrator()" class="inputDc"></div>
		  </div>
		</el-popover>
        </el-form-item>
        <el-form-item label="考核哪些人" prop="employee_ids">
          <div class="border flex-box-ce">
            <div class="flex-1" v-if="selected.employee.length == 0">请选择被考核人</div>
            <div v-else style="width: 180px;" class="font-flex-word">
              <span v-for="(item, index) in selected.employee" :key="index">
                <i v-if="index != 0">,</i>{{ item.name }}
              </span>
            </div>
            <span v-if="selected.employee.length >0" class="blue">{{selected.employee.length}}人</span>
            <i class="el-icon-arrow-down icon-right" v-else></i>
            <div @click="setAdministrator = true" class="inputDc"></div>
          </div>
        </el-form-item>
      </el-form>
    </div>
	
	<!-- 示例 -->
	<el-dialog title="示例" :visible.sync="isRule" width="700px" :close-on-click-modal="false">
		<div>
		<img src="@/assets/image/sl2.png" alt="" srcset="" style="width: 100%;">
		</div>
		<span slot="footer" class="dialog-footer">
			<div class="flex-box-end">
				<el-button @click="isRule = false">关 闭</el-button>
			</div>
		</span>
	</el-dialog>

    <!-- 选择子管理员 -->
    <EmployeeSelector :selected="selected"  title="选择被考核人" :visible.sync="setAdministrator" :is_filtration_creator="false" @confirm="confirmAdministrator" />

    <BrawerBox drawerTitle="从绩效管理员中选择" :showDrawer.sync="isChecks">
      <template slot="main">
       <ul>
          <li v-for="(item, index) in gzList" :key="index" class="li">
              <el-popover v-if="item.disabled" class="without-outline" placement="bottom"  width="850" trigger="hover" content="该管理员具有全部考核表的权限，无法取消勾选，如须调整可联系绩效系统主管理员前往“权限设置”处进行调整。">
                <el-checkbox slot="reference" v-model="item.check" class="flex-box-ce" :disabled="item.disabled">
                  <div class="flex-box-ce">
                    <userImage :user_name="item.name" :img_url="item.img_url"></userImage>
                    <div style="margin: 0 10px;">{{item.name}}</div>
                   <div v-if="item.dept.length>0" style="width: 200px;" class="font-flex-word">
                        <span v-for="(deptItme,index2) in item.dept" :key="index2">
                          {{deptItme.name}}
                        </span>
                    </div>
                  </div>
                </el-checkbox>
              </el-popover>
              <el-checkbox  v-else v-model="item.check" class="flex-box-ce">
                <div class="flex-box-ce">
                  <userImage :user_name="item.name" :img_url="item.img_url"></userImage>
                  <div style="margin: 0 10px;">{{item.name}}</div>
                   <div v-if="item.dept.length>0" style="width: 200px;" class="font-flex-word">
                        <span v-for="(deptItme,index2) in item.dept" :key="index2">
                          {{deptItme.name}}
                        </span>
                    </div>
                </div>
              </el-checkbox>
          </li>
      </ul>
      </template>
      <template slot="footer">
          <el-button plain @click="isChecks = false">取消</el-button>
          <el-button type="primary" @click="submitForm()">保存</el-button>
      </template>
    </BrawerBox>
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import BrawerBox from '@/components/public/BrawerBox'
export default {
  components: { EmployeeSelector,BrawerBox },
  name: 'BasicMessage',
  props:{
    data:{
      type:Object,
      default:()=>{
		  return {}
	  }
    }
  },
  data() {
    return {
      visible: false,
      loading:false,
      setAdministrator: false,
      isChecks: false,
      gzList:[],
      Administrator:[],//管理者列表
      selected:{ employee: [], dept: [] },//执行者列表
      ruleForm: {
        name:'',
        cycle_type: 2,//周期类型 1-天 2-月度 3-季度 4-半年度 5-年度 6-自定义
        mannager_ids:'',
        employee_ids:'',
      },
      rules: {
        name: [{ required: true, message: '请输入考核表名称', trigger: 'blur' }, { min: 2, message: '长度最少为2个字符', trigger: 'blur' }],
        employee_ids: [{ required: true, message: '请选择被考核人员', trigger: 'change' }],
      },
	  isRule:false,
    };
  },
  watch: {
    data(val){
       if(val.name){
         this.recoverData();
       }
    },
    Administrator(val) {
       let ids=val.map(item=>{
         return item.id
       })
       this.ruleForm.mannager_ids=ids.toString()||'';
    },
    'selected.employee'(val) {
       let ids=val.map(item=>{
         return item.id
       })
       this.ruleForm.employee_ids=ids.toString()||'';
    },
  },
  mounted() {
      this.loading=true;
      setTimeout(() => {
        this.getList();
      }, 200);
  },
  methods: {
    // 编辑时复原整个流程数据
    recoverData(){
        this.ruleForm.name=this.data.name;
        this.ruleForm.cycle_type=this.data.cycle_type;//周期类型 1-天 2-月度 3-季度 4-半年度 5-年度 6-自定义
        this.selected.employee=this.data.employees.map(e=>{
			return this.$getEmployeeList()[e.id]
		})
    },
    // 获取子管理员
    getList(){
      this.$axios('get','/api/per/user/manager_info',{range:2}).then(res=>{
            let data=res.data.data.list||[];
			data=data.filter(item=>{
				if(item.is_official&&item.is_scope){
					return item
				}
			})
            let Administrator=[];
            data.forEach(item=>{
              item.check=false;
              if(item.main==1||this.$isAuthoritys(14,item.permission)){//主管或者子管（全公司）
                item.check=true;
                item.disabled=true;
                Administrator.push(item);
              }else{
                item.disabled=false;
                item.check=false;
                if(this.data.id){//子管理的特定管理范围下是否包含当前考核表
                  if(item.group_ids.indexOf(this.data.id)>=0){
                    item.check=true;
                    Administrator.push(item);
                  }
                }
              }
            })
            let AdministratorAll=JSON.parse(JSON.stringify(Administrator));
            let mannager_ids=this.data.mannager_ids;
            let arr=AdministratorAll.filter(x=>mannager_ids.some(y=>y.id==x.id))
            if(mannager_ids.length>0){
              this.Administrator=arr
            }else{
               this.Administrator=Administrator
            }
            this.gzList=data;
      }).finally(()=>{
        this.loading=false;
        this.$emit('update:isShowBtn',true)
      })
    },

    confirmAdministrator(e) {
        this.selected.employee=e.employee.length>0?e.employee:[]
    },
    //过滤数组，返回数据中的ID
    filtrationArr(arr){
      if(arr.length==0){
        return [];
      }
      return arr.map(item=>{
        return item.id
      })
    },
    openAdministrator(){
      let selectIds=this.Administrator.map((item) => {
         if(item.check){
            return item.id
         }
      })
      this.gzList.forEach((item,index)=>{
        if(selectIds.indexOf(item.id)>=0){
          this.$set(this.gzList[index],'check',true)
        }else{
           this.$set(this.gzList[index],'check',false)
        }
      })
      this.isChecks=true;
    },
    //选择管理者
    submitForm(){
      let list=JSON.parse(JSON.stringify(this.gzList));
      let Administrator=[];
      list.forEach(item=>{
        if(item.check){
          Administrator.push(item)
        }
      })
      this.Administrator=Administrator;
      this.isChecks=false;
    },
  }
};
</script>
<style scoped="scoped">
.border {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #C0C4CF;
  font-size: inherit;
  height: auto;
  outline: 0;
  padding: 0 15px;
  width: 250px;
  position: relative;
  cursor: pointer;
}
.border .font-flex-word{
  color: #606266;
}
.all {
  padding: 20px;
  font-size: 14px;
}
.demo-ruleForm {
  width: 600px;
  margin: 30px auto 0 auto;
}
.title {
  margin-bottom: 30px;
  margin-left: 40px;
}
.remark {
  padding-left: 120px;
}
.width-250 {
  width: 350px;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  cursor: pointer;
}
.li{
  padding: 15px 0;
  border-bottom: 1px solid #ebebeb;
}
.li:hover{
    background-color: #F5F7FA;
}
.checkbox ::v-deep .el-checkbox__input{
    position: relative;
    top:12px;
}
 ::v-deep :focus{
    outline: 0;
}
::v-deep .el-textarea__inner::-webkit-scrollbar {
  width: 6px;
  height: 4px;
}
/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
::v-deep .el-textarea__inner::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条的设置*/
::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/
::v-deep .el-textarea__inner:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  height: 20px;
}
</style>
