<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">
              <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="dateValue"
                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="'绩效总分'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="jixiaopingjunfen">
                <line-charts
                  :title="'绩效平均分排名'"
                  :id="'jixiaopingjunfen'"
                  :legendName="'绩效平均分'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
            </div>
            <div class="mid_down">
              <div class="top_10 box">
                <bar-charts
                  :title="'部门加分排名TOP10'"
                  :id="'top_10'"
                  :legendName="'部门加分分值'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="jiafen box">
                <pie-charts
                  :title="'部门加分整体分布'"
                  :id="'jiafen'"
                  :legendName="'部门加分'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="koufen_10 box">
                <bar-charts
                  :title="'部门扣分排名TOP10'"
                  :id="'koufen_10'"
                  :legendName="'部门扣分分值'"
                  :styleObj="{ width: '100%', height: '300px' }"
                />
              </div>
              <div class="koufen box">
                <pie-charts
                  :title="'部门扣分整体分布'"
                  :id="'koufen'"
                  :legendName="'部门扣分'"
                  :styleObj="{ width: '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="type">
              <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" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="dateValue"
                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="bar_content">
            <bar-charts
              :title="
                `${type == 1 ? '各部门' : '个人'}${dateValue}月旷工率对齐情况`
              "
              :id="'bar_content'"
              :legendName="'旷工率'"
              :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="type">
              <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">
            <div class="goal_box" v-for="(val, i) in dataList" :key="i">
              <div class="goal_title">
                <img src="../../../../assets/images/u17641.svg" alt="" />
                <span>
                  旷工率不高于10%
                </span>
              </div>
              <p class="goal_txt">
                <span>{{ type == 1 ? "目标部门：" : "目标个人：" }}</span
                ><span>{{
                  type == 1 ? "全部部门" : "张三、李四、王武、陈真"
                }}</span>
              </p>
              <p class="goal_txt">
                <span>周期：</span><span>2023年/全年</span>
              </p>
              <p class="goal_txt">
                <span>负责人：</span><span>张三、李四、王武 </span>
              </p>
              <p class="goal_txt">
                <span>最近更新：</span><span>2023-05-11 10:00:00</span>
              </p>
              <p class="goal_txt"><span>更新人员：</span><span>言若海</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";

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

  created() {
    this.getData();
  },
  methods: {
    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").then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.dataList = res.data.data;
        } else {
          this.dataList = [];
        }
      });
    },
  },
  data() {
    return {
      activeName: "1",
      type: "1",
      dateValue: "1",
      options: [
        {
          value: "1",
          label: "旷工率",
        },
        {
          value: "2",
          label: "缺卡率",
        },
        {
          value: "3",
          label: "迟到率",
        },
        {
          value: "4",
          label: "早退率",
        },
        {
          value: "5",
          label: "请假率",
        },
        {
          value: "6",
          label: "离岗率",
        },
        {
          value: "7",
          label: "睡觉率",
        },
        {
          value: "8",
          label: "玩手机率",
        },
        {
          value: "9",
          label: "办件超期率",
        },
        {
          value: "10",
          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: "",
      dataList: [],
    };
  },
};
</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: 0 20px 20px 0;
        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>
