<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>报表数据</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="hover">
      <!-- 搜索 -->
      <el-form :inline="true" size="small" v-model="listQuery">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="listQuery.createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="dateChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listQuery.type" placeholder clearable>
            <el-option value="1" label="全部"></el-option>
            <el-option value="2" label="品类"></el-option>
            <el-option value="3" label="日保"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" plan @click="getData">查询</el-button>
        </el-form-item>
      </el-form>

      <div class="hello">
        <div id="mainChart"></div>
        <!-- <div id="main2" style="width: 600px;height:400px; margin:0 auto; padding:40px;"></div>
        <div id="main3" style="width: 600px;height:400px; margin:0 auto; padding:40px;"></div>-->
      </div>
    </el-card>
  </div>
</template>

<script>
import Service from "../script/api/service";
export default {
  name: "HelloWorld",
  data() {
    return {
      listQuery: {
        type: "1",
        createTime: ""
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    let token = this.$route.query.token;
    // console.log(token);
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );

    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 7)
    );
    this.listQuery.createTime = [startDate, currentDate];
    this.getData();
    // this.echart1();
    // this.echart2();
    // this.echart3();
  },
  methods: {
      insertLog(requestParm,url){
           // 插入导出日志
         let userInfo= JSON.parse(window.localStorage.getItem("userInfo"));
         Service.$axiosExportLog({
           functionName:'报表统计-报表示例',
           systemName:'报表系统',
           requestParm:JSON.stringify(requestParm),
           requestUrl :process.env.baseUrl +url,
           userId:userInfo.id,
           userName:userInfo.userName
          })
            .then((res) => {
              // console.log('导出日志'+res.data);
 })
            .catch((err) => {
              console.log(err);
            });
    },
    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一个月");
          this.listQuery.createTime = null;
        }
      }
    },
    querySearch() {
      // startTime: !this.isEmptyObjVue(this.listQuery.createTime) ? this.listQuery.createTime[0] + ' 00:00:00' : '',
      // endTime: !this.isEmptyObjVue(this.listQuery.createTime) ? this.listQuery.createTime[1] + ' 23:59:59' : '',
    },
    getData() {
      let params = {
        startTime: !this.isEmptyObjVue(this.listQuery.createTime)
          ? this.listQuery.createTime[0]
          : "",
        endTime: !this.isEmptyObjVue(this.listQuery.createTime)
          ? this.listQuery.createTime[1]
          : "",
        type: this.listQuery.type
      };
      Service.$axiosGetReportData(params).then(res => {
        if (res.data.errno == "0") {
          this.initEchart(res.data.data);
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    initEchart(data) {
      var myChart = this.$echarts.init(document.getElementById("mainChart"));
      let pwaList = data.pwaList;
      pwaList.forEach(item => {
        if (item.type == "line") {
          item.yAxisIndex = 1;
        }
      });
      // 指定图表的配置项和数据
      var colors = ["#5793f3", "#d14a61", "#675bba"];

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        grid: {
          //  top:'20%',
          right: "20%"
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
       title: {
        left: 'center',
        text: '城市工单与人均工时数据图表',
    },
        legend: {
          //     type: 'scroll',
          orient: "vertical",
          right: 0,
          top: 150,
          // bottom: 20,
          data: [
            "工单数-上海",
            "人均工时-上海",
            "工单数-北京",
            "人均工时-北京",
            "工单数-深圳",
            "人均工时-深圳",
            "工单数-南京",
            "人均工时-南京"
          ]
        },
        xAxis: [
          {
            type: "category",
            data: data.timeList,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",

            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            },

            name: "工单数",
            axisLine: {
              show:true,
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: "{value} 个"
            }
          },
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            },
            name: "人均工时",
            axisLine: {
              show:true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: "{value} 小时"
            }
          }
        ],
        series: pwaList
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.crumbs {
  margin: 10px 0;
}
h1,
h2 {
  font-weight: normal;
}
#mainChart {
  width: 900px;
  height: 600px;
  margin: 0 auto;
  padding: 40px;
}
</style>
