<template>
  <div class="page">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="目标看板" name="1">
        <div class="content">
          <div class="top search_top">
            <el-radio-group v-model="type" @change="onAssessmentScope">
              <el-radio-button :label="1">按部门</el-radio-button>
              <el-radio-button :label="2">按个人</el-radio-button>
            </el-radio-group>
            <div class="search_box">
              <el-select
                v-model="boardQuery.month"
                placeholder="请选择"
                style="margin: 0 10px;"
              >
                <el-option
                  v-for="item in optionsMonths"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button type="primary">搜索</el-button>
            </div>
          </div>
          <div class="mid">
            <div class="mid_top">
              <div class="jixiaozongfen">
                <bar-charts
                  :title="'绩效总分排名'"
                  :id="'jixiaozongfen'"
                  :legendName="'绩效总分'"
                  :parameter="depStatObj.totalScore"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="jixiaopingjunfen">
                <line-charts
                  :title="'绩效平均分排名'"
                  :id="'jixiaopingjunfen'"
                  :parameter="depStatObj.averageScore"
                  :legendName="'绩效平均分'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
            </div>
            <div class="mid_down">
              <div class="top_10 box">
                <bar-charts
                  :title="'部门加分排名TOP10'"
                  :id="'top_10'"
                  :parameter="depStatObj.totalAddScore"
                  :legendName="'部门加分分值'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="jiafen box">
                <pie-charts
                  :title="'部门加分整体分布'"
                  :id="'jiafen'"
                  :parameter="depStatObj.pieAddScore"
                  :legendName="'部门加分'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="koufen_10 box">
                <bar-charts
                  :title="'部门扣分排名TOP10'"
                  :id="'koufen_10'"
                  :parameter="depStatObj.totalSubScore"
                  :legendName="'部门分值'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="koufen box">
                <pie-charts
                  :parameter="depStatObj.pieSubScore"
                  :title="'部门扣分整体分布'"
                  :id="'koufen'"
                  :legendName="'部门扣分'"
                  :styleObj="{ onAssessmentScope2width: '100%', height: '300px' }"
                />
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="目标对齐" name="2">
        <div class="content">
          <div class="top search_top">
            <el-radio-group v-model="type1" @change="onAssessmentScope1">
              <el-radio-button :label="1">按部门</el-radio-button>
              <el-radio-button :label="2">按个人</el-radio-button>
            </el-radio-group>
            <div class="search_box">
              <el-select v-model="value" @change="deptList" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                @change="deptList"
                v-model="StatQuery.month"
                placeholder="请选择"
                style="margin: 0 10px;"
              >
                <el-option
                  v-for="item in optionsMonths"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button type="primary" @click="deptList">搜索</el-button>
            </div>
          </div>
          <div class="bar_content">
            <bar-charts
              :title="`${type1 == 1 ? '各部门' : '个人'}${StatQuery.month}月${alignmentName}对齐情况`"
              :id="'bar_content'"
              :legendName="alignmentName"
              :option="{title:{left:'center',textStyle:{fontSize:24}}}"
              :markLine="0.2"
              :parameter="depStatObj.alignment"
              :styleObj="{ width: '1800px', height: '650px' }"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="目标管理" name="3">
        <div class="content">
          <div class="top">
            <el-radio-group v-model="type2" @change="onAssessmentScope2">
              <el-radio-button :label="1">按部门</el-radio-button>
              <el-radio-button :label="2">按个人</el-radio-button>
            </el-radio-group>
            <el-button type="primary" style="margin: 0 20px;" @click="addGoal">
              + 创建目标</el-button
            >
          </div>
          <div class="mid_content" style="height: auto;">
            <div class="goal_box" v-for="(val, i) in dataList" :key="i">
              <div class="goal_title">
                <img src="../../../../assets/images/u17641.svg" alt="" />
                <span>
                  {{dictString('assessmentType',val.assessmentType)}}{{dictString('compareScope',val.compareScope)}}{{val.ratio}}%
                </span>
              </div>
              <p class="goal_txt">
                <span>{{ type2 == 1 ? "目标部门：" : "目标个人：" }}</span
                ><span>{{
                  type2 == 1 ? val.deptPerpose : val.staffPerpose
                }}</span>
              </p>
              <p class="goal_txt">
                <span>周期：</span><span>{{val.year}} {{dictString('periodType',val.periodType)}}</span>
              </p>
              <p class="goal_txt">
                <span>负责人：</span><span>{{val.leaders}}</span>
              </p>
              <p class="goal_txt">
                <span>最近更新：</span><span>{{val.updateTime}}</span>
              </p>
              <p class="goal_txt"><span>更新人员：</span><span>{{dictString('updateUserId',val.updateUserId)}}</span></p>
              <div class="button_box">
                <el-button
                  type="primary"
                  style="width: 150px;"
                  plain
                  @click="hanleEdit(val)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  style="width: 150px;"
                  plain
                  @click="hanleDel(val)"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <dialog-show ref="dialogform" @ok="getData" />
  </div>
</template>

<script>
import BarCharts from "./components/BarCharts.vue";
import LineCharts from "./components/LineCharts.vue";
import PieCharts from "./components/PieCharts.vue";
import dialogShow from "./dialogshow";
import moment from 'moment'

export default {
  components: {
    BarCharts,
    PieCharts,
    LineCharts,
    dialogShow,
  },
  name: "StaffPerformStatList",

  created() {
    this.getData();
    this.deptList()
    this.statList()
  },
  methods: {
    // 个人绩效分数统计
    staffStatList(){
      this.$post("/staff/perform/stat/list", this.boardQuery).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          // this.statArr = row
          const x = []
          const y = []
          row.forEach(element => {
            x.push(element.staffName)
            y.push(element.totalScore)
          });
          this.depStatObj.totalScore.x = x
          this.depStatObj.totalScore.y = y
        }
      });
      // 加分top10
      const top10 = {...this.boardQuery,size:10}
      this.$post("/staff/perform/stat/list", top10).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          // this.statArr = row
          const x = []
          const y = []
          row.forEach(element => {
            x.push(element.staffName)
            y.push(element.attendScoreAdd)
          });
          this.depStatObj.attendScoreAdd.x = x
          this.depStatObj.attendScoreAdd.y = y
        }
      });
      // 减分
      const top10Sub = {...this.boardQuery,size:10,orderColList:[{colName:'totalSubScore',sortKind:'desc'}]}
      this.$post("/staff/perform/stat/list", top10Sub).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          // this.statArr = row
          const x = []
          const y = []
          row.forEach(element => {
            x.push(element.staffName)
            y.push(element.totalSubScore)
          });
          this.depStatObj.totalSubScore.x = x
          this.depStatObj.totalSubScore.y = y
        }
      });
    },
    // 部门绩效分数统计
    statList(){
      this.$post("/dept/perform/stat/list",this.boardQuery).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          // this.statArr = row
          const x = []
          const y = []
          const averageScore = [] //平均分数
          row.forEach(element => {
            x.push(element.deptName)
            y.push(element.totalScore)
            averageScore.push(element.averageScore)
          });
          this.depStatObj.totalScore.x = x
          this.depStatObj.totalScore.y = y

          // 平均值
          this.depStatObj.averageScore.x = x
          this.depStatObj.averageScore.y = averageScore
        }
      });
      // 加分top10
      const top10 = {...this.boardQuery,size:10,orderColList:[{colName:'totalAddScore',sortKind:'desc'}]}
      this.$post("/dept/perform/stat/list", top10).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          // this.statArr = row
          const x = []
          const y = []
          row.forEach(element => {
            x.push(element.deptName)
            y.push(element.totalAddScore)
          });
          this.depStatObj.totalAddScore.x = x
          this.depStatObj.totalAddScore.y = y
          
        }
      });
      // 减分
      const top10Sub = {...this.boardQuery,size:10,orderColList:[{colName:'totalSubScore',sortKind:'desc'}]}
      this.$post("/dept/perform/stat/list", top10Sub).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          // this.statArr = row
          const x = []
          const y = []
          row.forEach(element => {
            x.push(element.deptName)
            y.push(element.totalSubScore)
          });
          this.depStatObj.totalSubScore.x = x
          this.depStatObj.totalSubScore.y = y
        }
      });
    },
    // 部门目标对齐
    deptList(){
      this.$post("/perform/perpose/dept/stat/list", this.StatQuery).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          const x = []
          const y = []
          row.forEach(element => {
            x.push(element.deptName)
            y.push(element[this.value])
          });
          this.depStatObj.alignment.x = x
          this.depStatObj.alignment.y = y
        }
      });
    },
    // 个人对齐方式
    staffList(){
      this.$post("/perform/perpose/staff/stat/list", this.StatQuery).then((res) => {
        const {code,data,dict} = res
        if(code == 1){
          const row = data.data || []
          const x = []
          const y = []
          row.forEach(element => {
            x.push(element.staffName)
            y.push(element[this.value])
          });
          this.depStatObj.alignment.x = x
          this.depStatObj.alignment.y = y
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    addGoal() {
      this.$refs.dialogform.add();
    },
    /** 编辑方法 */
    hanleEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    hanleDel(val) {
      this.$get("/perform/perpose/delete", { id: val.id }).then((res) => {
        this.$message.success(res.msg);
        this.getData();
      });
    },
    // 目标管理
    getData() {
      this.$post("/perform/perpose/list",this.query).then((res) => {
        console.log(res,"@@@@@@@@@@@@");
        const {code,data,dict} = res
        this.dict = dict || {}
        if (code == 1) {
          this.dataList = data.data;
        } else {
          this.dataList = [];
        }
      });
    },
    // 字典转换
    dictString(key,id){
      const keyName = this.dict[key] 
      return keyName?keyName[id]:""
    },
    // TAB个人/法人
    onAssessmentScope(v){
      if(v == 1){
        this.statList()
      }else{
        this.staffStatList()
      }
    },
    // 目标看齐
    onAssessmentScope1(v){
      if(v == 1){
        this.deptList()
      }else{
        this.staffList()
      }
    },
    onAssessmentScope2(v){
      if(v == 1){
        this.query.assessmentScope = 1
        
      }else{
        this.query.assessmentScope = 2
      }
      this.getData()
    }
  },
  computed: {
    alignmentName:function(){
      const obj = this.options.find(v=>v.value == this.value)
      return obj.label
    }
  },
  data() {
    return {
      activeName: "1",
      type: 1,//目标看板
      type1: 1,//目标对齐
      type2: 1,//目标管理
      dateValue: "1",
      options: [
        {
          value: "absentRate",
          label: "旷工率",
        },
        {
          value: "absenceRate",
          label: "缺卡率",
        },
        {
          value: "lateRate",
          label: "迟到率",
        },
        {
          value: "earlyRate",
          label: "早退率",
        },
        {
          value: "leaveRate",
          label: "请假率",
        },
        {
          value: "turnoverRate",
          label: "离岗率",
        },
        {
          value: "sleepRate",
          label: "睡觉率",
        },
        {
          value: "playPhoneRate",
          label: "玩手机率",
        },
        {
          value: "expireWorkRate",
          label: "办件超期率",
        },
        {
          value: "negaReviewRate",
          label: "差评率",
        },
      ],
      optionsMonths: [
        {
          value: 1,
          label: "1月",
        },
        {
          value: 2,
          label: "2月",
        },
        {
          value: 3,
          label: "3月",
        },
        {
          value: 4,
          label: "4月",
        },
        {
          value: 5,
          label: "5月",
        },
        {
          value: 6,
          label: "6月",
        },
        {
          value: 7,
          label: "7月",
        },
        {
          value: 8,
          label: "8月",
        },
        {
          value: 9,
          label: "9月",
        },
        {
          value: 10,
          label: "10月",
        },
        {
          value: 11,
          label: "11月",
        },
        {
          value: 12,
          label: "12月",
        },
      ],
      value: "lateRate",//默认显示迟到类型
      dataList: [],
      depStatObj:{
        totalScore:{
          x:[],
          y:[]
        },//绩效总分排名
        averageScore:{
          x:[],
          y:[]
        },//绩效平均排名
        totalAddScore:{
          x:[],
          y:[]
        },//加分
        totalSubScore:{
          x:[],
          y:[]
        },//减分
        alignment:{
          x:[],
          y:[]
        },//目标对齐
        pieAddScore:[
          {value:0,name:'考勤绩效'},
          {value:0,name:'评价绩效'},
          {value:0,name:'办件绩效'},
          {value:0,name:'效能绩效'},
          {value:0,name:'投诉绩效'},
          {value:0,name:'其它绩效'},
        ],//部门加分分布
        pieSubScore:[
          {value:0,name:'考勤绩效'},
          {value:0,name:'评价绩效'},
          {value:0,name:'办件绩效'},
          {value:0,name:'效能绩效'},
          {value:0,name:'投诉绩效'},
          {value:0,name:'其它绩效'},
        ]//部门减分分布
      },//按部门
      month:"",//月份
      boardQuery:{
        page:1,
        size:-1,
        year:parseInt(moment().format('YYYY')),
        month:parseInt(moment().format('MM')),
      },//看板查询条件
      query:{
        page:1,
        size:-1,
        assessmentScope:1//考核范围(1.部门,2.个人)
      },//目标管理查询条件
      StatQuery:{
        page:1,
        size:-1,
        year:parseInt(moment().format('YYYY')),
        month:parseInt(moment().format('MM')),
      },//对齐方式入参
      dict:{}//字典
    };
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /deep/.el-tabs__item {
    width: 120px;
    font-size: 14px;
    text-align: center;
  }
  .content {
    width: 100%;
    height: 100%;
    .search_top {
      width: 100%;
      height: 1000%;
      display: flex;
      justify-content: space-between;
    }
    /deep/.el-radio-button {
      width: 150px;
      text-align: center;
      border: 1px solid #eee;
    }
    /deep/.el-radio-button__inner {
      width: 150px;
    }
    /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
      width: 150px;
      border: none;
      background: #1890ff;
      color: #fff;
      border: 1px solid #eee;
    }
    .top {
      width: 100%;
      height: 60px;
    }
    .mid {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .mid_top {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: space-between;
        .jixiaozongfen,
        .jixiaopingjunfen {
          width: 48%;
          height: 100%;
        }
      }
      .mid_down {
        width: 100%;
        height: 380px;
        display: flex;
        justify-content: space-evenly;
        padding-top: 50px;

        .box {
          width: 25%;
          height: 100%;
        }
      }
    }
    .mid_content,
    .bar_content {
      width: 100%;
      height: 700px;
      overflow: hidden;
    }
    .mid_content {
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      .goal_box {
        width: 405px;
        height: 238px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 8px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
        -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
        -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
        margin: 10px 20px 20px 10px;
        padding: 20px;
        .goal_title {
          width: 100%;
          display: flex;
          align-items: center;
          img {
            margin-right: 10px;
          }
        }
        .goal_txt {
          font-family: "微软雅黑", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #666666;
          width: 100%;
          margin: 10px 0;
        }
        .button_box {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
      }
    }
  }
}
</style>
