<template>
  <div class="all boxMinHeight">
    <PageHead phName="发起考核"></PageHead>
    <footer v-loading="assessLoad">
      <div class="fot-width">
        <div class="title">基本信息</div>
        <el-form :model="spassessdata" ref="spassdata" label-width="120px" class="spassform">
          <el-form-item label="参与考核表" :required="true">
            <div class="border flex-box-ce">
              <div class="fontColorD flex-1" v-if="selectedAG.length == 0">请选择考核表</div>
              <div v-else class="flex-box">
                <div style="width: 220px;margin-right: 10px;" class="font-flex-word">
                  <span v-for="(item, index) in selectedAG" :key="index">
                    <i v-if="index != 0">,</i>
                    {{ item.name }}
                  </span>
                </div>
                <span>
                  <span class="blue">{{ selectedAG.length }}</span>
                  个考核表
                </span>
              </div>
              <div @click="selectspassdata()" class="inputDc"></div>
            </div>
          </el-form-item>

          <el-form-item label="时间周期" :required="true">
            <!-- 天 -->
            <el-date-picker v-if="time_typeap == 1" v-model="export_from" type="date" value-format="yyyy年MM月dd日" class="inp-width" placeholder="请选择"></el-date-picker>
            <!-- 月 -->
            <el-date-picker v-else-if="time_typeap == 2" v-model="export_from" class="inp-width" type="month" value-format="yyyy年MM月" placeholder="请选择"></el-date-picker>
            <!-- 季度 -->
            <season v-else-if="time_typeap == 3" ref="season" :isActive="true" class="inp-width" @confirm="export_quarter_confirm"></season>
            <!-- 半年度 -->
            <season
              v-else-if="time_typeap == 4"
              ref="season"
              :isActive="true"
              :halfyear="time_typeap == 4 ? true : false"
              class="inp-width"
              @confirm="export_quarter_confirm"
            ></season>
            <!-- 年 -->
            <el-date-picker v-else-if="time_typeap == 5" v-model="export_from" class="inp-width" type="year" value-format="yyyy年" placeholder="请选择"></el-date-picker>

            <!-- 自定义 -->
            <div v-else-if="time_typeap == 6">
              <el-date-picker
                v-model="export_from"
                type="daterange"
                value-format="yyyy年MM月dd日"
                class="inp-width"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item v-if="export_from && export_from != ''" label="考核名称" :required="true">
            <el-input placeholder="请输入" class="inp-width" v-model="assessName" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="assessDrawer fot-width">
        <div class="drawer_center">
          <div class="title" style="margin-bottom: 20px;">考核设置</div>
          <el-form class="drawerForm" label-width="120px">
            <el-form-item label="沟通反馈">
				<template slot="label">
					<div>沟通反馈
						<el-tooltip class="item" effect="dark" content="在整个考核过程中，若有需要反馈的内容可在【沟通反馈】处留言，支持发钉钉通知" placement="top-start">
							<i class="fontColorC el-icon-warning"></i>
						</el-tooltip>
					</div>
				</template>
                <el-radio-group v-model="drawer_switch1">
                  <el-radio :label="true">开启</el-radio>
                  <el-radio :label="false">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="评分详情">
              <!-- <el-switch v-model="dswScore_details1"></el-switch> -->
              <span>对被考核人<span v-if="!dswScore_details1">不</span>可见</span>
              <span class="advancedConfig" @click="advancedConfig1 = !advancedConfig1">
                更多配置
                <svg-icon slot="reference" icon-class="downArrow" :class="advancedConfig1 ? 'advancedConfig_i' : ''" style="" />
              </span>
              <div v-if="advancedConfig1" class="scoreTab">
                <div class="flex-box flex-d-center"><span>评分可见权限</span></div>

                <el-table  :data="advconTab1" stripe style="width: 100%" >
                  <el-table-column prop="name"></el-table-column>
                  <el-table-column prop="name" label="仅看到本人评分">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.iScore" :disabled="scope.row.forbidden" label="1">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="看到所有评分">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.iScore" :disabled="scope.row.forbidden" label="2">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
            <el-form-item label="评分说明">
              <!-- <el-switch v-model="dswScore_opinion1"></el-switch> -->
              <span>对被考核人<span v-if="!dswScore_opinion1">不</span>可见</span>
              <span class="advancedConfig" @click="advancedConfig2 = !advancedConfig2">
                更多配置
                <svg-icon slot="reference" icon-class="downArrow" :class="advancedConfig2 ? 'advancedConfig_i' : ''" style="" />
              </span>
              <div v-if="advancedConfig2" class="scoreTab">
                <div class="flex-box flex-d-center"><span>评分人说明可见权限</span></div>
                <el-table  stripe :data="advconTab2" style="width: 100%"  class="">
                  <el-table-column prop="name"></el-table-column>
                  <el-table-column prop="name" label="仅看到本人说明">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.iScore" :disabled="scope.row.forbidden" label="1">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="看到所有说明">
                    <template slot-scope="scope">
                      <el-radio v-model="scope.row.iScore" :disabled="scope.row.forbidden" label="2">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
            <el-form-item label="评分结果">
              <el-radio v-model="dswScore_results1" label="1">考核结束后自动公开</el-radio>
              <el-radio v-model="dswScore_results1" label="2">需管理员公示</el-radio>
              <div class="drawer_prompt">设置考核结果何时对被考核人可见</div>
            </el-form-item>
            <el-form-item>
               <div class="flex-box-end" style="margin-top:20px;"><el-button type="primary"   @click="initiateAssess">发起考核</el-button></div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </footer>
    <SelectAG :visible.sync="visible" @confirm="confirmAG" :selectedAG="selectedAG" title="考核表筛选"></SelectAG>
  </div>
</template>

<script>
import SelectAG from '@/components/assessManage/SelectAttendanceGroup'; //选择考核表
import PageHead from '@/components/public/PageHead'; //头部---返回
import moment from 'moment';
import season from '@/components/public/season'; //选择周
var bool = true; // 五秒执行一次变量
export default {
  data() {
    return {
      assessLoad: false, //页面加载loading
      selectedAG: [], //已选考勤组
      time_typeap: 2, //已选考勤组的时间段
      assessName: '', //考核名称
      export_from: '', //时间
      visible: false, //选择考核表开关
      spassessdata: {
        name: '',
        time: ''
      },
      // customTime:'1',//自定义考核表  -- 设不设置考核时间
      // assessMerge:'2',//定义考核表  -- 考核合并
      customMerge: [], //自定义考核表  -- 合并到已发起考核
      customMergeText: '',
      // newLaunchText:'',//新发起考核
      modifyConfig: false, //修改配置侧弹窗开关

      //考核设置--外层
      feedback: true, //沟通反馈外层开关
      scope_employee: false, //评分详情---对被考核人可不可见--外层
      comment_employee: false, //评分意见---对被考核人可不可见--外层
      result_distribution: false, //评分结果--外层

      //考核设置--侧边栏
      drawer_switch1: true, //沟通反馈开关
      dswScore_details1: false, //评分详情---对被考核人可不可见
      dswScore_opinion1: false, //评分意见---对被考核人可不可见
      dswScore_results1: '1', //评分结果

      advancedConfig1: false, //高级配置开关1
      advancedConfig2: false, //高级配置开关2

      // dswDetno_limit1:true,//高级配置--不限制管理员
      // dswDetno_limit2:true,//高级配置--不限制管理员

      advconTab1: [
        { name: '被考核人', iScore: '1', forbidden: false },
        { name: '上级评分', iScore: '2', forbidden: false },
        { name: '特定指标评分人', iScore: '1', forbidden: false },
        // {name:'互评(同级、下级)',iScore:'1',forbidden:false},
        { name: '审批人', iScore: '2', forbidden: true }
      ],
      advconTab2: [
        { name: '被考核人', iScore: '1', forbidden: false },
        { name: '上级评分', iScore: '2', forbidden: false },
        { name: '特定指标评分人', iScore: '1', forbidden: false },
        // {name:'互评(同级、下级)',iScore:'1',forbidden:false},
        { name: '审批人', iScore: '2', forbidden: true }
      ],

      assessment: {}, //默认配置,
      num: 0 //被考核人数
    };
  },
  components: { PageHead, SelectAG, season },
  watch: {
    time_typeap() {
      //筛选考核表--切换选项时间---置空
      this.export_from = '';
    },
    export_from(val) {
      //选择时间后显示出对应模块
      if (this.time_typeap == 6) {
        if (val && val.length > 0) {
          this.assessName = val[0] + '至' + val[1] + '绩效考核';
        }
      } else if (this.time_typeap == 3 || this.time_typeap == 4) {
        if (this.$refs.season) {
          this.assessName = this.$refs.season.choseQuarter + '绩效考核';
        }
      } else {
        this.assessName = val + '绩效考核';
      }
    },
    dswScore_details1(val) {
      this.advconTab1[0].iScore = val ? '2' : '1';
    },
    advconTab1: {
      //监听advconTab1
      handler(objval, oldval) {
        this.dswScore_details1 = objval[0].iScore == '1' ? false : true;
      },
      deep: true //深度监听
    },
    dswScore_opinion1(val) {
      this.advconTab2[0].iScore = val ? '2' : '1';
    },
    advconTab2: {
      //监听advconTab1
      handler(objval, oldval) {
        this.dswScore_opinion1 = objval[0].iScore == '1' ? false : true;
      },
      deep: true //深度监听
    }
  },
  created() {
    this.assessmentdata();
  },
  mounted() {},
  methods: {
    //请求默认配置
    assessmentdata() {
      this.assessLoad = true;
      this.$axios('get', '/api/per/user/base_config')
        .then(res => {
          if (res.data.code == 1) {
            let data = res.data.data.assessment;
            this.assessment = data;
            //沟通反馈
            this.feedback = data.feedback == 1 ? true : false;
            this.drawer_switch1 = data.feedback == 1 ? true : false;
            //评分详情
            let point_scope = data.point_scope;
            this.scope_employee = point_scope.employee == 1 ? false : true;
            this.dswScore_details1 = point_scope.employee == 1 ? false : true;
            this.advconTab1[0].iScore = point_scope.employee.toString();
            this.advconTab1[1].iScore = point_scope.manager.toString();
            this.advconTab1[2].iScore = point_scope.special.toString();
            // this.advconTab1[3].iScore = point_scope.same_level.toString()
            this.advconTab1[3].iScore = point_scope.reviewer.toString();
            //评分意见
            let point_comment = data.point_comment;
            this.comment_employee = point_comment.employee == 1 ? false : true;
            this.dswScore_opinion1 = point_comment.employee == 1 ? false : true;
            this.advconTab2[0].iScore = point_comment.employee.toString();
            this.advconTab2[1].iScore = point_comment.manager.toString();
            this.advconTab2[2].iScore = point_comment.special.toString();
            // this.advconTab2[3].iScore = point_comment.same_level.toString()
            this.advconTab2[3].iScore = point_comment.reviewer.toString();
            //评分结果
            this.dswScore_results1 = data.result_distribution.toString();
          }
        })
        .finally(() => {
          this.assessLoad = false;
        });
    },
    initiateAssess() {
      this.modConDraSave(()=>{
        //发起考核
        if (this.selectedAG.length == 0) {
          this.errorage('?', '请选择考核表');
          return;
        }
        if (!this.export_from || this.export_from == '' || this.export_from.length == 0) {
          this.errorage('?', '考核时间不能为空');
          return;
        }
        this.$confirm('确认发起' + this.assessName + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
            let data = {};
            //考核表id
            let sAGList = [];
            this.selectedAG.forEach(item => {
              sAGList.push(item.id);
            });
            data.group_ids = sAGList;
            //周期类型
            data.cycle_type = this.time_typeap;
            //考核包所属日期
            if (this.time_typeap == 6) {
              //自定义日期
              data.start_date = this.export_from[0].replace(/[^\d]/g, ''); //自定义--开始日期
              data.end_date = this.export_from[1].replace(/[^\d]/g, ''); //自定义--结束日期
            } else {
              data.date = this.export_from.replace(/[^\d]/g, '');
            }
            //绩效考核包总体配置
            data.config = {
              assessment: this.assessment
            };
            data.num = this.num;
			data.type='package_add'
			this.$socketApi.sendData(data,this.onmessageWS)
			return false;
            this.$axios('post', '/api/per/package/add', data).then(res => {
              if (res.data.code == 1) {
                let rows = {
                  id: res.data.data.package_id,
                  cycle_type: Number(res.data.data.cycle_type),
                  pushs: '/assessManagement'
                };
                if (this.num >= 20) {
                  this.$message.success('考核已发起，相关考核内容将在1~3分钟内生成');
                  this.$router.go(-1);
                } else {
                  this.$router.push({ path: '/assessDetails', query: { amfTabLckick: JSON.stringify(rows) } });
                }
              }
            });
        })
      })
    },
	opneWebSocket() {
		let wsData=this.resultList;
		if(wsData[this.resultIndex]&&!this.isShowError){
			this.$socketApi.sendData(wsData[this.resultIndex],this.onmessageWS)
		}
	},
	onmessageWS(e){
		if(e.type=='package_add'){
			if(e.code==1){
				let data=e.result.package_info
				let rows = {
				  id: data.package_id,
				  cycle_type: Number(data.cycle_type),
				  pushs: '/assessManagement',
				  isShowText:true
				};
				this.$socketApi.closewebsocket();
				this.$router.push({ path: '/assessDetails', query: { amfTabLckick: JSON.stringify(rows) } });
			}else{
				this.errorage('x',e.msg)
			}
		}
	},
    errorage(key, arr) {
      //弹窗提示
      if (bool) {
        this.$message({
          message: arr,
          type: key == '√' ? 'success' : key == '?' ? 'warning' : key == 'x' ? 'error' : ''
        });
        bool = false;
        setTimeout(() => {
          bool = true;
        }, 5000);
      }
    },
    //选择考核表
    selectspassdata() {
      this.visible = true;
    },
    confirmAG(data) {
      //考核表组件点击确定返回
      this.time_typeap = data.assessgroup[0].cycle_type;
      this.selectedAG = data.assessgroup;
      let num = 0;
      if (data.assessgroup.length > 0) {
        data.assessgroup.forEach(item => {
          num += item.employee_num;
        });
      }
      this.num = num;
    },

    // 选择季度
    export_quarter_confirm(val) {
      this.export_from = val;
    },

    //侧边栏保存
    modConDraSave(fun) {
		// 没有基础配置权限时不动全局配置
		if(!this.$isAuthoritys(this.$15)){
			fun()
			return false;
		}
      // this.$alert('后续发起的考核也将默认使用当前配置', '提示', {
      //   confirmButtonText: '确定',
      //   callback: action => {
      //     if (action === 'confirm') {
            let data = this.assessment;
            data.feedback = this.drawer_switch1 ? 1 : 0; //沟通反馈是否启用 1-启用 0-不启用
            data.point_scope.employee = this.advconTab1[0].iScore == '1' ? 1 : 2; //被考核人 1-本人评分 2-所有评分
            data.point_scope.manager = this.advconTab1[1].iScore == '1' ? 1 : 2; //上级 1-本人评分 2-所有评分
            data.point_scope.special = this.advconTab1[2].iScore == '1' ? 1 : 2; //指定评分人 1-本人评分 2-所有评分
            data.point_scope.reviewer = this.advconTab1[3].iScore == '1' ? 1 : 2; //审批人 1-本人评分 2-所有评分
            data.point_comment.employee = this.advconTab2[0].iScore == '1' ? 1 : 2; //被考核人 1-本人评分 2-所有评分
            data.point_comment.manager = this.advconTab2[1].iScore == '1' ? 1 : 2; //上级 1-本人评分 2-所有评分
            data.point_comment.special = this.advconTab2[2].iScore == '1' ? 1 : 2; //指定评分人 1-本人评分 2-所有评分
            data.point_comment.reviewer = this.advconTab2[3].iScore == '1' ? 1 : 2; //审批人 1-本人评分 2-所有评分
            data.result_distribution = this.dswScore_results1 == '1' ? 1 : 2; //评分结果公示方式 1-考核结束后自动公开 2-管理员手动公开
            this.$axios('post', '/api/per/user/set_base_config', { assessment: JSON.stringify(data) }).then(res => {
              if (res.data.code == 1) {
                this.modifyConfig = false;
                this.assessmentdata();
                fun();
              }
            });
      //     }
      //   }
      // });
    },
    //侧边栏取消
    modConDraCancel() {
      this.modifyConfig = false;
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.all {
  position: relative;
  background-color: #fff;
  padding: 20px;
  footer {
    padding: 35px;
    .fot-width {
      width: 640px;

      margin: 0 auto;
    }
    .title {
      font-size: 16px;
      color: #525252;
      position: relative;
      padding-left: 5px;
    }
    .title::after{
      content: " ";
      position: absolute;
      width: 2px;
      height: 16px;
      background-color: #409EFF;
      left: 0;
      top: 3px;
    }

    .spassform {
      padding: 20px 0 0 0;
      .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: #606266;
        font-size: inherit;
        height: auto;
        outline: 0;
        padding: 0 15px;
        max-width: 344px;
        position: relative;
        .inputDc {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          z-index: 9;
          cursor: pointer;
        }
      }
    }

    .foot-Hea-from {
      padding: 20px 0 0 0;
      ::v-deep .el-form-item {
        margin: 0;
      }
      ::v-deep .el-form-item__label {
        color: #909090;
      }
    }
  }
  ::v-deep label {
    font-weight: normal;
  }
}

.color_blue {
  color: #1299f9;
}
.inp-width {
  width: 343px;
}

.customMergeText {
  width: 200px;
}
.newLaunchText {
  width: 242px;
  ::v-deep .el-input__inner {
    padding-right: 48px;
  }
}

.foot-Hea-width {
  width: 463px;
  span:nth-child(2) {
    font-size: 14px;
    color: #1299f9;
    cursor: pointer;
  }
}

.assessDrawer {
  .drawer_title {
    font-size: 18px;
    padding: 20px;
    border-bottom: 1px #efefef solid;
  }
  .drawer_center {
    overflow-y: auto;
    overflow-x: hidden;
    .drawerForm {
      width: 465px;
      ::v-deep .el-form-item {
        margin-bottom: 10px;
      }
      .drawer_prompt {
        font-size: 13px;
        margin-top: -12px;
        color: #b3b3b3;
      }
      .advancedConfig {
        color: #1299f9;
        margin-left: 15px;
        cursor: pointer;
        svg {
          transition: all 0.3s;
        }
      }
      .advancedConfig_i {
        transform: rotate(180deg);
      }
    }
  }

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

.scoreTab ::v-deep .el-table th {
  background-color: #f5f5f5;
  font-size: 13px;
  padding: 0;
}
.scoreTab ::v-deep .el-table .el-table__row .cell {
  font-size: 12px;
}

.modifyConfigDrawer {
  background-color: #fff;
  border-top: 1px solid rgb(233, 233, 233);
  width: 100%;
  height: 60px;
  padding: 10px 20px;
}
</style>
