<template>
  <div>
    <div class="manager_statistics_box wlj">
      <el-tabs v-model="activeName" type="card"
        ><!-- 奖扣完成情况 -->
        <el-tab-pane label="奖扣完成情况" name="second">
          <el-form :model="condition" :inline="true" ref="formData">
            <!-- 部门 -->
            <el-form-item label="部门">
                <ShowDeptName :deptId.sync="condition.dept_id"></ShowDeptName>
            </el-form-item>

            <!-- 时间 -->
            <el-form-item label="时间">
              <el-date-picker
                class="date-picker-width"
                v-model="condition.month"
                clearable
                width="100%"
                type="month"
                placeholder="请选择月份"
                value-format="yyyy-MM"
              ></el-date-picker>
            </el-form-item>

            <!-- 搜索框 -->
            <el-form-item class="persons_names">
              <el-input
                v-model="condition.keyword"
                placeholder="输入同事姓名"
                max="200"
                @keyup.enter.native="keyWordSelect"
                class="persons_name"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="search_box"
                ></el-button>
              </el-input>
            </el-form-item>

            <!-- 达标选项 -->
            <br />
            <el-form-item>
              <el-checkbox
                v-model="allPass"
                size="medium"
                label="只看全部达标的"
              ></el-checkbox>
            </el-form-item>

            <!-- 导出报表 -->
           <el-form-item>
              <el-button type="primary" plain @click="exportExcel" style="margin-left:20px"  :disabled="deriveDis">导出报表</el-button>
              <!-- <a :href="aherfUrl" ref="aherfClick"></a> -->
            </el-form-item>
          </el-form>

          <el-table :data="last" style="width: 100%" v-loading="loading">
            <el-table-column label="管理者">
              <template slot-scope="scope">
                <userImage
                  class="fl"
                  :id="scope.row.id"
                  :user_name="scope.row.name"
                  :img_url="scope.row.img_url"
                  width="50px"
                  height="50px"
                ></userImage>
                <span
                  style=" margin-left: 10px; line-height: 50px; display: inline-block;"
                  ><WWOpenData
                    type="userName"
                    :openid="scope.row.name"
                  ></WWOpenData
                ></span>
              </template>
            </el-table-column>
            <el-table-column label="奖分" prop="scope_count">
              <template slot-scope="scope">
                <b>{{ scope.row.reward.point }}&nbsp;</b>
                <span
                  :class="scope.row.reward.status == 1 ? 'color_green' : ''"
                  >{{ scope.row.reward.status == 1 ? "达标" : "" }}</span
                ><br />
                <span class="span_h"
                  >奖分目标 {{ scope.row.reward.target }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="扣分" prop="reward_count">
              <template slot-scope="scope">
                <b>{{ scope.row.deduction.point }}&nbsp;</b>
                <span
                  :class="scope.row.deduction.status == 1 ? 'color_green' : ''"
                  >{{ scope.row.deduction.status == 1 ? "达标" : "" }}</span
                ><br />
                <span class="span_h"
                  >扣分目标 {{ scope.row.deduction.target }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="奖扣比例" prop="deduct_count">
              <template slot-scope="scope">
                <div v-if="scope.row.ratio.enable == 1">
                  <b>{{ scope.row.ratio.reward_ratio }}&nbsp;:1 </b>
                  <span
                    :class="scope.row.ratio.status == 1 ? 'color_green' : ''"
                    >{{ scope.row.ratio.status == 1 ? "达标" : "" }}</span
                  ><br />
                  <span class="span_h"
                    >比例目标 小于 {{ scope.row.ratio.target
                    }}<b>:</b>&nbsp;1</span
                  >
                </div>
                <div v-else style="padding-left:21px">—</div>
              </template>
            </el-table-column>
            <el-table-column label="人次目标" prop="deduct_count">
              <template slot-scope="scope">
                <b>{{ scope.row.exec.count }}&nbsp;</b>
                <span
                  :class="scope.row.exec.status == 1 ? 'color_green' : ''"
                  >{{ scope.row.exec.status == 1 ? "达标" : "" }}</span
                ><br />
                <span class="span_h"
                  >人次目标 {{ scope.row.exec.target }}人次</span
                >
              </template>
            </el-table-column>
            <template slot="empty">
              <div class="nopoint_box">
                <div class="noimg noperson"></div>
                <span class="title">没有对应的数据</span>
              </div>
            </template>
          </el-table>

          <center style="padding: 20px 0;">
            <el-pagination
              background
              @size-change="handleSizeChange_xq"
              @current-change="handleCurrentChange_xq"
              :current-page="condition.page"
              layout="total, sizes, prev, pager, next"
              :page-size="condition.page_size"
              :page-sizes="[10, 20, 50, 100]"
              :total="totals"
            ></el-pagination>
          </center>
        </el-tab-pane>

        <el-tab-pane label="奖扣执行对比" name="first">
          <el-form :model="formData" :inline="true" ref="formData">
            <el-form-item label="部门">
                <ShowDeptName :deptId.sync="formData.dept_id"></ShowDeptName>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                class="date-picker-width"
                v-model="formData.month"
                clearable
                width="100%"
                type="month"
                placeholder="请选择月份"
                value-format="yyyy-MM"
              ></el-date-picker>
            </el-form-item>
          </el-form>
          <el-table
            :data="list"
            style="width: 100%"
            v-loading="loading"
            @row-click="open_detail"
          >
            <el-table-column label="管理者">
              <template slot-scope="scope">
                <userImage
                  class="fl"
                  :id="scope.row.id"
                  :user_name="scope.row.name"
                  :img_url="scope.row.img_url"
                  width="50px"
                  height="50px"
                ></userImage>
                <span
                  style=" margin-left: 10px; line-height: 50px; display: inline-block;"
                  ><WWOpenData
                    type="userName"
                    :openid="scope.row.name"
                  ></WWOpenData
                ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="管理范围(人)"
              prop="scope_count"
            ></el-table-column>
            <el-table-column
              label="人均奖分(次)"
              prop="reward_count"
            ></el-table-column>
            <el-table-column
              label="人均扣分(次)"
              prop="deduct_count"
            ></el-table-column>
            <template slot="empty">
              <div class="nopoint_box">
                <div class="noimg noperson"></div>
                <span class="title">没有对应的数据</span>
              </div>
            </template>
          </el-table>

          <center style="padding: 20px 0;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formData.page"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next"
              :page-size="formData.page_size"
              :total="total"
            ></el-pagination>
          </center>

          <el-drawer
            size="500px"
            :visible.sync="detail_show"
            :with-header="false"
            direction="rtl"
          >
            <el-button type="info" style="position: absolute; left: -100px;"
              >test</el-button
            >
            <div class="drawer_title">
              <WWOpenData type="userName" :openid="item.name"></WWOpenData
              >的奖扣统计
              <el-tooltip placement="top">
                <div slot="content" style="width: 300px">
                  作为管理者，管理执行力是关键，每月按要求完成奖分和扣分任务。
                </div>
                <span class="tips">?</span>
              </el-tooltip>
            </div>
            <div class="chart_content">
              <el-row
                :gutter="20"
                v-if="personalData !== null"
                v-loading="personalData_loading"
              >
                <el-col :span="4">
                  <div class="dataItem">
                    <p class="point">{{ personalData.task.reward.point }}</p>
                    <p>奖分</p>
                    <p class="target">
                      目标{{ personalData.task.reward.target_point }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="dataItem">
                    <p class="point">{{ personalData.task.deduction.point }}</p>
                    <p>扣分</p>
                    <p class="target">
                      目标{{ personalData.task.deduction.target_point }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="dataItem">
                    <p class="point">{{ personalData.task.ratio.ratio }}:1</p>
                    <p>奖扣比例</p>
                    <p class="target">
                      目标≤{{ personalData.task.ratio.target_ratio }}:1
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="dataItem">
                    <p class="point">{{ personalData.task.exec.count }}</p>
                    <p>奖扣人次</p>
                    <p class="target">
                      目标{{ personalData.task.exec.target_count }}
                    </p>
                  </div>
                </el-col>
              </el-row>

              <div class="chart-legend__wrap">
                <span class="fl">月奖扣执行情况</span>
                <span class="chart-legend__pink">奖分</span>
                <span class="chart-legend__green">扣分</span>
              </div>
              <div
                id="situationChart"
                v-loading="echart_loading"
                style="height: 300px;"
              ></div>

              <div class="chart-legend__wrap">
                <div class="fl">月奖扣人次</div>
                <span class="chart-legend__pink">奖分人次</span>
                <span class="chart-legend__green">扣分人次</span>
              </div>
              <div
                id="passengersChart"
                v-loading="echart_loading"
                style="height: 300px;"
              ></div>
            </div>
          </el-drawer>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import ECharts from "echarts";
export default {
  data() {
    return {
      last: [],
      dept_trees: [],
      //完成情况
      condition: {
        month: this.$moment().format("YYYY-MM"), //时间
        page: 1, //当前页
        page_size: 10, //每页数量
        dept_id: 0, //部门id
        keyword: "", //关键字
        complete: "" //是否达标 1是
      },
      activeName: "second",
      totals: null,
      dept_name_xq_xq: "",

      //对比
      loading: false,
      choose_time: "",
      input: "",
      radio: "1",
      formData: {
        // employee_id:"",
        month: this.$moment().format("YYYY-MM"),
        page: 1,
        page_size: 10,
        dept_id: 0
        // complete:'0',
      },
      total: null,
      allPass: false,
      list: [],
      detail_show: false,
      echart_loading: false,
      item: {},
      dept_name_xq: "",
      dept_tree: [],
      personalData_loading: false,
      personalData: null,
      toPdept: 0,
      toPdepts: 0,

      deriveJobId: "",
      deriveJobIf: 0,
      deriveDis: false,
      aherfUrl: ""
    };
  },
  watch: {
    //对比
    "formData.month"(val, old_val) {
      this.formData.page = 1;
      this.get_list();
    },
    //情况
    "condition.month"(val, old_val) {
      this.condition.page = 1;
      this.get_last();
    },
    //查看全部达标
    allPass(val, old_val) {
      if (val) {
        this.condition.complete = "1";
      } else {
        this.condition.complete = "0";
      }
      this.condition.page = 1;
      this.get_last();
    },
    'condition.dept_id'(){
      this.condition.page = 1;
      this.get_last();
    },
    'formData.dept_id'(){
        this.formData.page = 1;
        this.get_list();
    }
  },
  methods: {
    //情况
    get_last() {
      this.loading = true;
      this.$http("get","/api/integral/statistics/prize/list",this.condition, "v4").then(res => {
        if (res.data.code == 1) {
          this.last = res.data.data.list;
          this.totals = res.data.data.total;
        } else {
          this.$message.error(res.data.data.msg);
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    //搜索框
    search_box() {
      this.get_last();
    },
    downloadResult() {
      if (this.deriveJobIf < 5) {
        this.$http("get", "/api/download/result", {
          job_id: this.deriveJobId
        }).then(res => {
          if (res.data.code == 1) {
            this.aherfUrl = res.data.data.url;
            this.deriveJobId = "";
            this.deriveDis = false;
            this.$nextTick(() => {
              this.$refs.aherfClick.click();
            });
          } else {
            setTimeout(() => {
              this.deriveJobIf++;
              this.downloadResult();
            }, 3000);
          }
        });
      } else {
        this.deriveJobIf = 0;
        this.deriveJobId = "";
        this.deriveDis = false;
        this.aherfUrl = "";
        this.$message.warning("导出超时");
      }
    },
    //导出报表
    exportExcel() {
      let params = {
        employee_id: this.$userInfo().id,
        month: this.condition.month,
        dept_id:this.condition.dept_id||0,
        keyword:this.condition.keyword,
        complete:this.condition.complete
      };
      this.$downloadFile('api/download/prize/list/v4',params,this.$route.path);
    },
    //分页选择显示多少条
    handleCurrentChange_xq(val) {
      this.condition.page = val;
      this.get_last();
    },
    //分页
    handleSizeChange_xq(val) {
      this.condition.page_size = val;
      this.get_last();
    },

    handleSizeChange(val) {
      this.formData.page_size = val;
      this.get_list();
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.get_list();
    },

    get_list() {
      this.loading = true;
      this.$http("get","/api/integral/statistics/prize/list", this.formData,"v3").then(res => {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
      }).finally(() => {
        this.loading = false;
      });
    },
    search() {
      this.get_list();
    },
    open_detail(row, column, event) {
      this.detail_show = true;
      this.item = row;
      this.$nextTick(() => {
        this.situationChart = ECharts.init(
          document.getElementById("situationChart")
        );
        this.passengersChart = ECharts.init(
          document.getElementById("passengersChart")
        );
      });
      this.getData(() => (this.echart_loading = false));
      this.getDataV1(() => (this.personalData_loading = false));
    },
    getChartOption(xAxisData, rewardData, deductionData) {
      return {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          containLabel: true,
          top: "4%",
          right: "4%",
          bottom: "5%",
          left: "7%"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: { lineStyle: { color: "#eee" } },
          axisLabel: { color: "#333" },
          data: xAxisData
        },
        yAxis: {
          position: "right",
          axisLine: { lineStyle: { color: "#eee" } },
          axisLabel: { color: "#333" },
          type: "value",
          splitLine: { lineStyle: { color: "#eee" } }
        },
        series: [
          {
            name: "奖分",
            type: "line",
            data: rewardData,
            lineStyle: { normal: { color: "#F56C6C" } }
          },
          {
            name: "扣分",
            type: "line",
            data: deductionData,
            lineStyle: { normal: { color: "#53B87F" } }
          }
        ]
      };
    },
    // v2
    getData(callBack) {
      this.echart_loading = true;
      const data = {
        employee_id: this.item.id || 0,
        month: this.formData.month
      };
      this.$http("get", "/api/integral/statistics/prize", data).then(res => {
            const item = res.data.data;
            this.employeeName = item.name;
            const deduct = item.chart.deduct;
            const situationRewardData = [];
            const situationDeductionData = [];
            const passengersRewardData = [];
            const passengersDeductionData = [];

            const xAxisData = item.chart.reward.map((o, i) => {
              // 降分分数
              situationDeductionData.push(item.chart.reward[i].point);
              // 扣分分数
              passengersDeductionData.push(item.chart.deduct[i].point);
              // 奖分次数
              situationRewardData.push(item.chart.reward[i].count);
              // 扣分次数
              passengersRewardData.push(item.chart.deduct[i].count);
              return o.date;
            });
            this.situationChart.setOption(
              this.getChartOption(
                xAxisData,
                situationDeductionData,
                passengersDeductionData
              )
            ); //奖分数值、扣分数值
            this.passengersChart.setOption(
              this.getChartOption(
                xAxisData,
                situationRewardData,
                passengersRewardData
              )
            ); //月奖扣人次
        }).finally(() => {
          this.echart_loading = false;
        });
    },
    getDataV1(callBack) {
      this.personalData_loading = true;
      const data = {
        employee_id: this.item.id || 0,
        month: this.formData.month
      };
      this.$http("get", "/api/integral/statistics", data).then(res => {
          this.personalData = res.data.data;
      }).finally(() => {
        this.personalData_loading = false;
      });
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    }
  },
  mounted() {
    if (localStorage.getItem("dept_tree")) {
      this.dept_tree = this.getTreeData(
        JSON.parse(localStorage.getItem("dept_tree"))
      );
      this.dept_trees = this.getTreeData(
        JSON.parse(localStorage.getItem("dept_tree"))
      );
    }

    this.get_list();
    this.get_last();
  }
};
</script>
<style scoped lang="scss">
.search_box {
  /deep/ button:active {
    background: #26a2ff;
  }
  /deep/ button:active .el-icon-search {
    color: #fff;
  }
}
.date-picker-width {
  width: 100% !important;
}
.color_green {
  color: #67c23a;
}
.nopoint_box {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}
.noimg {
  display: inline-block;
  width: 110px;
  height: 110px;
  margin: 22px auto 16px;
  /* background:url(/images/nodata_default.png) no-repeat center; */
  background-size: 99%;
}
.noperson {
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: none;
  margin: 22px auto 16px;
  background: url(/images/noperson_default.png) no-repeat center;
  background-size: 99%;
}
.title {
  display: block;
  text-align: center;
  font-size: 12px !important;
  line-height: 30px;
  color: #909399 !important;
  padding: 0;
}
.nopoint_box a {
  color: #26a2ff;
}
.chart_content {
  height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  .chart-legend__wrap {
    text-align: right;
    padding: 20px;
    padding-right: 50px;
    & .chart-legend__pink {
      position: relative;
      padding-left: 12px;
      padding-right: 5px;
      &:after {
        content: "";
        position: absolute;
        margin-top: -2px;
        top: 35%;
        left: 0;
        width: 8px;
        height: 8px;
        background: #f56c6c;
        border-radius: 100%;
      }
    }

    & .chart-legend__green {
      position: relative;
      padding-left: 12px;
      &:after {
        content: "";
        position: absolute;
        margin-top: -2px;
        top: 35%;
        left: 0;
        width: 8px;
        height: 8px;
        background: #53b87f;
        border-radius: 100%;
      }
    }
  }
}

// 滚动条样式
.chart_content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgb(255, 255, 255);
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
}
.chart_content::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(201, 201, 201, 0);
}
.chart_content::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
  background-color: rgb(168, 167, 167);
}

.dataItem {
  text-align: center;
  .point {
    font-size: 22px;
    color: #26a2ff;
    margin: 10px 0;
  }
  .target {
    font-size: 12px;
    color: #909399;
  }
}
.drawer_title {
  font-size: 18px;
  padding: 20px;
}
.manager_statistics_box {
  background-color: #ffffff;
  padding: 20px;
  min-height: calc(100vh - 160px);
  /deep/ .el-row .el-checkbox .el-checkbox__label {
    line-height: 20px;
  }
}
.tips {
  background: #409eff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}
.el-form-item__label {
  width: 0px !important;
}

// .persons_names{
// 	margin-left: 160px;
// }
.wlj {
  & .color_green {
    color: #49d3a7;
  }
  & .color_red {
    color: #f04b56;
  }
}
b {
  font-size: 14px;
}
.span_h {
  font-size: 13px;
  color: #898c94;
}
</style>
