<template>
  <div class="div_main">
    <div class="div_search">
      <el-form
        :inline="true"
        :model="formData"
        ref="ref_searchform"
        :label-width="'90px'"
      >
        <div>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="formData.name"
              size="small"
              class="list_item_width_1"
              clearable
              placeholder="请输入姓名"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="formData.mobile"
              size="small"
              class="list_item_width_1"
              clearable
              placeholder="请输入手机号"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="证件号" prop="mobile">
            <el-input
              v-model="formData.idCard"
              size="small"
              class="list_item_width_1"
              clearable
              placeholder="请输入身份证号或护照号"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="关注原因" prop="mobile">
            <el-input
              v-model="formData.reason"
              size="small"
              class="list_item_width_1"
              clearable
              placeholder="请输入关注原因"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="隔离状态" prop="isolatedState">
            <el-select
              v-model="formData.isolatedState"
              size="small"
              class="list_item_width_1"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in options.isolatedState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formData.remark"
              size="small"
              class="list_item_width_1"
              clearable
              placeholder="请输入备注"
            >
            </el-input>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="所属房屋">
            <div class="resi-cell-value">
              <div class="resi-cell-col">
                <el-form-item prop="villageId">
                  <el-select
                    v-model.trim="formData.villageId"
                    placeholder="小区"
                    size="small"
                    clearable
                    class="resi-cell-select"
                    @change="handleChangeV"
                  >
                    <el-option
                      v-for="item in optionsV"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="buildId">
                  <el-select
                    v-model.trim="formData.buildId"
                    placeholder="楼号"
                    :disabled="!this.formData.villageId"
                    size="small"
                    clearable
                    class="resi-cell-select resi-cell-select-middle list_item_width_1"
                    @change="handleChangeB"
                  >
                    <el-option
                      v-for="item in optionsB"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="unitId">
                  <el-select
                    v-model.trim="formData.unitId"
                    placeholder="单元"
                    size="small"
                    :disabled="!this.formData.buildId"
                    clearable
                    class="resi-cell-select resi-cell-select-middle list_item_width_1"
                    @change="handleChangeD"
                  >
                    <el-option
                      v-for="item in optionsD"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="homeId">
                  <el-select
                    v-model.trim="formData.homeId"
                    placeholder="房号"
                    :disabled="!this.formData.unitId"
                    size="small"
                    clearable
                    class="resi-cell-select resi-cell-select-middle list_item_width_1"
                  >
                    <el-option
                      v-for="item in optionsH"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>
          <el-button
            style="margin-left: 30px"
            size="small"
            class="diy-button--search"
            @click="handleSearch"
            >查询</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            class="diy-button--reset"
            @click="resetSearch"
            >重置</el-button
          >
        </div>
      </el-form>
    </div>

    <div class="div_table">
      <div class="div_btn">
        <el-button class="diy-button--add" size="small" @click="handleAdd"
          >新增</el-button
        >
        <el-button
          style="float: left"
          class="diy-button--export"
          size="small"
          @click="handleExportModule"
          >下载模板</el-button
        >
        <el-upload
          ref="upload"
          :multiple="false"
          :show-file-list="false"
          :before-upload="beforeUpload"
          action=""
          accept=".xlsx"
          :limit="1"
          :on-exceed="handleExceed"
          :http-request="uploadFile"
        >
          <el-button
            style="margin-left: 10px"
            size="small"
            class="diy-button--delete"
            >导入</el-button
          >
        </el-upload>

        <el-button
          style="float: left; margin-left: 10px"
          class="diy-button--reset"
          size="small"
          @click="handleExport"
          >导出</el-button
        >

        <el-button
          style="margin-left: 15px"
          class="diy-button--more"
          size="small"
          @click="handleSendNotice"
          >发送通知</el-button
        >
        <el-button
          style="margin-left: 15px"
          class="diy-button--more"
          size="small"
          @click="handleDelete"
          >取消关注</el-button
        >
      </div>

      <el-table
        ref="ref_table"
        class="table"
        :data="tableData"
        border
        :height="tableHeight"
        v-loading="tableLoading"
        :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
        @select="handleSelectTable"
        @select-all="handleSelAll"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
          width="50"
        ></el-table-column>

        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="姓名"
          width="90"
        >
          <template slot-scope="scope">
            <a
              style="cursor: pointer"
              v-if="scope.row.userId"
              @click="handleWatchPeopleInfo(scope.$index)"
              >{{ scope.row.name }}</a
            >
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column
          prop="mobile"
          header-align="center"
          align="center"
          label="手机号"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="idCard"
          header-align="center"
          align="center"
          label="证件号"
          width="170"
        >
        </el-table-column> -->

        <el-table-column
          prop="allName"
          header-align="center"
          align="center"
          label="所属房屋"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="reason"
          header-align="center"
          align="center"
          label="关注原因"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="isolatedState"
          header-align="center"
          align="center"
          label="隔离状态"
          width="180"
        >
          <template slot-scope="scope">
            {{ optionsDict.isolatedState[scope.row.isolatedState] || "--" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="lastNatTime"
          header-align="center"
          align="center"
          show-overflow-tooltip
          label="最后一次核酸时间"
          width="170"
        >
        </el-table-column>

        <el-table-column
          prop="remark"
          header-align="center"
          align="center"
          show-overflow-tooltip
          label="备注"
          min-width="180"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          width="140"
          header-align="center"
          align="center"
          class="operate"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              class="div-table-button--detail"
              size="small"
              @click="handleDetail(scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              class="div-table-button--edit"
              size="small"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >

            <el-popover
              popper-class="btn-popper"
              placement="bottom"
              style="margin-left: 10px"
              width="20"
              trigger="hover"
            >
              <div class="table-more-btn">
                <el-button
                  type="text"
                  class="div-table-button--detail--noline"
                  size="small"
                  @click="handleNoticeList(scope.row)"
                  >通知记录</el-button
                >
              </div>

              <div class="table-more-btn">
                <el-button
                  type="text"
                  class="div-table-button--detail--noline"
                  size="small"
                  @click="handleVisiteList(scope.row)"
                  >随访记录</el-button
                >
              </div>

              <el-button
                type="text"
                size="small"
                class="div-table-button--more"
                slot="reference"
                >更多<i class="el-icon-caret-bottom"></i
              ></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 新增弹出框 -->
    <el-dialog
      :visible.sync="addFormShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      title="新增核酸检测关注名单"
      width="1050px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <nat-focus-add
        ref="ref_form_add"
        @dialogCancle="diaClose"
        @dialogOk="addFormOk"
      ></nat-focus-add>
    </el-dialog>
    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="editFormShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="editFormTitle"
      width="1050px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <nat-focus-edit
        ref="ref_form_edit"
        @dialogCancle="diaClose"
        @dialogOk="addFormOk"
      ></nat-focus-edit>
    </el-dialog>
    <!-- 发送通知弹出框 -->
    <el-dialog
      :visible.sync="sendNoticeFormShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="发送通知"
      width="850px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <nf-send-notice
        ref="ref_sendnotice"
        @dialogOk="sendNoticeOk"
        @dialogCancle="diaClose"
      ></nf-send-notice>
    </el-dialog>
    <!-- 通知记录弹出框 -->
    <el-dialog
      :visible.sync="noticeListFormShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="通知记录"
      width="1050px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <nf-notice-list
        ref="ref_noticelist"
        @dialogCancle="diaClose"
      ></nf-notice-list>
    </el-dialog>
    <!-- 随访记录弹出框 -->
    <el-dialog
      :visible.sync="visiteListFormShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="随访记录"
      width="1050px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <nf-visite-list
        ref="ref_visitelist"
        @dialogCancle="diaClose"
      ></nf-visite-list>
    </el-dialog>

    <people-more
      v-if="showedPeopleMoreInfo && currentPepeleId"
      :userId="currentPepeleId"
      :gridName="currentPepeleGridName"
      @close="showedPeopleMoreInfo = false"
    />
  </div>
</template>

<script>
import natFocusAdd from "./natFocusAdd";
import natFocusEdit from "./natFocusEdit";
import nfNoticeList from "./nfNoticeList";
import nfSendNotice from "./nfSendNotice";
import nfVisiteList from "./nfVisiteList";
import nextTick from "dai-js/tools/nextTick";
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import peopleMore from "@/views/modules/shequ/cpts/people-more";

let loading; // 加载动画

export default {
  data() {
    return {
      loading: false,
      total: 0,
      pageSize: 20,
      pageNo: 1,
      tableLoading: false,

      selection: [],

      agencyId: "",

      formData: {
        attentionType: 2, //关注类型，核酸检测：2，疫苗接种：1
        name: "",
        mobile: "",
        idCard: "",
        remark: "",
        reason: "",
        villageId: "",
        buildId: "",
        unitId: "",
        homeId: "",
        isolatedState: "",
      },

      options: {
        isolatedState: [],
      },
      optionsDict: {
        isolatedState: {},
      },

      optionsV: [],
      optionsB: [],
      optionsH: [],
      optionsD: [],

      natNumList: [],

      tableData: [],
      selectionAll: [],

      //form相关
      addFormShow: false,
      editFormShow: false,
      sendNoticeFormShow: false,
      noticeListFormShow: false,
      visiteListFormShow: false,

      editFormTitle: "修改重点人群关注名单",

      // 显示人员详情
      showedPeopleMoreInfo: false,
      currentPepeleId: "",
      currentPepeleGridName: "",
    };
  },
  components: {
    natFocusAdd,
    natFocusEdit,
    nfNoticeList,
    nfSendNotice,
    nfVisiteList,
    peopleMore,
  },

  activated() {
    this.$refs["ref_table"].doLayout();
  },

  async mounted() {
    for (let i = 0; i < 11; i++) {
      let obj = {
        value: i + "",
        label: i + "次",
      };
      this.natNumList.push(obj);
    }

    this.getValiheList();

    await this.getFmOptions("isolatedState", "/sys/dict/data/dictlist", {
      dictType: "isolatedState",
    });

    await this.loadTable();
  },

  methods: {
    async handleWatchPeopleInfo(rowIndex) {
      let item = this.tableData[rowIndex];
      this.currentPepeleId = item.userId;
      this.currentPepeleGridName = item.gridName;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    async getFmOptions(field, url, params, cookFn) {
      const { data, code, msg } = await requestPost(url, {
        ...params,
      });

      if (code === 0) {
        this.options[field] =
          typeof cookFn == "function" ? cookFn(data) : data || [];
        this.options[field].forEach((item) => {
          this.optionsDict[field][item.value] = item.label;
        });
        console.log("红红火火恍恍惚惚或或或或或或或或", this.optionsDict);
      } else {
        this.$message.error("请求基础数据失败！");
      }
    },

    handleSearch() {
      this.selectionAll = [];
      this.loadTable();
    },

    async loadTable() {
      this.tableLoading = true;

      const url = "/epmetuser/icEpidemicSpecialAttention/list";
      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icEpidemicSpecialAttention/list"
      let params = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        ...this.formData,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.total = data.total;
        this.tableData = data.list;

        this.analysisTableSelection();
        this.tableData.forEach((item) => {
          if (!item.allName) {
            item.allName = "--";
          }
          item.roomShow = "";
          if (
            !item.villageName &&
            !item.buildName &&
            !item.unitName &&
            !item.homeName
          ) {
            item.roomShow = "--";
          } else {
            if (item.villageName) {
              item.roomShow = item.roomShow + item.villageName;
            }
            if (item.buildName) {
              item.roomShow = item.roomShow + item.buildName;
            }
            if (item.unitName) {
              item.roomShow = item.roomShow + item.unitName;
            }
            if (item.villageName) {
              item.roomShow = item.roomShow + item.homeName;
            }
          }
        });
      } else {
        this.$message.error(msg);
      }
      this.tableLoading = false;
    },

    handleChangeV(val) {
      console.log("val", val);
      this.formData.buildId = "";
      this.formData.unitId = "";
      this.formData.homeId = "";
      this.getBuildList();
      this.getUniList();
      this.getHouseList();
    },
    handleChangeB(val) {
      console.log("val", val);
      this.formData.unitId = "";
      this.formData.homeId = "";
      this.getUniList();
      this.getHouseList();
    },
    handleChangeD() {
      this.formData.homeId = "";
      this.getHouseList();
    },

    getValiheList() {
      const { user } = this.$store.state;
      this.$http
        .post("/gov/org/icneighborhood/neighborhoodoption", {
          gridId: this.formData.GRID_ID,
          agencyId: user.agencyId,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsV = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },

    getBuildList() {
      this.$http
        .post("/gov/org/icbuilding/buildingoption", {
          neighborHoodId: this.formData.villageId,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsB = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    getUniList() {
      this.$http
        .post("/gov/org/icbuildingunit/unitoption", {
          buildingId: this.formData.buildId,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsD = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    getHouseList() {
      this.$http
        .post("/gov/org/ichouse/houseoption", { unitId: this.formData.unitId })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsH = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },

    handleSelectTable(selection, row) {
      row.isSel = !row.isSel;

      if (row.isSel) {
        this.selectionAll.push(row);
      } else {
        for (let i = 0; i < this.selectionAll.length; i++) {
          let item = this.selectionAll[i];
          if (item.idCard === row.idCard) {
            this.selectionAll.splice(i, 1);
            break;
          }
        }
      }
    },

    handleSelAll(selection) {
      let selFlag = selection.length > 0; //全选选中 还是 全选不选中
      for (let i = 0; i < this.tableData.length; i++) {
        let tableItem = this.tableData[i];
        tableItem.isSel = selFlag;
        let isHasItem = false;
        for (let j = 0; j < this.selectionAll.length; j++) {
          let selectionItem = this.selectionAll[j];
          if (selectionItem.idCard === tableItem.idCard) {
            isHasItem = true;
            if (!selFlag) {
              this.selectionAll.splice(j, 1);
              break;
            }
          }
        }

        if (!isHasItem && selFlag) {
          this.selectionAll.push(tableItem);
        }
      }
    },

    //回显列表选中的行
    analysisTableSelection() {
      this.$nextTick(() => {
        this.tableData.forEach((tableItem) => {
          for (let j = 0; j < this.selectionAll.length; j++) {
            let selectionItem = this.selectionAll[j];

            if (selectionItem.idCard === tableItem.idCard) {
              tableItem.isSel = true;
              break;
            }
          }
          if (tableItem.isSel) {
            this.$refs.ref_table.toggleRowSelection(tableItem);
          }
        });
      });
    },

    diaClose() {
      this.addFormShow = false;
      this.editFormShow = false;
      this.sendNoticeFormShow = false;
      this.noticeListFormShow = false;
      this.visiteListFormShow = false;
    },

    handleAdd() {
      this.addFormShow = true;
      this.$nextTick(() => {
        this.$refs.ref_form_add.initForm(null, this.agencyId);
      });
    },

    async handleEdit(row) {
      this.editFormTitle = "修改核酸检测关注名单";
      this.editFormShow = true;
      const row1 = { ...row };
      let row2 = await this.getInfo(row1);
      this.$refs.ref_form_edit.initForm("edit", row2);
    },

    async handleDetail(row) {
      this.editFormTitle = "查看核酸检测关注名单";
      this.editFormShow = true;
      const row1 = { ...row };
      let row2 = await this.getInfo(row1);
      this.$refs.ref_form_edit.initForm("detail", row2);
    },

    async getInfo(row) {
      const url = "/epmetuser/icEpidemicSpecialAttention/detail";

      let params = {
        id: row.id,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        row.mobile = data.mobile;
        row.idCard = data.idCard;
      }
      return row;
    },

    handleSendNotice() {
      if (this.selectionAll.length === 0) {
        this.$message.info("请选择要通知的人员");
        return false;
      }
      this.sendNoticeFormShow = true;
      this.$nextTick(() => {
        this.$refs.ref_sendnotice.initForm(this.selectionAll, "2");
      });
    },

    handleNoticeList(row) {
      this.noticeListFormShow = true;
      this.$nextTick(() => {
        this.$refs.ref_noticelist.initTable(row.idCard, "2");
      });
    },
    handleVisiteList(row) {
      this.visiteListFormShow = true;
      this.$nextTick(() => {
        this.$refs.ref_visitelist.initTable(row, "2");
      });
    },

    addFormOk() {
      this.addFormShow = false;
      this.editFormShow = false;

      this.loadTable();
    },
    sendNoticeOk() {
      this.sendNoticeFormShow = false;
      this.selectionAll = [];
      this.loadTable();
    },

    async handleDelete(row) {
      if (this.selectionAll.length === 0) {
        this.$message.info("请选择要取消关注的名单");
        return false;
      }
      this.$confirm("确认取消关注选择的名单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteFocus(row);
        })
        .catch((err) => {
          if (err == "cancel") {
          }
        });
    },

    async deleteFocus(row) {
      const url = "/epmetuser/icEpidemicSpecialAttention/cancel-attention";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/placepatrolteam/del"
      let ids = [];

      this.selectionAll.forEach((element) => {
        ids.push(element.id);
      });
      let params = {
        attentionType: 2,
        ids: ids,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message({
          type: "success",
          message: "操作成功",
        });

        this.loadTable();
      } else {
        this.$message.error(msg);
      }
    },

    //重置搜索条件
    resetSearch() {
      this.formData = {
        attentionType: 2, //关注类型，核酸检测：2，疫苗接种：1
        name: "",
        mobile: "",
        idCard: "",
        vaccinationCount: "",
      };

      this.pageNo = 1;
      // this.loadTable()
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.loadTable();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.loadTable();
    },

    //导出表格
    async handleExport() {
      let title = "核酸检测关注名单";

      const url = "/epmetuser/icEpidemicSpecialAttention/vaccination-export";

      app.ajax.exportFilePost(
        url,
        this.formData,
        (data, rspMsg) => {
          this.download(data, title + ".xlsx");
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg);
        }
      );
    },

    // 下载文件
    download(data, fileName) {
      if (!data) {
        return;
      }

      var csvData = new Blob([data]);

      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(csvData, fileName);
      }
      // for Non-IE (chrome, firefox etc.)
      else {
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        var url = window.URL.createObjectURL(csvData);
        a.href = url;
        a.download = fileName;
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
      }
    },

    handleExportModule() {
      let title = "核酸检测关注名单模板";

      const url = "/epmetuser/icEpidemicSpecialAttention/export-template";
      let params = {
        attentionType: "2",
      };

      app.ajax.exportFilePost(
        url,
        params,
        (data, rspMsg) => {
          this.download(data, title + ".xlsx");
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg);
        }
      );
    },

    // 上传文件之前的钩子
    beforeUpload(file) {
      const array = file.name.split(".");
      const extension = array[array.length - 1];
      // const isLt1M = (file.size / 1024 / 1024) < 5
      if (extension !== "xlsx") {
        this.$message.error("只能上传xlsx文件！");
        return false;
      } else {
        this.files = file;
        this.fileName = file.name;
        return true;
      }
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`);
    },

    async uploadFile() {
      if (this.fileName == "") {
        this.$message.warning("请选择要上传的文件！");
        return false;
      }

      this.$message({
        showClose: true,
        message: "导入中，请到系统管理-导入记录中查看进度",
        duration: 0,
      });

      //清空上传列表
      this.$refs["upload"].clearFiles();

      var url = "/epmetuser/icEpidemicSpecialAttention/vaccination-import";

      let fileFormData = new FormData();
      fileFormData.append("file", this.files); //filename是键，file是值，就是要传的文件，test.zip是要传的文件名
      fileFormData.append("attentionType", "2"); //filename是键，file是值，就是要传的文件，test.zip是要传的文件名

      window.app.ajax.post2(
        url,
        fileFormData,
        (data, rspMsg) => {
          if (data.code === 0 && data.msg == "success") {
            // this.$message.success('导入成功')
          } else {
            // this.$message({
            //   showClose: true,
            //   message: rspMsg,
            //   duration: 0,
            //   type: "error"
            // })
            // this.$message.error(rspMsg)
          }

          // this.loadTable()
        },
        (rspMsg, data) => {},
        { headers: { "Content-Type": "multipart/form-data" } }
      );
    },

    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {
    tableHeight() {
      return this.$store.state.inIframe
        ? this.clientHeight - 415 + this.iframeHeight
        : this.clientHeight - 415;
    },

    ...mapGetters(["clientHeight", "iframeHeight"]),
  },
  watch: {},
  props: {},
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/management/epidemic.scss";
</style>
