<template>
  <div class="page-container">
    <div class="tool-wrap">
      <div>
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input @change="changeHandler()" v-model="filters.mobilePhone" placeholder="请输入访问页面"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker @change="changeHandler()" v-model="filters.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="reqQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button class="reset-btn" @click="showDialog()">导出数据</el-button>
      </div>
    </div>

    <el-table :data="totalData.reservationList" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column prop="page_name" label="访问页面">
      </el-table-column>
      <el-table-column prop="hdp_created" :formatter="formatTableDate" label="访问时间">
      </el-table-column>
      <el-table-column prop="nickname" label="微信昵称">
      </el-table-column>
      <el-table-column label="微信头像">
        <template slot-scope="scope">
          <div class="avatar-wrap">
            <img class="avatar" :src="scope.row.avatar" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="openid" label="openid">
      </el-table-column>

    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
      <el-pagination layout="prev, pager, next,jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <el-dialog class="dialog" center title="导出数据设定" :visible.sync="exportDialogVisible" :close-on-click-modal="false">
      <span class="tips">导出日期</span>
      <el-date-picker v-model="exportDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
      </el-date-picker>
      <div slot="footer" class="dialog-footer">
        <el-button style="width:120px;" @click.native="exportDialogVisible = false">取消</el-button>
        <el-button style="width:120px;" type="primary" @click.native="exportHandler()">导出</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { Base64 } from "js-base64";
import { exportTable } from "./../../api/api.js";
import { formatDate } from "./../../common/utils.js";

export default {
  data() {
    return {
      exportDate: [
        new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7),
        new Date().getTime()
      ],
      exportDialogVisible: false,
      listLoading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      totalData: {
        reservationList: []
      },
      selDate: [
        new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7),
        new Date()
      ],
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      filters: {
        mobilePhone: "",
        date: ""
      }
    };
  },
  computed: {
    pageNum() {
      return Math.ceil(this.total / this.pageSize);
    },
    startTime() {
      let date = this.filters.date;
      let result = (date && date[0]) || "";
      if (result) {
        result = date[0].getTime();
      }
      return result;
    },
    endTime() {
      let date = this.filters.date;
      let result = (date && date[1]) || "";
      if (result) {
        result = date[1].getTime() + 1000 * 60 * 60 * 24;
      }
      return result;
    }
  },
  methods: {
    changeHandler() {
      this.reqQuery();
    },
    exportHandler() {
      let data = {
        start_time: new Date(this.exportDate[0]).getTime(),
        end_time: new Date(this.exportDate[1]).getTime() + 1000 * 60 * 60 * 24,
        mobile_phone: "",
        startIndex: 0,
        size: 1000000
      };
      var encoder = HDP.getEncoder();
      var encrypted = encoder.encode(JSON.stringify(data));
      let params = {
        appId: "df69fd8153f711ea8c527cd30aeb749e",
        appKey: "5e19fbac20474d6587105eee7c624319",
        func: "queryStatPageList",
        data: encrypted
      };
      exportTable(params);
    },
    showDialog() {
      this.exportDialogVisible = true;
    },
    formatTableDate(row, column) {
      return formatDate.format(new Date(row.hdp_created), "yyyy-MM-dd hh:mm");
    },
    handleCurrentChange(val) {
      this.page = val;
      this.reqQuery();
    },
    reqQuery() {
      let _this = this;
      _this.listLoading = true;
      let data = {
        startIndex: (this.page - 1) * this.pageSize,
        size: this.pageSize,
        mobile_phone: this.filters.mobilePhone,
        start_time: this.startTime,
        end_time: this.endTime
      };
      as.queryFunV2("queryStatPageListAppb8vC", data, res => {
        _this.page = 1;
        _this.listLoading = false;
        if (res) {
          let reservationList = res[0];
          let total = res[1][0].total;
          _this.total = total;
          _this.$set(_this.totalData, "reservationList", reservationList);
        }
      });
    }
  },
  mounted() {
    this.reqQuery();
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.page-container {
  padding: 20px;
}

.tool-wrap {
  padding: 24px 0;
  display: flex;
  border-bottom: solid 1px #cccccc;
  justify-content: space-between;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  .page-tips {
    height: 32px;
    line-height: 32px;
    color: #333333;
  }
}

.dialog {
  .tips {
    margin-right: 24px;
  }
}
</style>