<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="'部门加分分值'" @click="rowClick" :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="'部门分值'" @click="rowClickSub" :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
          this.depStatObj.totalAddScore.row = row
        }
      });
      // 减分
      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()
    },
    rowClick(row) {
      const { dataIndex } = row
      const {attendScoreAdd,reviewScoreAdd,goworkScoreAdd,effectScoreAdd,otherScoreAdd,complainScoreAdd} =  this.depStatObj.totalAddScore.row[dataIndex]
      this.depStatObj.pieAddScore = [
        { value: attendScoreAdd, name: '考勤绩效' },
        { value: reviewScoreAdd, name: '评价绩效' },
        { value: goworkScoreAdd, name: '办件绩效' },
        { value: effectScoreAdd, name: '效能绩效' },
        { value: complainScoreAdd, name: '投诉绩效' },
        { value: otherScoreAdd, name: '其它绩效' },
      ]
    },
    // 减分top10
    rowClickSub(row) {
      const { dataIndex } = row
      const {attendScoreSub,reviewScoreSub,goworkScoreSub,effectScoreSub,complainScoreSub,otherScoreSub} =  this.depStatObj.totalAddScore.row[dataIndex]
      this.depStatObj.pieSubScore = [
        { value: attendScoreSub, name: '考勤绩效' },
        { value: reviewScoreSub, name: '评价绩效' },
        { value: goworkScoreSub, name: '办件绩效' },
        { value: effectScoreSub, name: '效能绩效' },
        { value: complainScoreSub, name: '投诉绩效' },
        { value: otherScoreSub, name: '其它绩效' },
      ]
    }
  },
  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>
