<template>
  <div class="app-container" v-loading="downloadLoading">
    <!--搜索区-->
    <el-input
      v-model="page.data.name"
      placeholder="请输入姓名"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.phone"
      placeholder="请输入手机号"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.idNumber"
      placeholder="请输入身份证号"
      class="margin-left input"
    ></el-input>
    <el-select
      v-if="!checkRole([99])"
      filterable
      clearable
      v-model="page.data.username"
      placeholder="请选择账号"
      class="margin-left input"
    >
      <el-option
        v-for="item in user_list"
        :key="item.id"
        :label="item.username"
        :value="item.username"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.deviceSn"
      placeholder="请选择设备编号"
      class="margin-left input"
    >
      <el-option
        v-for="item in machine_list"
        :key="item.sn"
        :label="item.sn"
        :value="item.sn"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.deviceSn"
      placeholder="请选择设备地点"
      class="margin-left input"
    >
      <el-option
        v-for="item in machine_list"
        :key="item.sn"
        :label="item.name"
        :value="item.sn"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.faceDeviceTypeId"
      placeholder="请选择设备类型"
      class="margin-left input"
      v-if="checkRole([1, 2])"
    >
      <el-option
        v-for="item in machine_type_list"
        :key="item.faceDeviceTypeId"
        :label="item.name"
        :value="item.faceDeviceTypeId"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.provinceId"
      @change="chooseProvinceSearch"
      placeholder="请选择省份"
      class="margin-left input"
      :disabled="checkRole([2, 3, 4, 5])"
      v-if="!checkRole([99])"
    >
      <el-option
        v-for="item in province_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.cityId"
      @change="chooseCitySearch"
      placeholder="请选择城市"
      class="margin-left input"
      :disabled="checkRole([4, 5])"
      v-if="!checkRole([99])"
    >
      <el-option
        v-for="item in city_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.areaId"
      placeholder="请选择区域"
      class="margin-left input"
      :disabled="checkRole([5])"
      v-if="!checkRole([99])"
    >
      <el-option
        v-for="item in area_list_search"
        :key="item.areaCodeId"
        :label="item.name"
        :value="item.areaCodeId"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.pass"
      placeholder="请选择进出门"
      class="margin-left input"
    >
      <el-option
        v-for="item in into_door_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.verifyType"
      placeholder="请选择验证类型"
      class="margin-left input"
    >
      <el-option
        v-for="item in authentication_type_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-select
      filterable
      clearable
      v-model="page.data.rightno"
      placeholder="请选择人员类型"
      class="margin-left input"
    >
      <el-option
        v-for="item in Personnel_type_list"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>

    <el-date-picker
      v-model="page.data.startTime"
      type="datetime"
      placeholder="选择通行开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <el-date-picker
      v-model="page.data.endTime"
      type="datetime"
      placeholder="选择通行结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    >
    </el-date-picker>
    <template v-if="checkRole([5])">
      <span v-for="(item, index) in page.data.contents" :key="index">
        <el-date-picker
          v-if="item.customType === '日期'"
          v-model="item.customNameVal"
          type="datetime"
          class="margin-left input"
          :placeholder="item.prompt"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-time-picker
          class="margin-left input"
          v-if="item.customType === '时间'"
          v-model="item.customNameVal"
          :picker-options="{
            selectableRange: '00:00:00 - 23:59:59',
          }"
          :placeholder="item.prompt"
          value-format="HH:mm"
          format="HH:mm"
        >
        </el-time-picker>
        <el-select
          class="margin-left input"
          v-if="item.customType === '下拉选择'"
          filterable
          clearable
          v-model="item.customNameVal"
          :placeholder="item.prompt"
        >
          <el-option
            v-for="item in item.configurationOption"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <el-input
          class="margin-left input"
          v-if="item.customType === '文本'"
          v-model="item.customNameVal"
          :placeholder="item.prompt"
        ></el-input>
      </span>
    </template>
    <el-button
      type="primary"
      icon="el-icon-search"
      class="margin-left"
      @click="fetchData"
      >搜索</el-button
    >
    <el-tooltip
      class="item"
      effect="dark"
      content="最大支持导出50000条数据！"
      placement="top-start"
    >
      <el-button
        type="primary"
        icon="el-icon-download"
        class="margin-left"
        @click="download"
        v-if="isOut === 1"
        >导出记录</el-button
      >
    </el-tooltip>

    <el-tooltip
      class="item"
      effect="dark"
      content="最大支持导出500条数据！"
      placement="top-start"
    >
      <el-button
        type="primary"
        icon="el-icon-download"
        class="margin-left"
        @click="steakPhoto(500)"
        v-if="isOut === 1"
        >导出照片</el-button
      >
    </el-tooltip>
 <el-button
      type="primary"
      icon="el-icon-download"
      class="margin-left"
      v-if="isOut === 1"
      @click="openUploadDoc"
      >导出报表</el-button
    >
    <el-button
      type="primary"
      :icon="!isUpdate ? 'el-icon-refresh-left' : 'el-icon-loading'"
      class="margin-left"
      @click="isUpdate ? stopUpdate() : autoUpdate()"
      >{{ !isUpdate ? "打开自动刷新" : "关闭自动刷新" }}</el-button
    >
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="设备编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.deviceSn | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="所属账号" align="center" v-if="checkRole([1, 2])">
        <template slot-scope="scope">
          <span>{{ scope.row.username | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备地点" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceName | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.faceDeviceTypeName | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="设备品牌名称"
        align="center"
        v-if="checkRole([1, 2])"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.thirdPartyName | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="现场照片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.photo"
            :preview-src-list="[scope.row.photo]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="证件号" align="center">
        <template slot-scope="scope">
          {{ scope.row.cardid }}
        </template>
      </el-table-column>
      <el-table-column label="卡号" align="center">
        <template slot-scope="scope">
          {{ scope.row.cardidex }}
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="进/出" align="center">
        <template slot-scope="scope">
          <el-tag type="success" effect="light" v-if="scope.row.outType === 0"
            >通用</el-tag
          >
          <el-tag
            type="primary"
            effect="plain"
            v-else-if="scope.row.outType === 1"
            >进门</el-tag
          >
          <el-tag
            type="primary"
            effect="dark"
            v-else-if="scope.row.outType === 2"
            >出门</el-tag
          >
          <el-tag v-else>其它</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="验证类型" align="center">
        <template slot-scope="scope">
          <el-tag type="primary" plain v-if="scope.row.verifyType === 0"
            >人脸</el-tag
          >
          <el-tag type="primary" plain v-else-if="scope.row.verifyType === 1"
            >IC卡</el-tag
          >
          <el-tag type="primary" plain v-else-if="scope.row.verifyType === 2"
            >身份证</el-tag
          >
          <el-tag type="primary" plain v-else-if="scope.row.verifyType === 3"
            >二维码</el-tag
          >
          <el-tag type="primary" plain v-else-if="scope.row.verifyType === 4"
            >远程</el-tag
          >
          <el-tag type="primary" plain v-else-if="scope.row.verifyType === 6"
            >IC卡+人脸</el-tag
          >
          <el-tag v-else>其它</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="人员类型" align="center">
        <template slot-scope="scope">
          <el-tag type="" effect="plain" v-if="scope.row.rightno === 104"
            >访客</el-tag
          >
          <el-tag
            type="success"
            effect="plain"
            v-else-if="scope.row.rightno === 105"
            >员工</el-tag
          >
          <el-tag
            type="info"
            effect="plain"
            v-else-if="scope.row.rightno === 101"
            >黑名单</el-tag
          >
          <el-tag type="info" effect="plain" v-else>未知</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="认证类型" align="center">
        <template slot-scope="scope">
          <el-tag effect="plain" type="success" v-if="scope.row.pushType === 0"
            >小程序</el-tag
          >
          <el-tag
            effect="plain"
            v-else-if="scope.row.pushType ===1"
            >初次添加</el-tag
          >
          <el-tag
            effect="plain"
            type="primary"
            v-else-if="scope.row.pushType ===2"
            >人工录入</el-tag
          >
           <el-tag
            effect="plain"
            type="warning"
            v-else-if="scope.row.pushType ===3"
            >访客机</el-tag
          >
          <el-tag effect="plain" type="info" v-else>其他</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="通行时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.faceTime }}
        </template>
      </el-table-column>
      <!-- 自定义字段 -->
      <template v-if="addCustomList.length > 0">
        <el-table-column
          align="center"
          :label="item.customName"
          v-for="(item, index) in addCustomList"
          :key="index"
        >
          <template slot-scope="scope">
            <el-image
              v-if="item.customType === '图片'"
              style="width: 70px; height: 70px"
              :src="
                scope.row.contents.length > 0
                  ? scope.row.contents[index].customNameVal
                  : ''
              "
              :preview-src-list="[
                scope.row.contents.length > 0
                  ? scope.row.contents[index].customNameVal
                  : '',
              ]"
            >
              <div slot="error" class="image-slot">暂无照片</div>
            </el-image>
            <span v-else>{{
              scope.row.contents.length > 0
                ? scope.row.contents[index].customNameVal
                : ""
            }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        label="操作区"
        align="center"
        fixed="right"
        width="100px"
      >
        <template slot-scope="scope">
          <!-- <el-button type="warning" size="small" @click="searchClose(scope.row)"
            >密接</el-button
          > -->
          <el-button
            type="primary"
            size="small"
            @click="searchDetails(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
    <!-- 详情对话框 -->
    <detailsDialog
      :dialogTableVisible="dialogTableVisible"
      @dialog="dialogTableVisible = false"
      type="pass_records"
      :visitToJetList="visitToJetList"
      :row="row"
    />
        <!-- 导出报表 -->
    <el-dialog
      title="导出报表"
      center
      :visible.sync="uploadDocVisible"
      destroy-on-close
    >
      <el-form
        :model="uploadDoc_form"
        ref="uploadDoc_form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="报表类型" prop="adminAreaType">
          <el-radio-group v-model="uploadDoc_form.type">
            <el-radio :label="1">日报</el-radio>
            <el-radio :label="2">周报</el-radio>
            <el-radio :label="3">月报</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择时间" prop="adminAreaType">
          <el-date-picker
            v-model="uploadDoc_form.startTime"
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-date-picker
            v-model="uploadDoc_form.endTime"
            type="date"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd"
            class="choose-time"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadDocFun"> 下载 </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import detailsDialog from "@/components/DialogDetails/index.vue";

import {
  doGetFaceServerLog,
  downloadFaceLog,
  getFaceDeviceList,
  getMachineCompanyListSearch,
  getMachineTypeListSearch,
} from "@/api/old_api_pengwenbing";
import Pagination from "@/components/Pagination";
import { checkRole } from "@/utils/checkRole";
import {
  getArea,
  getCity,
  getProvince,
  getUserListSearch,
  getContext,
  getContextByFaceLog,
  getUserListFrom,
  getContextById,
} from "@/api/user_manage";
import { parseTime } from "@/utils";
import { downloadPhotosPassRecords } from "@/utils/steakPhoto"; // secondary package based on el-pagination
import { monthRecords, todayRecords, weekedRecords } from "@/api/xiaosha";

export default {
  components: { Pagination, detailsDialog },
  filters: {
    matchNull(str) {
      if (!str) {
        return "未记录";
      } else {
        return str;
      }
    },
    aAecimal(str) {
      return (str = str.slice(0, 4));
    },
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      downloadLoading: false, //导出加载
      // 分页参数
      page: {
        data: {
          username: null,
          name: null,
          idNumber: null,
          phone: null,
          deviceSn: null,
          startTime: "",
          endTime: "",
          provinceId: null,
          cityId: null,
          areaId: null,
          hsStatus: null,
          faceDeviceTypeId: null,
          pass: null,
          verifyType: null,
          rightno: null,
          contents: null, //自定义字段
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 账号列表_搜索
      user_list: [],
      // 设备列表_搜索
      machine_list: [],
      // 设备品牌列表_搜索
      machine_company_list: [],
      // 设备类型列表_搜索
      machine_type_list: [],
      // 进出门_搜索
      into_door_list: [
        { id: 0, name: "不限" },
        { id: 1, name: "进门" },
        { id: 2, name: "出门" },
      ],
      // 验证类型
      authentication_type_list: [
        { id: 0, name: "人脸" },
        // { id: "1", name: "IC卡" },
        { id: 2, name: "身份证" },
        { id: "3", name: "二维码" },
      ],
      // 人员类型
      Personnel_type_list: [
        { id: 104, name: "访客" },
        { id: 105, name: "员工" },
        { id: 301, name: "预约人员" },
      ],
      //省市县列表_搜索
      province_list_search: [],
      city_list_search: [],
      area_list_search: [],
      // 是否可以导出
      isOut: this.$store.getters.isOut,
      // 是否打开自动更新
      isUpdate: "",
      // 信息详情弹框
      dialogVisible: false,
      // 信息详情
      dialogContent: "",
      dialogTableVisible: false,
      // 访客机数据
      visitToJetList: {},
      //自定义字段模板
      addCustomList: [],
      row: {},
      // 报表导出
      uploadDocVisible: false,
      uploadDoc_form: {
        type: 1,
        startTime: null,
        endTime: null,
      },
    };
  },
  created() {
    this.page_copy = JSON.parse(JSON.stringify(this.page));
    this.fetchData();
    this.matchAutoUpdate();
    this.getUserListSearch();
    this.getFaceDeviceList();
    this.getMachineTypeListSearch();
    this.getAddressListSearch(1);
    if (checkRole([2, 3])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId);
      this.page.data.provinceId = this.$store.getters.provinceId;
    } else if (checkRole([4])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId);
      this.page.data.provinceId = this.$store.getters.provinceId;
      this.getAddressListSearch(3, this.$store.getters.cityId);
      this.page.data.cityId = this.$store.getters.cityId;
    } else if (checkRole([5])) {
      this.getAddressListSearch(2, this.$store.getters.provinceId);
      this.page.data.provinceId = this.$store.getters.provinceId;
      this.getAddressListSearch(3, this.$store.getters.cityId);
      this.page.data.cityId = this.$store.getters.cityId;
      this.page.data.areaId = this.$store.getters.areaId;
      this.getContextById(this.$store.getters.adminId);
    }
  },
  beforeDestroy() {
    var isUpdate = localStorage.getItem("isUpdate");
    if (isUpdate) {
      clearInterval(isUpdate);
    }
  },
  computed: {},
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData(isUpdate = false) {
      this.listLoading = true;
      doGetFaceServerLog(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 查询自定义字段详情
    searchDetails(row) {
      this.row = row;
      let data = {
        logId: row.logId,
        type: row.rightno,
      };
      getUserListFrom(data).then((res) => {
        this.visitToJetList = res.data;
        this.dialogTableVisible = true;
      });
    },
    // 获取自定义字段模板
    getContextById(adminId) {
      getContextById(adminId).then((res) => {
        this.addCustomList = res.data;
        this.page.data.contents = res.data;
        // console.log(this.page.data.contents);
      });
    },
    // 获取设备列表-搜索
    getFaceDeviceList() {
      getFaceDeviceList().then((res) => {
        this.machine_list = res.data;
      });
    },
    // 设备品牌列表-搜索
    getMachineCompanyListSearch() {
      getMachineCompanyListSearch().then((res) => {
        this.machine_company_list = res.data;
      });
    },
    // 获取设备类型列表-搜索
    getMachineTypeListSearch() {
      getMachineTypeListSearch().then((res) => {
        this.machine_type_list = res.data;
      });
    },
    // 获取账号列表数据_搜索
    getUserListSearch() {
      getUserListSearch().then((res) => {
        this.user_list = res.data;
      });
    },
    // 获得省市县列表_搜索
    getAddressListSearch(type, code) {
      switch (type) {
        case 1:
          getProvince().then((res) => {
            this.province_list_search = res.data;
          });
          break;
        case 2:
          getCity(code).then((res) => {
            this.city_list_search = res.data;
          });
          break;
        case 3:
          getArea(code).then((res) => {
            this.area_list_search = res.data;
          });
          break;
        default:
          break;
      }
    },
    // 选择省份_搜索
    chooseProvinceSearch(e) {
      this.city_list_search = [];
      this.page.data.cityId = "";
      this.page.data.cityName = "";
      this.area_list_search = [];
      this.page.data.areaId = "";
      this.page.data.areaName = "";
      this.getAddressListSearch(2, e);
      // this.getTagList(e);
    },
    // 选择市_搜索
    chooseCitySearch(e) {
      this.area_list = [];
      this.page.data.areaId = "";
      this.page.data.areaName = "";
      this.getAddressListSearch(3, e);
    },
    // 导出记录
    download() {
      this.$prompt("请输入导出密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          if (value == "Nqj##361") {
            this.$message({
              type: "success",
              message: "密码正确,正在下载...",
            });
            this.downloadLoading = true;
            downloadFaceLog(this.page.data).then((res) => {
              window.location.href = res.data;
              this.downloadLoading = false;
            });
          } else {
            this.$message({
              type: "error",
              message: "您输入的密码不正确",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消导出",
          });
        });
    },
    //批量导出图片-带参数导出入口-BETA $1 查询参数  $2多少条
    steakPhoto(number) {
      downloadPhotosPassRecords(this.page, number);
    },
    // 打开自动更新
    autoUpdate() {
      this.isUpdate = setInterval(() => {
        this.fetchData(true);
      }, 60000);
      localStorage.setItem("isUpdate", this.isUpdate);
    },
    // 关闭自动更新
    stopUpdate() {
      clearInterval(this.isUpdate);
      localStorage.setItem("isUpdate", "");
      this.isUpdate = "";
    },
    // 检测上次自动更新状态
    matchAutoUpdate() {
      var isUpdate = localStorage.getItem("isUpdate");
      if (isUpdate) {
        clearInterval(isUpdate);
        this.autoUpdate();
      }
    },
    // 查询密切接触
    searchClose(row) {
      this.$prompt("请输入前后通行间隔时间(分钟)", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[1-9]{1}[\d]*$/,
        inputErrorMessage: "只能填写大于0的数字哦~",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          var time = Date.parse(new Date(row.faceTime));
          var startTime = time - value * 60 * 1000;
          var endTime = time + value * 60 * 1000;
          startTime = parseTime(startTime, "{y}-{m}-{d} {h}:{i}:{s}");
          endTime = parseTime(endTime, "{y}-{m}-{d} {h}:{i}:{s}");
          this.page = JSON.parse(JSON.stringify(this.page_copy));
          this.page.data.deviceSn = row.deviceSn;
          this.page.data.startTime = startTime;
          this.page.data.endTime = endTime;
          this.fetchData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消查询",
          });
        });
    },
    openUploadDoc() {
      this.uploadDocVisible = true;
      this.uploadDoc_form.startTime = null;
      this.uploadDoc_form.endTime = null;
    },
    // 导出报表
    async uploadDocFun() {
      let { startTime, endTime, type } = this.uploadDoc_form;
      if (!endTime || !startTime) {
        this.$message.error("请选择时间");
        return;
      }
      let data = null;
      let time = {
        startTime: startTime + "  00:00:00",
        endTime: endTime + " 23:59:59",
      };
      if (type === 1) {
        data = await todayRecords(time);
      } else if (type === 2) {
        data = await weekedRecords(time);
      } else if (type === 3) {
        data = await monthRecords(time);
      }
      var eleLink = document.createElement("a");
      eleLink.style.display = "none";
      var blob = new Blob([data]);
      eleLink.href = URL.createObjectURL(blob);
      eleLink.setAttribute("download", "报表.doc");
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
      this.uploadDocVisible = false;
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped>
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 150px;
}
</style>
