<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-25 08:59:04
-->
<template>
  <div class="tjltj">
    <div class="inquire">
      <el-form :model="queryForm" ref="queryForm" label-width="100px">
        <el-row>
          <el-col :span="19">
            <div class="rowAc">
              <div
                v-for="(item, index) in dateQuickSelection"
                :key="index"
                class="rowAc dateQuickItem"
                @click="chooseDateQuick(index)"
              >
                {{ item.name }}
              </div>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
                start-placeholder="开始日期"
                :clearable="false"
                range-separator="-"
                class="dataRangePicker"
                @change="chooseDateRange"
              ></el-date-picker>
            </div>
          </el-col>

          <el-col :span="5" class="btnColRight">
            <el-form-item>
              <el-button type="primary" native-type="submit" @click="chchch"
                >查询</el-button
              >
              <el-button type="primary" native-type="submit" @click="derive"
                >导出</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="chart" style="width: 100%; height: 92%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import XLSX from "xlsx";
export default {
  components: {},
  data() {
    return {
      dateQuickSelection: [
        // 日期快捷选择列表
        { code: "1", name: "今日" },
        { code: "2", name: "昨日" },
        { code: "3", name: "本周" },
        { code: "4", name: "上周" },
        { code: "5", name: "本月" },
        { code: "6", name: "上月" },
        { code: "7", name: "今年" },
        { code: "8", name: "去年" },
      ],
      chooseIndex: 0, // 日期快捷选择项索引
      dateRange: [], // 自定义列表 - 日期范围
      queryForm: {},
      data1: [12, 10, 15, 12, 15, 19, 15],
      data2: [1, 2, 2, 3, 2, 3, 2],
      data3: [],
      xAxisData: [
        "赵龙龙",
        "刘刚",
        "任启亮",
        "梁亚博",
        "李含",
        "周路",
      ],
    };
  },
  mounted() {
    this.setdata();
    // 创建一个 ECharts 实例
    this.chart = echarts.init(this.$refs.chart);
    // 在 ECharts 实例中配置图表
    this.chart.setOption(this.getOption());
    this.chooseDateQuick(0);
  },
  methods: {
    setdata() {
      for (let i = 0; i < this.data1.length; i++) {
        let sum = (this.data2[i] / this.data1[i]) * 100;
        this.data3.push(Number(sum).toFixed(0));
      }
    },
    // 导出
    derive() {
      this.exdata = [["受理人员", "收件数", "退件数", "推荐率"]];
      this.xAxisData.forEach((item, index) => {
        console.log("this.exdata[index+1]", this.exdata[index + 1]);
        this.exdata.push([]);
        this.exdata[index + 1].push(item);
        this.exdata[index + 1].push(this.data1[index]);
        this.exdata[index + 1].push(this.data2[index]);
        this.exdata[index + 1].push(this.data3[index]);
      });
      console.log("this.exdata", this.exdata);
      const ws = XLSX.utils.aoa_to_sheet(this.exdata);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      XLSX.writeFile(wb, "收件与超时统计情况.xlsx");
    },
    // 查询
    chchch() {
      console.log("dateRange", this.dateRange);
    },
    getOption() {
      return {
        title: {
          text: "收件与超时统计情况 ", // 主标题名称

          textStyle: {
            //主标题文本设置
            fontSize: 26, //大小
          },

          itemGap: 3, //主副标题间距
          x: "center", //主副标题的水平位置
          y: "top", //主副标题的垂直位置
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 14,
            lineHeight: 22,
          },
          // 如果需要自定义 tooltip样式，需要使用formatter
          formatter: (params) => {
            console.log("paramsssssssssssssssssss", params);
            return `<div font-size: 14px;line-height: 24px>
                  ${params.seriesName}
                 <br>
              <span  font-size: 16px; font-weight: 600;">  ${params.name}:  ${
              Number(params.value).toFixed(2) + "%"
            }  </span>


              </div>`;
          },
        },

        legend: {
          data: ["办件数", "超时数", "超时时间"],
          bottom: "3%",
          itemWidth: 20,
          itemHeight: 20,
          //文字样式
          textStyle: {
            fontSize: 17, //设置文字大小
          },
        },
        grid: [{ right: "3%", top: "10%", bottom: "15%", left: "3%" }],
        color: ["#94ae0a", "#115fa6", "#a61120"],
        xAxis: {
          data: this.xAxisData,
          axisLabel: {
            // 轴文字
            fontSize: 18,
          },
        },
        yAxis: {
          axisLabel: {
            // 轴文字
            fontSize: 18,
          },
        },
        series: [
          {
            name: "办件数",
            type: "bar",
            data: this.data1,
            label: {
              normal: {
                show: true,
                fontSize: 13,
                position: "top",
              },
            },
          },
          {
            name: "超时数",
            type: "bar",
            data: this.data2,
            label: {
              normal: {
                show: true,
                fontSize: 13,
                position: "top",
              },
            },
          },
          {
            name: "超时时间",
            type: "bar",
            data: this.data3,
            label: {
              normal: {
                show: true,
                fontSize: 13,
                position: "top",
              },
            },
          },
        ],
      };
    },
    // 日期快捷选择事件
    chooseDateQuick(index) {
      this.chooseIndex = index;
      var tempCode = this.dateQuickSelection.find(
        (ele) => this.chooseIndex === Number(ele.code) - 1
      ).code;
      var tempDate = new Date();
      var year = tempDate.getFullYear();
      var month = tempDate.getMonth();
      var day = tempDate.getDate();
      var week = tempDate.getDay();
      this.dateRange = [];
      if (tempCode === "1") {
        // 今日
        this.dateRange.push(
          this.formatDate(tempDate),
          this.formatDate(tempDate)
        );
      } else if (tempCode === "2") {
        // 昨日
        this.dateRange.push(
          this.jumpNumDay(tempDate, -1, "-"),
          this.jumpNumDay(tempDate, -1, "-")
        );
      } else if (tempCode === "3") {
        // 本周
        this.dateRange.push(
          this.formatDate(new Date(year, month, day - week + 1)),
          this.formatDate(tempDate)
        );
      } else if (tempCode === "4") {
        // 上周
        this.dateRange.push(
          this.formatDate(new Date(year, month, day - week - 6)),
          this.formatDate(new Date(year, month, day - week))
        );
      } else if (tempCode === "5") {
        // 本月
        this.dateRange.push(
          this.formatDate(new Date(year, month, 1)),
          this.formatDate(tempDate)
        );
      } else if (tempCode === "6") {
        // 上月
        this.dateRange.push(
          this.formatDate(new Date(year, month - 1, 1)),
          this.formatDate(new Date(year, month, 0))
        );
      } else if (tempCode === "7") {
        // 今年
        this.dateRange.push(
          this.formatDate(new Date(year, 0, 1)),
          this.formatDate(tempDate)
        );
      } else if (tempCode === "8") {
        // 去年
        this.dateRange.push(
          this.formatDate(new Date(year - 1, 0, 1)),
          this.formatDate(new Date(year - 1, 11, 31))
        );
      }
    },
    // 日期范围选择器事件
    chooseDateRange() {
      this.chooseIndex = null;
    },
    // 数字转换
    changeNum(num) {
      if (num >= 10) {
        return num;
      } else {
        return "0" + num;
      }
    },
    // 格式化日期
    formatDate(date) {
      var year = date.getFullYear();
      var month = this.changeNum(date.getMonth() + 1);
      var day = this.changeNum(date.getDate());
      return `${year}-${month}-${day}`;
    },
    // 某日期向前/向后num天
    jumpNumDay(date, num, linkStr = "-") {
      date = new Date(date.getTime() + num * 24 * 60 * 60 * 1000);
      return (
        date.getFullYear() +
        linkStr +
        this.changeNum(date.getMonth() + 1) +
        linkStr +
        this.changeNum(date.getDate())
      );
    },
  },
};
</script>
<style scoped lang="scss">
.tjltj {
  width: 100%;
  height: 100%;
  .inquire {
    width: 100%;
    height: 40px;
    padding-top: 3px;
    background-color: #ffffff;
    margin-bottom: 10px;
  }
  .rowAc {
    margin-left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .dateQuickItem {
    padding: 1px 8px;
    margin-right: 16px;
    color: #3c4353;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    border: 1px solid #dcdee0;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
  }
  .dateQuickItem:hover,
  .dateQuickItem.active {
    color: #1b58f4;
    border: 1px solid #1b58f4;
  }
  .dateQuickItem.disabled {
    color: #c8c9cc;
    border: 1px solid #dcdee0;
    background: #f7f8f9;
    cursor: not-allowed; // 禁止鼠标事件
  }
  .dataRangePicker {
    width: 240px !important;
    height: 32px !important;
  }
  .dataRangePicker.el-date-editor .el-range-separator {
    line-height: 24px;
  }
  .dataRangePicker.el-date-editor .el-range__icon {
    margin-left: 0px;
    line-height: 24px;
  }
  .dataRangePicker.el-date-editor .el-range-input {
    width: 95px;
  }
}
</style>