<!--
 * @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 {cstj, exportCstj} from "@/api/tjfx.js";
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: [],
      data2: [],
      data3: [],
      selectDate : {
        startAt:'2020-01-03 02:57:57',
        endAt:'2025-01-03 02:57:57'
      },
      xAxisData: [

      ],
    };
  },
  mounted() {
    this.setdata();

  },
  methods: {

    cstj () {
      cstj(this.selectDate).then(res => {
        if (res.code == 200) {
          let dataSource = res.result;
          if (dataSource != null) {
            this.xAxisData = dataSource.map(item => item.assignee)
            this.data1 = dataSource.map(item => item.total)
            this.data2 = dataSource.map(item => item.count)
            this.data3 = dataSource.map(item => item.cumulativeTimeout)
          }
          console.log(this.xAxisData)
          console.log(this.data1)
          console.log(this.data2)
          console.log(this.data3)
          // 创建一个 ECharts 实例
          this.chart = echarts.init(this.$refs.chart);
          // 在 ECharts 实例中配置图表
          this.chart.setOption(this.getOption());
        }
      })
    },

    setdata() {
      this.chooseDateQuick(7)
      this.cstj()
    },
    // 导出
    derive() {
      exportCstj(this.selectDate).then(res => {
        const link=document.createElement("a");
        let blob=new Blob([res], { type: "application/vnd.ms-excel" }); //类型excel
        link.style.display="none";
        link.href=URL.createObjectURL(blob);
        link.setAttribute("download", this.dateRange[0]+'~'+ this.dateRange[1] +'超时统计');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
    // 查询
    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) => {
            if (params.seriesName == '超时时间') {
              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>`;
            }
            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))
        );
      }
      this.selectDate.startAt = this.dateRange[0] + " 00:00:00"
      this.selectDate.endAt = this.dateRange[1] + " 00:00:00"
      this.cstj()
    },
    // 日期范围选择器事件
    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>