<template>
  <div>
    <!-- 标题 -->
    <el-row class="first-row">
      <div class="tag">报表</div>
    </el-row>

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

    <el-tabs>
      <!-- 游客来源地区域 -->
      <el-tab-pane label="游客来源地统计报表">
        <!-- 增加按钮和搜索框 -->
        <el-row style="margintop: 10px">
          <el-col :span="3">
            <el-button
              type="primary"
              icon="el-icon-download"
              :disabled="tableData.length == 0"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>

          <el-col :span="8">
            时间选择：
            <el-date-picker
              v-model="time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="changeTime"
            >
            </el-date-picker>
          </el-col>

          <el-col :span="6">
            地区选择：
            <el-select
              v-model="placeType"
              placeholder="请选择地区"
              @change="changePlace"
              clearable
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <div style="margin: 20px 0"></div>
        <hr style="background-color: #cccccc; height: 1px; border: 0" />

        <!-- 表格区域 -->
        <el-row>
          <el-table
            :data="tableData"
            highlight-current-row
            height="450"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column prop="id" label="排名" align="center" width="100">
            </el-table-column>
            <el-table-column prop="province" label="地区" align="center">
            </el-table-column>
            <el-table-column label="人数" align="center">
              <template slot-scope="{ row }">
                {{ row.num * coefficient }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>

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

        <!-- 分页器 -->
        <el-row>
          <el-col :span="9" style="margintop: 7px"
            >合计人数：{{ peopleCount * coefficient }}</el-col
          >
          <el-col :span="9">
            <el-pagination
              background
              layout="total,prev, pager, next"
              :total="totalCount"
              :page-size="pageSize"
              :current-page.sync="curPage"
              @current-change="getData"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      placeType: "",
      time: [],
      options: [
        {
          id: 1,
          value: "全部",
        },
        {
          id: 2,
          value: "省内",
        },
        {
          id: 3,
          value: "省外",
        },
      ],
      tableData: [],
      loading: false,
      totalCount: null,
      pageSize: 999,
      curPage: 1,
      startTime: "",
      endTime: "",
      placeType: "",
      peopleCount: "",
      coefficient: null,
    };
  },
  created() {
    this.getData_coefficient();
  },
  mounted() {
    this.placeType = "全部";
    this.initDate();
    this.getData();
  },
  methods: {
    //  初始化日期时间
    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.startTime = this.getDate(year2, mon2, day2);
      this.endTime = this.getDate(year1, mon1, day1);

      this.time.push(this.startTime);
      this.time.push(this.endTime);
    },

    // 获取指定格式 年、月、日
    getDate(y, m, d) {
      m = m > 9 ? m : "0" + m;
      d = d > 9 ? d : "0" + d;
      return y + "-" + m + "-" + d;
    },

    // 获取 基础系数 数据
    async getData_coefficient() {
      let res = await this.$axios.post("/bigData2/tourqueryTourx.action");
      // console.log(res);
      if (res.status == 200) {
        res.data.data.forEach((element) => {
          if (element.xs_name == "游客来源地") {
            this.coefficient = element.xs2;
          }
        });
        console.log(this.coefficient);
      } else {
        console.log("获取 基础系数数据 失败");
      }
    },

    // 获取报表数据
    async getData() {
      let params = {
        page: this.curPage,
        rows: this.pageSize,
        startTime: this.startTime,
        endTime: this.endTime,
        lei: this.placeType,
      };
      let res = await this.$axios({
        url: "/bigData2/tourprovincePage.action",
        method: "post",
        params,
      });
      // console.log(res);
      if (res.status == 200) {
        this.peopleCount = null;
        this.tableData = res.data.rows;
        this.totalCount = res.data.total;
        if (res.data.rows.length != 0) {
          res.data.rows.forEach((element) => {
            this.peopleCount += element.num - 0;
          });
        }
      } else {
        console.log("获取 报表数据 失败");
      }
    },

    changePlace(val) {
      this.curPage = 1;
      if (val) {
        this.getData();
      } else {
        this.placeType = "全部";
        this.getData();
      }
    },

    changeTime(val) {
      this.curPage = 1;
      if (val) {
        this.startTime = val[0];
        this.endTime = val[1];
        this.getData();
      } else {
        this.$message.error("请选择筛选时间");
        this.tableData = [];
        this.totalCount = null;
        this.peopleCount = null;
      }
    },

    // 导出按钮回调
    handleExport() {
      require.ensure([], () => {
        // js文件的相对路径
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        // 设置Excel的表格第一行的标题
        const tHeader = ["排名", "地区", "人数"];
        // 设置tableData里对象的属性
        const filterVal = ["id", "province", "num"];
        //把data里的tableData存到list
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "游客来源地统计报表");
      });
    },

    // 数据处理
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style scoped>
.first-row {
  display: flex;
  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>>
