<template>
  <div>
    <!-- 标题部分 -->
    <el-row>
      <el-col
        :span="24"
        class="first-row"
      >
        <div class="tag">报表</div>
      </el-col>
    </el-row>

    <div style="margin: 20px 0;"></div>

    <!-- 主体部分 -->
    <el-tabs type="border-card">
      <!-- 主要路口部分 -->
      <el-tab-pane label="主要路口数据报表">
        <!-- 选择时间框和导出按钮 -->
        <el-row style="marginTop:10px">
          <el-col
            :span="1"
            style="fontSize:12px;lineHeight:200%;color: #606266"
          >检测时间:</el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="value1"
              type="date"
              size="mini"
              placeholder="选择日期"
              style="width:80%"
              value-format="yyyy-MM-dd"
              @change="getTime"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-download"
              @click="exportExcel"
              :disabled='tableData.length==0'
            >导出</el-button>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <hr style="background-color: #cccccc; height: 1px; border: 0;marginTop:20px" />
        <!-- 表格部分 -->
        <el-row>
          <el-table
            :data="tableData"
            style="width: 100%; font-size: 14px"
            highlight-current-row
            max-height="490"
            height="490"
          >
            <el-table-column
              prop="place_name"
              label="路口"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="数量"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="合计"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <!-- 单位码部分 -->
      <el-tab-pane label="单位码数据报表">

        <!-- 选择时间框和导出按钮 -->
        <el-row style="marginTop:10px">
          <el-col
            :span="1"
            style="fontSize:12px;lineHeight:200%;color: #606266"
          >检测时间:</el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="value2"
              type="date"
              size="mini"
              placeholder="选择日期"
              style="width:80%"
              value-format="yyyy-MM-dd"
              @change="getTime2"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-download"
              @click="exportExcel2"
              :disabled='tableData2.length==0'
            >导出</el-button>
          </el-col>
        </el-row>

        <!-- 分割线 -->
        <hr style="background-color: #cccccc; height: 1px; border: 0;marginTop:20px" />

        <!-- 表格部分 -->
        <el-row>
          <el-table
            :data="tableData2"
            style="width: 100%; font-size: 14px"
            highlight-current-row
            max-height="490"
            height="490"
          >
            <el-table-column
              prop="place_name"
              label="场所类型"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="数量"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="red_num"
              label="红码"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="yellow_num"
              label="黄码"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="green_num"
              label="绿码"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="150"
            >
              <template slot-scope="{row}">
                <el-button
                  v-if="row.place_name!=='合计'"
                  type="primary"
                  size="mini"
                  @click="checkDetails(row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <!-- 查看详情弹窗 -->
        <el-dialog
          :title="gridTitle"
          :visible.sync="dialogTableVisible"
          center
        >
          <el-button
            type="primary"
            icon="el-icon-download"
            @click="exportExcel3"
          >导出</el-button>
          <el-table
            :data="gridData"
            max-height="490"
            height="490"
          >
            <el-table-column
              prop="places"
              label="场所名称"
              align="center"
              width="300"
            ></el-table-column>
            <el-table-column
              prop="red_num"
              label="红码"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="yellow_num"
              label="黄码"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="green_num"
              label="绿码"
              align="center"
            ></el-table-column>
          </el-table>
        </el-dialog>

      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
export default {
  name: "",
  data() {
    return {
      //主要路口时间选择框绑定数值
      value1: "",
      //单位码时间选择框绑定数值
      value2: "",
      //主要路口页面表格数据
      tableData: [],
      //单位码页面表格数据
      tableData2: [],
      // 合计总数
      temNum: null,
      // 绿码总数
      temGreen: null,
      // 红码总数
      temRed: null,
      // 黄码总数
      temYellow: null,
      // 查看详情绿码总数
      temGreen2: null,
      // 查看详情红码总数
      temRed2: null,
      // 查看详情黄码总数
      temYellow2: null,
      // 查看详情弹窗控制
      dialogTableVisible: false,
      // 查看详情弹窗表格数据
      gridData: [],
      // 查看详情弹窗标题
      gridTitle: "",
    };
  },
  created() {
    this.initDate();
  },
  mounted() {
    this.getList();
    this.getList2();
  },
  methods: {
    // 获取主要路口数据列表
    async getList() {
      let params = { tj_date: this.value1 };
      let res = await this.$axios({
        url: "/bigData2/maqueryGaosuR.action",
        method: "post",
        params,
      });
      // console.log(res);
      if (res.data.code == 200) {
        this.temNum = null;
        res.data.data.forEach((element) => {
          this.temNum += element.num;
          element.count = 1;
          return element;
        });
        res.data.data.push({
          place_name: "合计",
          count: res.data.data.length,
          num: this.temNum,
        });
        this.tableData = res.data.data;
      } else {
        console.log("获取主要路口数据列表失败");
        this.tableData = [];
      }
    },
    //主要路口时间选择框事件
    getTime(val) {
      this.value1 = val;
      this.getList();
    },
    // 获取单位码数据列表
    async getList2() {
      let params = { tj_date: this.value2 };
      let res = await this.$axios({
        url: "/bigData2/maqueryDanweiR.action",
        method: "post",
        params,
      });
      // console.log(res);
      if (res.data.code == 200) {
        this.temGreen = null;
        this.temRed = null;
        this.temYellow = null;
        res.data.data.forEach((element) => {
          this.temGreen += element.green_num;
          this.temRed += element.red_num;
          this.temYellow += element.yellow_num;
          element.count = 1;
          return element;
        });
        res.data.data.push({
          place_name: "合计",
          count: res.data.data.length,
          green_num: this.temGreen,
          red_num: this.temRed,
          yellow_num: this.temYellow,
        });
        this.tableData2 = res.data.data;
      } else {
        console.log("获取单位码数据列表失败");
        this.tableData2 = [];
      }
    },
    //单位码时间选择框事件
    getTime2(val) {
      this.value2 = val;
      this.getList2();
    },
    // 主要路口数据导出
    exportExcel() {
      require.ensure([], () => {
        // js文件的相对路径
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        // 设置Excel的表格第一行的标题
        const tHeader = ["路口", "数量", "合计"];
        // 设置tableData里对象的属性
        const filterVal = ["place_name", "count", "num"];
        //把data里的tableData存到list
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "主要路口数据报表");
      });
    },
    // 单位码数据导出
    exportExcel2() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = ["场所类型", "数量", "红码", "黄码", "绿码"];
        const filterVal = [
          "place_name",
          "count",
          "red_num",
          "yellow_num",
          "green_num",
        ];
        const list = this.tableData2;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "单位码数据报表");
      });
    },
    // 单位码查看详情数据导出
    exportExcel3() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = ["场所名称", "红码", "黄码", "绿码"];
        const filterVal = ["places", "red_num", "yellow_num", "green_num"];
        const list = this.gridData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, this.gridTitle + "健康码数据报表");
      });
    },
    // 数据处理
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 初始化日期为昨天 至 今天
    initDate() {
      //当天的日期时间
      let d = new Date();
      var year1 = d.getFullYear(); // 获取当前年份
      var mon1 = d.getMonth() + 1; // 获取当前月份
      var day1 = d.getDate(); // 获取当前日

      //昨天的日期时间
      d.setTime(d.getTime() - 24 * 60 * 60 * 1000);
      var year2 = d.getFullYear();
      var mon2 = d.getMonth() + 1;
      var day2 = d.getDate();

      this.value1 = this.getDate(year2, mon2, day2);
      this.value2 = this.getDate(year2, mon2, day2);
      // console.log(this.value1);
    },
    // 获取指定格式 年、月、日
    getDate(y, m, d) {
      m = m > 9 ? m : "0" + m;
      d = d > 9 ? d : "0" + d;
      return y + "-" + m + "-" + d;
    },
    // 查看详情获取下一级列表数据
    async checkDetails(row) {
      this.gridTitle = row.place_name;
      let params = {
        tj_date: row.tj_date,
        placef: row.place_name,
      };
      let res = await this.$axios({
        url: "/bigData2/maqueryDanweiD.action",
        method: "post",
        params,
      });
      // console.log(res);
      if (res.data.code == 200) {
        this.temGreen2 = null;
        this.temRed2 = null;
        this.temYellow2 = null;
        res.data.data.forEach((element) => {
          this.temGreen2 += element.green_num;
          this.temRed2 += element.red_num;
          this.temYellow2 += element.yellow_num;
          return element;
        });
        res.data.data.push({
          places: "合计",
          green_num: this.temGreen2,
          red_num: this.temRed2,
          yellow_num: this.temYellow2,
        });
        this.gridData = res.data.data;
      } else {
        console.log("获取下一级列表数据失败");
        this.gridData = [];
      }
      this.dialogTableVisible = true;
    },
  },
};
</script>

<style scoped>
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.tag {
  width: 108px;
  height: 40px;
  font-size: 24px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  color: #000000;
  line-height: 54px;
}
</style>