<template>
  <section class="report-container">
    <!-- <template>
      <el-row class="export-wrap">
        <el-button @click="exportDialogVisable = true">导出报表</el-button>
      </el-row>
    </template> -->

    <!-- 概览标题 -->
    <div class="title mb20">概览</div>
    <!-- basicOverview 基础概览 -->
    <template>
      <el-row :gutter="20" class="base-overview">
        <el-col :span="6">
          <div class="base-overview-item">
            <div class="num-wrap">
              <div>
                <span class="num1">{{dairyBasicOverview.pv}}</span>
                <span class="num3"> / {{basicOverview.pv}}</span>
              </div>
              <div class="num2">PV
                <span class="num4">(今日/总量)</span>
              </div>
            </div>
            <div class="icon-wrap">
              <i class="fa fa-users fa-2x" aria-hidden="true"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="base-overview-item">
            <div class="num-wrap">
              <div>
                <span class="num1">{{dairyBasicOverview.uv}}</span>
                <span class="num3"> / {{basicOverview.uv}}</span>
              </div>
              <div class="num2">UV
                <span class="num4">(今日/总量)</span>
              </div>
            </div>
            <div class="icon-wrap">
              <i class="fa fa-user fa-2x" aria-hidden="true"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="base-overview-item">
            <div class="num-wrap">
              <div>
                <span class="num1">{{dairyBasicOverview.prizeWin}}</span>
                <span class="num3"> / {{basicOverview.prizeWin}}</span>
              </div>
              <div class="num2">奖品派发
                <span class="num4">(今日/总量)</span>
              </div>
            </div>
            <div class="icon-wrap">
              <i class="fa fa-gift fa-2x" aria-hidden="true"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="base-overview-item">
            <div class="num-wrap">
              <div>
                <span class="num1">{{dairyBasicOverview.intercept}}</span>
                <span class="num3"> / {{basicOverview.intercept}}</span>
              </div>
              <div class="num2">拦截数量
                <span class="num4">(今日/总量)</span>
              </div>
            </div>
            <div class="icon-wrap">
              <i class="fa fa-exclamation-triangle fa-2x" aria-hidden="true"></i>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 奖品和拦截概述 -->
      <el-row :gutter="20" class="pi-overview">
        <!-- 奖品概述 -->
        <el-col :span="12">
          <div class="pi-overview-item">
            <el-table :data="prizeOverview" highlight-current-row max-height="528" style="width: 100%;" :header-cell-style="{color:'#475669',fontWeight:'bold'}">
              <el-table-column prop="key" label="派奖 详情" width="200">
              </el-table-column>
              <el-table-column prop="dairyTotal" label="派发量 (今日/总量)" min-width="180" align="right" header-align="right">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <!-- 拦截概述 -->
        <el-col :span="12">
          <div class="pi-overview-item">
            <el-table :data="interceptOverview" highlight-current-row max-height="528" style="width: 100%;" :header-cell-style="{color:'#475669',fontWeight:'bold'}">
              <el-table-column prop="key" label="拦截 详情" width="200">
              </el-table-column>
              <el-table-column prop="dairyTotal" label="拦截次数 (今日/总量)" min-width="180" align="right" header-align="right">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </template>

    <!-- 省市 和 手机类型 -->
    <template>
      <el-row :gutter="20" class="pi-overview">
        <!-- 奖品概述 -->
        <el-col :span="12">
          <div class="pi-overview-item">
            <div class="tit">省级数据分布</div>
            <div class="map-wrap">
              <div id="chartProvince" style="width:90%; height:400px;"></div>
              <div class="map-aside-wrap">
                <div v-for="(item,idx) in this.provinceOverview" :key="idx">
                  {{item.key}} : {{item.size}}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 拦截概述 -->
        <el-col :span="12">
          <div class="pi-overview-item">
            <div class="tit">用户设备top10</div>
            <div id="chartMobileBrand" style="width:100%; height:400px;"></div>
          </div>
        </el-col>
      </el-row>
    </template>

    <div class="title mb20">历史趋势</div>

    <!-- 表格 -->
    <template>
      <div class="block mb20">
        <div>
          <el-date-picker :picker-options="pickerOptions" v-model="selDate" @change="dateChangeHandler" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>

          <div class="date-button-wrap">
            <div>
              <el-button @click="setLastDateTime(7)">近一周</el-button>
              <el-button @click="setLastDateTime(30)">近30天</el-button>
            </div>
          </div>
        </div>
        <div>
          <el-button @click="exportDialogVisable = true">导出报表</el-button>
        </div>
      </div>

      <!-- echart表格 折线图 -->
      <template>
        <el-row>
          <el-col :span="24">
            <div id="chartLine" style="width:100%; height:400px;"></div>
          </el-col>
        </el-row>
      </template>
    </template>

    <template>
      <el-dialog title="导出报表" :visible.sync="exportDialogVisable" :close-on-click-modal="false">
        <div class="block2 mb20">
          <el-date-picker class="mb20" :picker-options="pickerOptions" v-model="selDate" @change="dateChangeHandler" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
          <div class="date-button-wrap-2 mb20">
            <el-button @click="setLastDateTime(7)">近一周</el-button>
            <el-button @click="setLastDateTime(30)">近30天</el-button>
          </div>
          <div class="export-tips">*导出明细不含当日数据</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="exportDialogVisable = false">取消</el-button>
          <el-button type="primary" @click.native="exportReport">导出</el-button>
        </div>
      </el-dialog>

    </template>

  </section>
</template>

<script>
import {
  getStatView,
  getStatDashboardList,
  getStatViewDump
} from "./../../api/api.js";
import { formatDate } from "./../../common/utils.js";
import echarts from "echarts";
import chinaJson from "./../../assets/echarts/map/china.json";

export default {
  data() {
    return {
      exportDialogVisable: false,
      basicOverview: {}, //基本概述
      prizeOverview: [], //奖品概述
      interceptOverview: [], //拦截概述
      dairyBasicOverview: [], //当日基本概述
      dairyPrizeOverview: [], //当日奖品概述
      dairyInterceptOverview: [], //当日拦截概述
      provinceOverview: [],
      cityOverview: [],
      mobileBrandOverview: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 3600 * 1000 * 24 * 1;
        },
        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 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      selDate: [],
      lastQueryDate: 7, //默认请求的日期
      chartLine: null, //折线图对象
      chartProvince: null, //省柱状图
      chartMobileBrand: null //设备柱状图
    };
  },
  methods: {
    // 导出报表
    exportReport() {
      if (this.selDate && this.selDate[0] && this.selDate[1]) {
        let code = this.$route.query.code;
        let parm = {
          appCode: code,
          start: this.selDate[0],
          end: this.selDate[1]
        };
        getStatViewDump(parm).then(res => {});
      }
    },
    // 日期选择变更
    dateChangeHandler() {
      this.reqGetStatDashboardList();
    },
    // 请求趋势列表
    reqGetStatDashboardList() {
      if (this.selDate && this.selDate[0] && this.selDate[1]) {
        let code = this.$route.query.code;
        let parm = {
          appCode: code,
          start: this.selDate[0],
          end: this.selDate[1]
        };
        getStatDashboardList(parm).then(res => {
          let { code, content } = res;
          if (code == 200 && content) {
            this.setChartLineData(content);
          }
          // else if (code == 404) {
          //   this.$router.push({
          //     path: "/login"
          //   });
          // }
        });
      }
    },
    // 省图表数据
    setChartProvinceData() {
      let xAxisData = [];
      let seriesData = [];
      let unknowIndex = -1;
      this.provinceOverview.forEach((element, idx) => {
        xAxisData.push(element.key);
        seriesData.push(element.size);
        if (element.key == "未知") {
          unknowIndex = idx;
        }
      });
      if (unknowIndex >= 0) {
        let unknowKey = xAxisData.splice(unknowIndex, 1);
        xAxisData.push(unknowKey[0]);
        let unknowSize = seriesData.splice(unknowIndex, 1);
        seriesData.push(unknowSize[0]);
      }

      this.chartProvince.setOption({
        title: { text: "" },
        tooltip: {},
        xAxis: {
          data: xAxisData
        },
        yAxis: {},
        series: [
          {
            name: "总量",
            type: "bar",
            data: seriesData
          }
        ]
      });
    },
    //获取地图热度
    setMapHeat() {
      let max = 0;
      let seriesData = [];
      this.provinceOverview.forEach(element => {
        let tempSeriesData = {
          name: element.key,
          value: element.size
        };

        if (element.size > max && element.key != "未知") {
          max = element.size;
        }
        seriesData.push(tempSeriesData);
      });
      // 海南诸岛
      seriesData.push({
        name: "南海诸岛",
        value: 0,
        itemStyle: { normal: { opacity: 1 } }
      });
      echarts.registerMap("china", chinaJson);
      this.chartProvince.setOption({
        dataRange: {
          min: 0,
          max: max,
          x: "center",
          y: "bottom",
          // text: ['高', '低'],           // 文本，默认为数值文本
          calculable: true,
          orient: "horizontal"
        },
        series: [
          {
            type: "map",
            mapType: "china",
            // roam: false,
            itemStyle: {
              // normal:{label:{show:true}},
              // emphasis:{label:{show:true}}
            },
            data: seriesData
          }
        ]
      });
    },
    // 设备图表数据
    setChartMobileBrandData() {
      let xAxisData = [];
      let seriesData = [];
      let unknowIndex = -1;
      this.mobileBrandOverview.forEach((element, idx) => {
        xAxisData.push(element.key);
        seriesData.push(element.size);
        if (element.key == "其他") {
          unknowIndex = idx;
        }
      });
      if (unknowIndex >= 0) {
        let unknowKey = xAxisData.splice(unknowIndex, 1);
        xAxisData.push(unknowKey[0]);
        let unknowSize = seriesData.splice(unknowIndex, 1);
        seriesData.push(unknowSize[0]);
      }

      this.chartMobileBrand.setOption({
        title: { text: "" },
        tooltip: {},
        xAxis: {
          data: xAxisData
        },
        yAxis: {},
        series: [
          {
            name: "总量",
            type: "bar",
            data: seriesData
          }
        ]
      });
    },
    // 设置表格数据
    setChartLineData(opt) {
      let statDays = [];
      let pv = [];
      let uv = [];
      let prize = [];
      let intercept = [];
      opt.forEach(element => {
        statDays.push(element.statDay);
        let datas = element.datas;
        datas.forEach(ele2 => {
          if (ele2.key == "pv") pv.push(ele2.size);
          if (ele2.key == "uv") uv.push(ele2.size);
          if (ele2.key == "prize") prize.push(ele2.size);
          if (ele2.key == "intercept") intercept.push(ele2.size);
        });
      });
      this.chartLine.setOption({
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["pv", "uv", "奖品数量", "拦截数量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: statDays
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "pv",
            type: "line",
            data: pv
          },
          {
            name: "uv",
            type: "line",
            stack: "总量",
            data: uv
          },
          {
            name: "奖品数量",
            type: "line",
            data: prize
          },
          {
            name: "拦截数量",
            type: "line",
            data: intercept
          }
        ]
      });
    },
    // 格式化数据
    formatData() {
      this.prizeOverview.forEach(element => {
        this.dairyPrizeOverview.forEach(element2 => {
          if (element.code == element2.code) {
            element.dairyTotal = element2.size + "/" + element.size;
          }
        });
      });

      this.interceptOverview.forEach(element => {
        this.dairyInterceptOverview.forEach(element2 => {
          if (element.code == element2.code) {
            element.dairyTotal = element2.size + "/" + element.size;
          }
        });
      });
    },
    // 请求整体报告
    reqGetApplication() {
      let code = this.$route.query.code;
      let parm = {
        appCode: code
      };
      getStatView(parm).then(res => {
        let { code, content } = res;
        if (code == 200 && content) {
          Object.assign(this, content);
          // 合并prizeOverview

          // 合并interceptOverview
          this.formatData();

          // this.setChartProvinceData();
          this.setChartMobileBrandData();
          this.setMapHeat();
        }
        //  else if (code == 404) {
        //   this.$router.push({
        //     path: "/login"
        //   });
        // }
      });
    },
    // 设置当天起的筹齐时间
    setLastDateTime(day = 7) {
      this.lastQueryDate = day + 1;
      let end = new Date();
      let start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * this.lastQueryDate);
      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
      this.$set(this.selDate, 0, formatDate.format(start));
      this.$set(this.selDate, 1, formatDate.format(end));
      this.reqGetStatDashboardList();
    },
    initData() {
      this.chartLine = echarts.init(document.getElementById("chartLine"));
      this.chartProvince = echarts.init(
        document.getElementById("chartProvince")
      );
      this.chartMobileBrand = echarts.init(
        document.getElementById("chartMobileBrand")
      );

      this.reqGetApplication();
      this.setLastDateTime(30);
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

<style scoped lang="less">
@import "./../../styles/mixin.less";
.report-container {
  padding: 20px 0px 80px;
  .fontw {
    color: red;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .border4 {
    border-radius: 4px;
    border: solid 1px #cccccc;
  }

  .el-row {
    .mb20;
  }

  .export-wrap {
    display: flex;
    justify-content: flex-end;
  }
  .title {
    font-weight: bold;
    padding: 0 12px;
    @titleHeight: 36px;
    background-color: #dddddd;
    height: @titleHeight;
    line-height: @titleHeight;
  }
  .tit {
    font-weight: bold;
    @titleHeight: 36px;
    height: @titleHeight;
    line-height: @titleHeight;
  }
  .base-overview {
    &-item {
      .border4;
      height: 72px;
      .fj;
      .num-wrap {
        padding-top: 2px;
        padding-left: 12px;
        .num1 {
          font-size: 32px;
          font-weight: bold;
        }
        .num3 {
          // font-weight: bold;
          display: inline-block;
          // padding-left: 2px;
        }
        .num2 {
          padding-top: 2px;
          color: #888888;
        }
        .num4 {
          font-size: 12px;
          color: #cccccc;
        }
      }
      .icon-wrap {
        .fj;
        align-items: center;
        width: 40px;
      }
    }
  }
  .pi-overview {
    &-item {
      .border4;
      padding: 0 12px;
      .map-wrap {
        position: relative;
        .map-aside-wrap {
          text-align: right;
          max-height: 450px;
          overflow-y: auto;
          font-size: 12px;
          transform: scale(0.8);
          transform-origin: 100% 0;
          color: #888888;
          position: absolute;
          top: 0px;
          right: 0px;
        }
      }
    }
  }
  .block {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .date-button-wrap {
      display: inline-block;
      margin-left: 12px;
    }
    .date-button-wrap-2 {
    }
  }
  .block2 {
    // text-align: center;
    padding: 0 40px;
  }
  .export-tips {
    text-align: left;
    color: #aaaaaa;
  }
}
</style>