<template>
  <div class="g-main">
    <div class="m-search">
      <!-- <el-collapse v-if="openSearch"
                   v-model="activeNames">
        <el-collapse-item v-for="item in searchList"
                          :key="item.itemGroupId"
                          :name="item.itemGroupId">
          <template slot="title">
            <div class="collapse-title">{{ item.groupName }}</div>
          </template>
          <resi-search v-if="searchList.length > 0"
                       :ref="'resiSearch' + item.itemGroupId"
                       :form-list="item.queryItemList"
                       :column-name="defaultCategotyKey"
                       :show-grid="item.groupName == '基础信息'" />
        </el-collapse-item>
      </el-collapse> -->
      <!-- <template v-else> -->

      <!-- </template> -->
      <!-- <el-row v-if="openSearch"
              class="resi-search">

        <el-col :span="24">
          <el-button size="small"
                     class="diy-button--blue"
                     @click="handleSearchFrom">查询</el-button>
          <el-button style="margin-left:10px"
                     size="small"
                     class="diy-button--gray"
                     @click="resetSearchForm">重置</el-button>
        </el-col>
      </el-row> -->
      <!-- <div class="resi-down"
           @click="handleOpenSearch">
        <img v-if="openSearch"
             src="../../../assets/img/arrow-up.png" />
        <img v-else
             src="../../../assets/img/arrow-down.png" />
      </div> -->
      <resi-search ref="myResiSearch" />
      <el-row class="resi-search">
        <el-col :span="24">
          <el-button
            size="small"
            class="diy-button--blue"
            @click="handleSearchFrom"
            >查询</el-button
          >
          <!--  -->
          <el-button
            style="margin-left: 10px"
            size="small"
            class="diy-button--white"
            @click="resetSearchForm"
            >重置</el-button
          >
          <!-- resetSearchForm -->
        </el-col>
      </el-row>
    </div>

    <div class="m-table">
      <div class="div_btn">
        <div class="div_btn_left">
          <el-button
            v-if="btnAuths.ic_resi_add"
            size="small"
            @click="handleAdd"
            class="diy-button--blue"
            icon="el-icon-plus"
          >
            新增</el-button
          >
          <el-button
            v-if="btnAuths.ic_resi_export"
            style="margin-left: 10px"
            size="small"
            @click="diyExport"
            class="diy-button--white"
            >导出</el-button
          >

          <!-- <el-button v-if="btnAuths.ic_resi_import"
                     style="margin-left:10px"
                     class="diy-button--blue"
                     size="small"
                     @click="handleExportModule('room')">下载模板</el-button> -->
          <!-- <el-upload v-if="btnAuths.ic_resi_import"
                     :headers="$getElUploadHeaders()"
                     ref="upload"
                     class="upload-demo"
                     action="uploadUlr"
                     :limit="1"
                     :accept="'.xls,.xlsx'"
                     :with-credentials="true"
                     :show-file-list="false"
                     :auto-upload="true"
                     :on-progress="handleProgress"
                     :on-success="handleExcelSuccess"
                     :before-upload="beforeExcelUpload"
                     :http-request="uploadHttpRequest">
            <el-button style="margin-left:10px"
                       class="diy-button--yellow"
                       size="small"
                       :loading="importLoading">{{ importBtnTitle }}</el-button>
          </el-upload> -->

          <el-button
            v-if="btnAuths.ic_resi_smart_import && displayedBaobiaoBtn"
            style="margin-left: 10px"
            size="small"
            @click="reportForm"
            class="diy-button--white"
            >核对</el-button
          >

          <el-button
            style="margin-left: 10px"
            v-if="btnAuths.ic_resi_batch_del"
            size="small"
            @click="deleteBatch"
            class="diy-button--white"
            >批量删除</el-button
          >
          <!-- <el-button type="primary" size="small">下载人口模板</el-button> -->
        </div>
      </div>

      <el-table
        ref="ref_table"
        class="m-table-item"
        :data="tableData"
        v-loading="tableLoading"
        border
        style="width: 100%"
        :height="tableHeight"
        @select-all="selectAll"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          fixed="left"
          align="center"
          :selectable="checkSelectable"
          width="50"
        />
        <el-table-column
          label="序号"
          type="index"
          fixed="left"
          align="left"
          width="50"
        >
        </el-table-column>
        <el-table-column
          v-for="item in tableHeader"
          :key="item.columnName"
          :prop="item.columnName"
          :label="item.label"
          align="left"
          :show-overflow-tooltip="true"
          :width="item.width || ''"
        >
          <template slot-scope="scope">
            <a
              v-if="item.columnName == 'NAME' && btnAuths.ic_resi_view"
              class="name-a"
            >
              {{ handleFilterSpan(scope.row, item) }}
            </a>
            <div v-else-if="item.columnName == 'gender'">
              {{ scope.row.gender == 1 ? "男" : "女" }}
            </div>
            <div v-else-if="item.columnName == 'birthday'">
              {{ scope.row.birthday.substr(0, 10) }}
            </div>
            <div v-else-if="item.columnName == 'idNum'">
              {{
                `${scope.row.idNum.substr(0, 11)}` +
                "******" +
                `${scope.row.idNum.substr(16, 2)}`
              }}
            </div>
            <div v-else-if="item.columnName == 'mobile'">
              {{
                `${scope.row.mobile.substr(0, 3)}` +
                "******" +
                `${scope.row.mobile.substr(7, 4)}`
              }}
            </div>
            <span v-else>{{ handleFilterSpan(scope.row, item) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="btnAuths.ic_resi_view"
              type="text"
              class="div-table-button--blue"
              size="small"
              @click="handleLook(scope.row)"
              >查看</el-button
            >

            <template v-if="filterEdit(scope.row.agencyId)">
              <el-button
                v-if="btnAuths.ic_resi_update"
                style="margin-right: 10px"
                @click="handleEdit(scope.row)"
                class="div-table-button--blue"
                size="small"
                type="text"
                >编辑</el-button
              >

              <el-popconfirm
                v-if="btnAuths.ic_resi_del"
                title="删除之后无法回复，确认删除？"
                @onConfirm="handleDel(scope.row)"
              >
                <el-button
                  class="div-table-button--blue"
                  size="small"
                  type="text"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>

              <el-dropdown
                trigger="click"
                style="margin-left: 10px"
                @command="(command) => handelRegister(command, scope.row)"
              >
                <el-button
                  class="div-table-button--blue"
                  size="small"
                  type="text"
                  style="font-size: 10px"
                >
                  ▪▪▪</el-button
                >
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="btnAuths.ic_resi_change_rec"
                    command="bgjl"
                    >变更记录</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="btnAuths.ic_resi_update"
                    command="swdj"
                    >死亡登记</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="btnAuths.ic_resi_update"
                    command="qcdj"
                    >迁出登记</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <div class="div-flex">
        <div class="m-page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, total"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog
      :title="formName === '社区居民基本信息录入表' ? '新增居民' : formName"
      :visible.sync="dialogVisible"
      width="986px"
      top="5vh"
      append-to-body
      class="dialog-h"
      :close-on-click-modal="false"
      :before-close="handlerCancle"
    >
      <div class="dialog-h-content scroll-h">
        <resi-form
          v-if="dialogVisible"
          ref="baseForm"
          :fixed="true"
          :form-list="formList"
          :resi-id="editUserId"
          @changegroup="handleChangeGroup"
        />
        <!-- <div v-if="dialogVisible"
             class="resi-other">
          <div class="tabs-other-info">
            <el-tabs v-model="activeName"
                     @tab-click="handleClick">
              <el-tab-pane v-for="item in tabsList"
                           :key="item.groupId"
                           :label="item.label"
                           :name="'group' + item.groupId">
                <resi-form :ref="'group' + item.groupId"
                           :columns="3"
                           :form-info="item.formInfo && item.formInfo"
                           :support-add="item.supportAdd"
                           :form-id="item.columnName"
                           :form-list="item.itemList" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div> -->
      </div>

      <div class="resi-btns">
        <el-button
          size="small"
          v-if="false"
          @click="handlerReset"
          class="diy-button--common"
          >重置</el-button
        >
        <el-button
          size="small"
          @click="handlerCancle"
          class="diy-button--common"
          >取消</el-button
        >
        <el-button
          v-if="!editUserId"
          type="primary"
          size="small"
          :loading="btnLoading"
          @click="handleSUbmit"
          class="diy-button--blue"
          >保存</el-button
        >

        <el-button
          v-else
          type="primary"
          size="small"
          :loading="btnLoading"
          @click="handleEditSUbmit"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="居民详情"
      :visible.sync="dialogVisible2"
      width="986px"
      top="5vh"
      append-to-body
      class="dialog-h"
      :close-on-click-modal="false"
      :before-close="() => {this.dialogVisible2 = false}"
    >
      <div class="dialog-h-content scroll-h">
        <resi-info
          v-if="dialogVisible2"
          ref="resiInfo"
          :fixed="true"
          :resi-id="lookResiId"
          :resiDetailList='resiDetailList'
        />
      </div>

      <div class="resi-btns">
        <el-button
          size="small"
          @click="dialogVisible2 = false"
          class="diy-button--common"
          >关闭</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="formName"
      :visible.sync="dialogEditVisible"
      width="986px"
      top="5vh"
      height="750px"
      append-to-body
      class="dialog-h"
      :close-on-click-modal="false"
      :before-close="handlerEditCancle"
    >
      <div class="dialog-h-content scroll-h">
        <edit-resi
          v-if="dialogEditVisible"
          ref="baseForm"
          :disabled="disabled"
          :editUserId="editUserId"
          :form-info="editForm"
          :fixed="true"
          :form-list="formList"
          :agency-id="editAgencyId"
          @changegroup="handleChangeGroup"
        />
        <div v-if="dialogEditVisible" class="resi-other">
          <div class="resi-other-title">其他</div>
          <div class="tabs-other-info">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                v-for="item in tabsList"
                :key="item.groupId"
                :label="item.label"
                :name="'group' + item.groupId"
              >
                <edit-resi
                  :ref="'group' + item.groupId"
                  :columns="3"
                  :support-add="item.supportAdd"
                  :form-id="item.columnName"
                  :muti-list="item.mutiList"
                  :form-list="item.itemList"
                  :disabled="disabled"
                  :label-width="'140px'"
                  :agency-id="editAgencyId"
                />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="resi-btns">
        <el-button size="small" @click="handlerEditCancle">取消</el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          size="small"
          :loading="btnLoading"
          @click="handleEditSUbmit"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <!-- 变更记录 -->
    <el-dialog
      :visible.sync="changeRecordShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="'变更记录'"
      width="1150px"
      top="5vh"
      @closed="diaClose"
    >
      <resi-change-record ref="ref_changerecord"></resi-change-record>
    </el-dialog>

    <el-dialog
      :visible.sync="diyDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1150px"
      top="5vh"
      class="dialog-h"
    >
      <diy-info
        v-if="diyDialog"
        ref="ref_diy"
        :list="exportList"
        :search="{
          formCode: 'resi_base_info',
          pageNo: currentPage,
          pageSize: pageSize,
          conditions: conditions,
        }"
        @close="handleDiyClose"
      ></diy-info>
    </el-dialog>

    <baobiao ref="baobiao" />

    <!-- 迁出登记 -->
    <el-dialog
      :visible.sync="tranferShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="'迁出登记'"
      width="620px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <resi-change-transfer
        ref="ref_change_transfer"
        @dialogCancle="transferClose"
      ></resi-change-transfer>
    </el-dialog>

    <!-- 死亡登记 -->
    <el-dialog
      :visible.sync="deathShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="'死亡登记'"
      width="620px"
      top="5vh"
      class="dialog-h"
      @closed="diaClose"
    >
      <resideath-add ref="ref_death" @dialogCancle="deathClose"></resideath-add>
    </el-dialog>
  </div>
</template>

<script>
import nextTick from "dai-js/tools/nextTick";
import resiSearch from "../../components/resiSearch.vue";
import resiForm from "../../components/resiForm.vue";
import resiInfo from "../../components/resiInfo.vue";
import editResi from "../../components/editResi.vue";
import axios from "axios";
import { mapGetters } from "vuex";
import resiTransfer from "../../components/resiTransfer.vue";
import resiChangeRecord from "../../components/resiChangeRecord.vue";

import baobiao from "@/views/modules/cpts/baobiao";
import diyInfo from "./diyInfo.vue";
import { requestPost } from "@/js/dai/request";

import resiChangeTransfer from "../../components/resiChangeTransfer.vue";
import resideathAdd from "../plugins/change/resideathAdd.vue";

export default {
  components: {
    baobiao,
    resiSearch,
    resiForm,
    resiInfo,
    editResi,
    resiTransfer,
    resiChangeRecord,
    diyInfo,

    resiChangeTransfer,
    resideathAdd,
  },
  data() {
    return {
      activeNames: [],
      diyDialog: false,
      openSearch: false,
      exportBtn: false,
      exportBtnTitle: "导出",
      importBtnTitle: "导入",
      importLoading: false,
      rowVisible: false,
      tableLoading: false,
      btnLoading: false,
      disabled: false,
      pageLoading: false,
      selAllFlag: false,
      selAllFlagDisabled: false,
      isIndeterminate: false,
      dialogEditVisible: false,
      dialogVisible: false,
      // 显示人员详情
      dialogVisible2: false,
      resiDetailList:{},//人员详情数据
      lookResiId: "",

      uploadUlr:
        window.SITE_CONFIG["apiURL"] + "/epmetuser/icresiuser/importExcel",
      currentPage: 1,
      pageSize: 20,
      total: null,
      searchH: 0,
      resideathAddObj1: {}, // 死亡登记子组件
      conditions: [],
      activeName: "",
      tableData: [],
      searchList: [],
      exportList: [],
      editAgencyId: "",
      editForm: {
        GRID_ID: "",
        VILLAGE_ID: "",
        BUILD_ID: "",
        HOME_ID: "",
      },
      editTableName: {},
      formName: "",
      formList: [],
      tableHeader: [
        { columnName: "name", label: "姓名", width: 150 },
        { columnName: "birthday", label: "生日", width: 150 },
        { columnName: "gender", label: "性别", width: 80 },
        { columnName: "gridName", label: "所属网格" },
        { columnName: "homeName", label: "所属房屋" },
        { columnName: "idNum", label: "证件号", width: 200 },
        { columnName: "mobile", label: "联系电话", width: 150 },
      ],
      tabsList: [],
      selection: [],

      defaultCategotyKey: "",

      tranferShow: false,
      deathShow: false,
      changeRecordShow: false,
      lookInfo: {
        userId: "",
        gridName: "",
      },
      editUserId: "",

      displayedBaobiaoBtn: false,

      btnAuths: {
        ic_resi_add: true, //新增
        ic_resi_import: true, //导入
        ic_resi_export: true, //导出
        ic_resi_batch_del: true, //批量删除
        ic_resi_smart_import: true, //智能填表
        ic_resi_del: true, //删除
        ic_resi_view: true, //查看
        ic_resi_update: true, //修改
        ic_resi_change_rec: true, //变更记录
        ic_resi_view_real_data: true, //显示脱敏信息
      },
    };
  },

  props: {},

  async activated() {
    console.log("this.$route.query---", this.$route.query);
    if (this.$route.query && this.$route.query.columnName) {
      this.searchList = [];
      let query = this.$route.query;
      this.defaultCategotyKey = query.columnName;
      console.log("defaultCategotyKey----", this.defaultCategotyKey);
    }
  },

  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    tableHeight() {
      const h = this.clientHeight - this.searchH - 275 + this.iframeHeight;
      const _h = this.clientHeight - 275 - this.searchH;
      return this.$store.state.inIframe ? h : _h;
    },
  },

  async created() {
    this.updateBtnAuths();

    if (this.$route.query) {
      let query = this.$route.query;
      this.defaultCategotyKey = query.columnName;
    }

    // await this.getFormList()

    // console.log('this.$refs.resiSearch', this)
    this.getTableData();
    this.pageLoading = true;
    console.log("storeoooo----0000", this.$store);
  },

  async mounted() {
    // this.$nextTick(() => {
    //   this.tableHeight = document.documentElement.clientHeight - this.$refs.resiSearch.$el.offsetHeight - 280 + 'px'
    // })
    console.log(
      "document.documentElement.clientWidth",
      document.documentElement.clientHeight
    );
    this.displayedBaobiaoBtn = await this.$refs.baobiao.existsTemplate({
      elseParams: {
        categoryKeys: ["resi_info"],
        categoryKey: "resi_info",
      },
    });
  },

  methods: {
    // 更新按钮权限
    updateBtnAuths() {
      let rot = this.$route;
      if (Array.isArray(rot.meta.btns)) {
        rot.meta.btns.forEach((item) => {
          this.btnAuths[item.permissions] = true;
        });
      }
    },
    handelRegister(command, row) {
      console.log(command);
      console.log(row);
      if (command == "bgjl") {
        this.handleChangeRecord(row);
      } else if (command == "swdj") {
        this.handleDeath(row);
      } else if (command == "qcdj") {
        this.handleChangeTransfer(row);
      }
    },
    reportForm() {
      this.$refs.baobiao.init({
        elseParams: {
          categoryKeys: ["resi_info"],
          categoryKey: "resi_info",
          paramMap: {
            searchForm: {
              formCode: "resi_base_info",
              pageNo: this.currentPage,
              pageSize: this.pageSize,
              conditions: this.conditions,
            },
          },
        },
      });
    },
    handleSearchFrom() {
      let obj = this.$refs.myResiSearch.form
      if (obj.categoryKey.length == 0) {
        obj.categoryKey = "";
      } else  {
        obj.categoryKey = obj.categoryKey.join(',')
        console.log(obj.categoryKey);
        // obj.categoryKey.forEach((element) => {
        //   console.log(element,obj.categoryKey);
        //   obj.categoryKey = obj.categoryKey + "," + element;
        // });
      }
      if (obj.agencyId.length == 0) {
        obj.agencyId = "";
      } else  {
        obj.agencyId = obj.agencyId.join(',')
      }

      this.getTableData(obj)
      this.$refs.myResiSearch.form.categoryKey = []
      this.$refs.myResiSearch.form.agencyId = []
    },
    // 是否可以选中
    checkSelectable(row, index) {
      return this.filterEdit(row.agencyId);
    },

    //迁出记录
    async handleChangeTransfer(row) {
      this.tranferShow = true;
      await nextTick(200);
      this.$refs.ref_change_transfer.initForm(row);
    },
    //死亡记录
    async handleDeath(row) {
      console.log("=====", row);
      this.deathShow = true;
      await nextTick(200);
      this.$refs.ref_death.initForm(row);
    },

    //变更记录
    async handleChangeRecord(row) {
      this.changeRecordShow = true;
      await nextTick(200);
      this.$refs.ref_changerecord.initForm(row);
    },

    diaClose() {
      this.tranferShow = false;
      this.deathShow = false;
      this.changeRecordShow = false;
    },

    transferClose() {
      this.tranferShow = false;
      this.getTableData();
    },
    deathClose() {
      this.deathShow = false;
      this.getTableData();
    },
    handleDiyClose() {
      this.diyDialog = false;
    },
    handleOpenSearch() {
      if (!this.openSearch) this.activeNames = [this.searchList[0].itemGroupId];
      this.openSearch = !this.openSearch;
    },
    async diyExport() {
      await this.getExportList();
    },
    computedWidth(label, type) {
      let wd = "";
      if (type == "input" || type == "select") wd = 40 * label.length;
      else if (type == "radio") wd = 20 * label.length;
      console.log("type-----wd", wd);
      return wd > 80 ? wd : 80;
    },
    filterEdit(id) {
      const { user } = this.$store.state;
      // return true; //临时放开权限，正式需要注释掉
      return id === user.agencyId;
    },
    selectionChange(selection) {
      this.selection = selection;

      if (selection.length === this.tableData.length) {
        this.selAllFlag = true;
        this.isIndeterminate = false;
      } else if (selection.length > 0) {
        this.selAllFlag = false;
        this.isIndeterminate = true;
      } else {
        this.selAllFlag = false;
        this.isIndeterminate = false;
      }
    },
    handleSelectAll(selectAllFlag) {
      // if (this.tableData.length == 0) {
      //   this.selAllFlag = false
      //   return
      // }
      this.$refs.ref_table.clearSelection();
      if (selectAllFlag) {
        this.tableData.forEach((row) => {
          // this.$refs.ref_table.toggleRowSelection(row);
          if (row.isChecked) {
            this.$refs.ref_table.toggleRowSelection(row);
          }
        });
      }
    },
    selectAll(selection) {
      this.selection = selection;

      if (selection.length > 0) {
        this.selAllFlag = true;
      } else {
        this.selAllFlag = false;
      }
    },
    getResiDetail(id){
      this.$http.post(`/actual/base/residentBaseInfo/detail/${id}`).then(res=>{
      this.resiDetailList = res.data.data
     }).catch(err =>{
        console.log(err);
     })
    
    },
    deleteBatch() {
      if (this.selection.length > 0) {
        this.$confirm("删除之后无法恢复，确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.deleteresiBatch();
          })
          .catch((err) => {
            if (err == "cancel") {
              // this.$message({
              //   type: "info",
              //   message: "已取消删除"
              // });
            }
          });
      } else {
        this.$message.warning("请先选择要删除的居民");
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getTableData();
    },
    handleFilterSpan(row, item) {
      let _val = "";
      if (item.itemType === "radio" && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value === row[item.columnName]) _val = n.label;
        });
        if (row[item.columnName] == "0") return (_val = "");
      }

      return _val || row[item.columnName];
    },

    resetSearchForm(formName) {
      for(const n in this.form) {
        this.$refs.myResiSearch.form[n] = ''
      }
      this.getTableData();
    },
    async handleExportModule() {
      let url = "/epmetuser/icresiuser/import/download-template";

      let params = {};
      await this.$http({
        method: "POST",
        url,
        responseType: "blob",
        data: params,
      })
        .then((res) => {
          console.log("res----dddd", res);
          // this.download(res.data, title + '.xls')
          if (res.headers["content-disposition"]) {
            let fileName = window.decodeURI(
              res.headers["content-disposition"].split(";")[1].split("=")[1]
            );
            console.log("filename", fileName);
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
            });
            var url = window.URL.createObjectURL(blob);
            var aLink = document.createElement("a");
            aLink.style.display = "none";
            aLink.href = url;
            aLink.setAttribute("download", fileName);
            document.body.appendChild(aLink);
            aLink.click();
            document.body.removeChild(aLink); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          } else this.$message.error("下载失败");
        })
        .catch((err) => {
          console.log("err", err);
          return this.$message.error("网络错误");
        });
    },
    // 下载文件
    download(data, fileName) {
      console.log("data", data);
      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);
      }
    },
    async handleExport() {
      this.exportBtn = true;
      this.exportBtnTitle = "正在导出...";
      let params = {
        formCode: "resi_base_info",
        conditions: this.conditions,
      };

      // .post('epmetuser/icresiuser/exportExcel', params)
      await axios({
        url: window.SITE_CONFIG["apiURL"] + "/epmetuser/icresiuser/exportExcel",
        // url: 'epmetuser/icresiuser/exportExcel',
        method: "post",
        data: params,
        responseType: "blob",
      })
        .then((res) => {
          console.log("resllll", res);
          let fileName = window.decodeURI(
            res.headers["content-disposition"].split(";")[1].split("=")[1]
          );
          console.log("filename", fileName);
          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          var url = window.URL.createObjectURL(blob);
          var aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", fileName);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        })
        .catch((err) => {
          console.log("获取导出情失败", err);
          this.$message.error("获取导出失败");
        });
      this.exportBtnTitle = "导出";
      this.exportBtn = false;
    },
    // 上传大图标成功
    handleExcelSuccess(res, file) {
      if (res.code === 0 && res.msg === "success") {
        console.log("resss---ppp", res);
      } else {
        this.$message.error(res.msg);
      }
    },
    handleProgress(event, file, fileList) {
      console.log("percentage", file.percentage);
    },

    beforeExcelUpload(file) {
      console.log("file", file);
      const isType = file.type === "application/vnd.ms-excel";
      const isTypeComputer =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const fileType = isType || isTypeComputer;
      const isLt1M = file.size / 1024 / 1024 < 100;
      if (!fileType) {
        this.$message.error("上传文件只能是xls/xlsx格式！");
      }

      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 100MB!");
      }
      return fileType && isLt1M;
    },
    async uploadHttpRequest(file) {
      this.importLoading = true;
      this.importBtnTitle = "正在上传中...";
      this.$message({
        showClose: true,
        message: "导入中，请到系统管理-导入记录中查看进度",
        duration: 0,
      });
      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append("file", file.file); //添加文件对象
      await this.$http
        .post("/epmetuser/icresiuser/importExcel", formData)
        .then((res) => {
          console.log("res-up", res);
          if (res.data.code == 0 && res.data.msg == "success") {
            // this.$message.success('导入成功')
            this.getTableData();
          } else this.$message.error(res.data.msg);
        })
        .catch((err) => {
          console.log("失败", err);
          file.onError(); //上传失败的文件会从文件列表中删除
          // this.$message.error('导入失败')
        });
      // await axios({
      //   url: window.SITE_CONFIG['apiURL'] + '/epmetuser/icresiuser/importExcel',
      //   method: 'post',
      //   data: formData,
      //   timeout: '300000',
      //   responseType: 'blob'
      // })
      //   .then((res) => {
      //     console.log('res-up', res)
      //     // if (res.headers["content-disposition"]) {
      //     //   let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
      //     //   console.log('filename', fileName)
      //     //   let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
      //     //   var url = window.URL.createObjectURL(blob)
      //     //   var aLink = document.createElement('a')
      //     //   aLink.style.display = 'none'
      //     //   aLink.href = url
      //     //   aLink.setAttribute('download', fileName)
      //     //   document.body.appendChild(aLink)
      //     //   aLink.click()
      //     //   document.body.removeChild(aLink) //下载完成移除元素
      //     //   window.URL.revokeObjectURL(url) //释放掉blob对象
      //     // }

      //     this.getTableData()
      //   })
      //   .catch(err => {
      //     console.log('失败', err)
      //     file.onError() //上传失败的文件会从文件列表中删除
      //     this.$message.error('导入失败')
      //   })
      this.importLoading = false;
      this.importBtnTitle = "导入";
      this.$refs.upload.clearFiles();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 查看
    async handleLook(row) {
      this.lookResiId = row.resiId;
      this.dialogVisible2 = true;
      this.getResiDetail(row.resiId)
    },

    // 编辑
    async handleEdit(row) {
      this.editUserId = row.resiId;
      this.formName = "编辑居民";
      this.dialogVisible = true;
      await this.residentBaseInfo();
    },
    // 获取详情
    residentBaseInfo () {
      this.$http.post(`/actual/base/residentBaseInfo/detail/${this.editUserId}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          this.$refs.baseForm.old_from(res.data);
        }
      }).catch((err) => {
        return this.$message.error("网络错误");
      });
    },
    handlerReset() {
      this.$refs.baseForm.resetForm();
    },

    async handleAdd() {
      this.formName = "新增居民";
      this.editUserId = "";
      this.dialogVisible = true;
    },

    async handleChangeGroup(val) {
      console.log("changeguoprrrrr----", val);
      let { childGroup, value, partyInfo } = val;
      let hasT = false;
      let i = 0;
      let list = [...this.tabsList];
      list.forEach((item, index) => {
        if (item.tableName === childGroup.tableName) {
          hasT = true;
          i = index;
        }
      });
      if (value === true || value === "true") {
        // console.log('changegroup----999', value)
        if (!hasT) {
          childGroup.itemList.forEach(async (item) => {
            if (item.optionSourceType === "remote") {
              await this.getOptionsList(item.optionSourceValue).then((res) => {
                item.options = this.getTreeData(res);
              });
              // console.log('')
            }
          });
          if (
            partyInfo &&
            partyInfo.length > 0 &&
            childGroup.tableName == "ic_party_member"
          ) {
            list.push({ ...childGroup, formInfo: partyInfo[0] });
          } else list.push(childGroup);
        }
      } else {
        // console.log('changegroup----000', value)
        if (hasT) list.splice(i, 1);
      }
      this.tabsList = [...list];
    },
    formetForm() {
      const _baseForm = this.$refs.baseForm.handleForm();
      let arr = [];
      if (_baseForm.length === 0) return false;
      arr.push([..._baseForm]);
      this.tabsList.forEach((item) => {
        arr.push([...this.$refs["group" + item.groupId][0].handleForm()]);
      });
      let arr2 = arr.reduce(function (a, b) {
        return a.concat(b);
      });
      let noChange = true;
      arr2.forEach((item) => {
        if (item.list.length !== 0) noChange = false;
      });
      console.log("arr2", arr2);
      if (noChange) {
        this.$message.warning("您还没有做任何修改");
        return false;
      }
      // 合并相同tableName的多个数组
      let hash = {};
      let i = 0;
      let res = [];
      let finalArr = [];
      arr2.forEach(function (item) {
        let name = item.tableName;
        if (hash[name]) {
          res[hash[name] - 1].list.push(...item.list);
        } else {
          hash[name] = ++i;
          res.push({
            list: [...item.list],
            supportAdd: item.supportAdd,
            tableName: name,
          });
        }
      });
      console.log("res", res);
      // 多个list合并成一个list子集
      res.forEach((item) => {
        let _form = {};
        item.list.length > 0 &&
          item.list.forEach((n) => {
            _form = { ..._form, ...n };
          });
        if (item.list.length > 0) {
          finalArr.push({
            tableName: item.tableName,
            list: item.supportAdd ? [...item.list] : [{ ..._form }],
          });
        }
      });
      console.log("finalArr", finalArr);
      return finalArr;
    },
    async handleEditSUbmit() {
      this.handleSUbmit()
    },

    async handleSUbmit() {
      const _baseForm = this.$refs.baseForm.submit_from();
      (_baseForm.partyFlag = parseInt(_baseForm.partyFlag)), //党员
        (_baseForm.subsistenceAllowanceFlag = parseInt(
          _baseForm.subsistenceAllowanceFlag
        )), //低保
        (_baseForm.ensureHouseFlag = parseInt(_baseForm.ensureHouseFlag)), //保障房
        (_baseForm.unemployedFlag = parseInt(_baseForm.unemployedFlag)), //失业
        (_baseForm.fertileWomanFlag = parseInt(_baseForm.fertileWomanFlag)), //育龄妇女
        (_baseForm.veteranFlag = parseInt(_baseForm.veteranFlag)), //退役军人
        (_baseForm.unitedFrontFlag = parseInt(_baseForm.unitedFrontFlag)), //统战人员
        (_baseForm.petitionOfficerFlag = parseInt(
          _baseForm.petitionOfficerFlag
        )), //信访人员
        (_baseForm.volunteerFlag = parseInt(_baseForm.volunteerFlag)), //志愿者
        (_baseForm.bereavedPersonFlag = parseInt(_baseForm.bereavedPersonFlag)), //失独
        (_baseForm.tenantFlag = parseInt(_baseForm.tenantFlag)), //租户
        (_baseForm.floatingFlag = parseInt(_baseForm.floatingFlag)), //流动人口
        (_baseForm.specialCrowdFlag = parseInt(_baseForm.specialCrowdFlag)), //特殊人群
        (_baseForm.oldPeopleFlag = parseInt(_baseForm.oldPeopleFlag)), //老年人
        (_baseForm.emptyNesterFlag = parseInt(_baseForm.emptyNesterFlag)), //空巢
        (_baseForm.liveAloneFlag = parseInt(_baseForm.liveAloneFlag)), //独居老人
        (_baseForm.disabledFlag = parseInt(_baseForm.disabledFlag)), //失能老人
        (_baseForm.dementedFlag = parseInt(_baseForm.dementedFlag)), //失智老人
        (_baseForm.disabilityFlag = parseInt(_baseForm.disabilityFlag)), //是否残疾
        (_baseForm.seriousIllnessFlag = parseInt(_baseForm.seriousIllnessFlag)), //大病
        (_baseForm.chronicDiseaseFlag = parseInt(_baseForm.chronicDiseaseFlag)); //慢病
        if (_baseForm.hobbyInfoDto) {
          if ((_baseForm.hobbyInfoDto.hobbyCode = [])) {
            _baseForm.hobbyInfoDto.hobbyCode = "";
          } else {
            _baseForm.hobbyInfoDto.hobbyCode.forEach((element) => {
              _baseForm.hobbyInfoDto.hobbyCode =
                _baseForm.hobbyInfoDto.hobbyCode ? _baseForm.hobbyInfoDto.hobbyCode + "," + element : _baseForm.hobbyInfoDto.hobbyCode;
            });
          }
        }
        if (_baseForm.volunteerDto) {
          if ((_baseForm.volunteerDto.volunteerCategory = [])) {
            _baseForm.volunteerDto.volunteerCategory = "";
          } else {
            _baseForm.volunteerDto.volunteerCategory.forEach((element) => {
              _baseForm.volunteerDto.volunteerCategory =
                _baseForm.volunteerDto.volunteerCategory ? _baseForm.volunteerDto.volunteerCategory  + "," + element : _baseForm.volunteerDto.volunteerCategory;
            });
          }
        }
        if (_baseForm.specialDto) {
          if ((_baseForm.specialDto.specialCategoryCode = [])) {
            _baseForm.specialDto.specialCategoryCode = "";
          } else {
            _baseForm.specialDto.specialCategoryCode.forEach((element) => {
              _baseForm.specialDto.specialCategoryCode =
                _baseForm.specialDto.specialCategoryCode ? _baseForm.specialDto.specialCategoryCode + "," + element : _baseForm.specialDto.specialCategoryCode;
            });
          }
        }
        this.submitAdd(_baseForm);
    },
    handleDel(row) {
      let params = {
        formCode: "resi_base_info",
        userIds: [row.icResiUserId],
      };
      console.log("row1", row);
      this.$http
        .post("/epmetuser/icresiuser/delete", params)
        .then(({ data: res }) => {
          console.log("row2", row);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("row3", row);
            this.$message.success("删除成功");
            this.getTableData();
          }
        })
        .catch((err) => {
          console.log("row4", err);
          return this.$message.error("网络错误");
        });
    },
    handleFormatUrl(url) {
      return url.includes("?");
    },
    handlerEditCancle() {
      this.$refs.baseForm.resetForm();
      this.tabsList.forEach((item) => {
        this.$refs["group" + item.groupId][0].resetForm();
      });
      this.dialogEditVisible = false;
    },
    handlerCancle() {
      // this.$refs.baseForm.resetForm();
      // this.tabsList.forEach((item) => {
      //   this.$refs["group" + item.groupId][0].resetForm();
      // });
      this.dialogVisible = false;
    },
    async submitAdd(arr) {
      this.btnLoading = true;
      await this.$http
        .post(arr.resiId ? "actual/base/residentBaseInfo/update" : "/actual/base/residentBaseInfo/save", arr)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success("提交成功");
            // this.$refs[formName].resetFields();

            this.dialogVisible = false;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
      // console.log(this.$refs.baseForm.form);
      this.btnLoading = false;
    },
    async submitEdit(arr) {
      this.btnLoading = true;
      await this.$http
        .post("/epmetuser/icresiuser/edit", arr)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success("提交成功");
            // this.$refs[formName].resetFields();
            this.$refs.baseForm.resetForm();
            this.tabsList.forEach((item) => {
              this.$refs["group" + item.groupId][0].resetForm();
            });
            this.getTableData();
            this.dialogEditVisible = false;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
      this.btnLoading = false;
    },

    async getTableData(obj) {
      let params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        ...obj
      };

      console.log('1369->>>>>>>>>>>>',params);
      this.tableLoading = true;
      const { data, code, msg } = await requestPost(
        "/actual/base/residentBaseInfo/page",
        params
      );
      this.tableLoading = false;
      if (code === 0) {
        this.total = data.total;
        this.tableData = data.list.map((item) => {
          item.isChecked = false;
          return item;
        });
      } else {
        this.$message.error(msg);
      }
    },

    getrowInfo(id) {
      let params = {
        formCode: "resi_base_info",
        icResiUserId: id,
      };
      this.$http
        .post("/epmetuser/icresiuser/detail", params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            // console.log('getrowInfo----', res.data)
            let info = res.data;
            this.editTableName = { ...info };
            let list = info[this.formList[0].tableName][0];
            for (let n in list) {
              this.editForm[n] = list[n];
            }
            this.formList.forEach((item) => {
              item.columnValue = list[item.columnName];
              item.ID = list.ID;

              if (
                item.columnValue == "1" &&
                item.itemType === "radio" &&
                item.childGroup
              ) {
                this.tabsList.push(item.childGroup);
              }

              // if (item.childGroup && info[item.childGroup.tableName]) {

              // }
            });
            this.tabsList.forEach((item) => {
              let _info = info[item.tableName];
              if (item.supportAdd) {
                // console.log('tabsList---333', item.label)
                const _list = [...item.itemList];
                let mutiList = [];
                if (_info) {
                  _info.forEach((fo, index) => {
                    // console.log('mutiList----555' + index, mutiList, _list)
                    mutiList.splice(index, 0, {
                      row: index,
                      itemList: _list.map((m) => {
                        // console.log('itemList---item' + index, m)
                        return {
                          ...m,
                          ID: fo.ID,
                          columnValue: fo[m.columnName],
                        };
                      }),
                    });
                    // console.log('mutiList----666' + index, mutiList)
                  });
                }
                item.mutiList = mutiList;
              } else {
                if (_info) {
                  item.itemList.forEach((n) => {
                    n.ID = _info[0].ID;
                    n.columnValue = _info[0][n.columnName];
                  });
                }
              }
            });
            // console.log('getrowInfo---formname', this.tabsList)
            this.dialogEditVisible = true;
          }
        })
        .catch((err) => {
          console.log("getrowInfo---formnameerr", err);
          return this.$message.error("网络错误");
        });
    },
    async getOptionsList(url) {
      let options = [];
      // console.log('getOptionsList----', url)
      await this.$http
        .post(url, { formCode: "resi_base_info" })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            options = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
      return options;
    },

    getTreeData(data) {
      if (!Array.isArray(data)) return [];
      let arr = data.map((item) => {
        let _item = {};
        if (item.children) {
          if (item.children.length === 0)
            _item = { ...item, children: undefined };
          else _item = { ...item, children: this.getTreeData(item.children) };
        } else {
          _item = { ...item };
        }
        return _item;
      });
      return arr;
    },

    async getFormList(type) {
      await this.$http
        .post("/oper/customize/icform/getcustomerform", {
          formCode: "resi_base_info",
          dynamic: true,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log(res.data, "res.data");
            console.log("获取详情成功getFormList");
            let { itemList, groupList, formName } = res.data;
            this.formName = formName;
            this.activeName = "group" + res.data.groupList[0].groupId;
            if (type !== "edit") {
              itemList.forEach(async (item) => {
                if (item.optionSourceType === "remote") {
                  await this.getOptionsList(item.optionSourceValue).then(
                    (res) => {
                      item.options = this.getTreeData(res);
                    }
                  );
                }
              });
            }
            groupList.forEach((item) => {
              item.itemList.forEach(async (n) => {
                n.tableName = item.tableName;
                if (n.optionSourceType === "remote" && type !== "edit") {
                  await this.getOptionsList(n.optionSourceValue).then((res) => {
                    n.options = this.getTreeData(res);
                  });
                }
              });
            });
            // }
            this.formList = itemList;
            this.tabsList = groupList;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    async getExportList(type) {
      const url = "/oper/customize//icformitemgroup/list";
      let params = {
        formCode: "resi_base_info",
      };

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

      if (code === 0) {
        data.forEach((item) => {
          (async (id) => {
            // item.queryItemList = await this.getExportChildList(id)
            item.queryItemList = [];
          })(item.id);
        });
        this.exportList = [...data];
        this.$nextTick(() => {
          this.diyDialog = true;
        });
        console.log("获取详情成功getExportList----", this.exportList);
      } else {
        this.$message.error(msg);
      }
    },
    async getExportChildList(groupId) {
      const url = `/oper/customize/icformitem/getItemList/${groupId}`;
      let params = {};

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

      if (code === 0) {
        return data;
      } else {
        this.$message.error(msg);
      }
    },
    async deleteresiBatch() {
      if (this.selection.length === 0)
        return this.$message.error("请选择之后进行操作");
      let userIds = this.selection.map((item) => item.icResiUserId);
      let params = {
        formCode: "resi_base_info",
        userIds,
      };
      this.$http
        .post("/epmetuser/icresiuser/delete", params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success("删除成功");
            this.getTableData();
          }
        })
        .catch((err) => {
          console.log("row4", err);
          return this.$message.error("网络错误");
        });
    },
  },
};
</script>

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

::v-deep .el-tabs__nav-next {
  box-shadow: 2px 0px 9px 0px;
}
::v-deep .el-tabs__nav-prev {
  box-shadow: -1px 0px 7px 0px;
}
.dialog-h {
  .el-dialog__body {
    position: relative;
    max-height: 83vh;
    box-sizing: border-box;
    padding: 0 0 20px !important;
    .dialog-h-content {
      max-height: calc(83vh - 80px);
      box-sizing: border-box;
      padding: 50px 80px;
      overflow: auto;
    }
  }
}
.resi-container ::v-deep .el-row {
  margin-right: 0;
}
.tabs-other-info {
  // ::v-deep .el-tabs__nav-wrap::after,
  ::v-deep .el-tabs__active-bar_active {
    background-color: #0055d7;
  }
}
::v-deep .el-tabs__item {
  // width: 50px;
  box-sizing: border-box;
  padding: 0 10px !important;
  font-size: 14px;
  font-weight: 600;
  color: #666666;
  border-radius: 2px;
  &:hover {
    color: #0056d6;
  }
}
::v-deep .el-tabs__item.is-active {
  color: #0056d6;
}
::v-deep .el-tabs__active-bar {
  background-color: #0056d6;
}
.resi-container .resi-card {
  position: relative;
  overflow: visible;
}
::v-deep .el-button--primary.is-plain {
  color: #0055d7;
  background: #ffffff;
  border-color: #0055d7;
}
.resi-container .resi-card-table {
  ::v-deep .el-table th {
    color: #fff;
    background-color: rgba(33, 149, 254, 1);
    // border-right: 1px solid rgba(33, 149, 254, 1);
  }
}
.collapse-title {
  font-weight: bold;
}
::v-deep .el-button--text {
  color: #000;
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
  ::v-deep .btn-color-del {
    margin-left: 10px;
    color: rgba(213, 16, 16, 1);
  }
  ::v-deep .btn-color-edit {
    color: rgba(0, 167, 169, 1);
  }
}
.resi-search {
  // padding-right: 20px;
  margin-top: 10px;
  .el-col {
    text-align: right;
  }
}
.resi-down {
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 12px;
  box-sizing: border-box;
  margin-left: -23rpx;
  cursor: pointer;
  background: #ffffff;
  border-radius: 0 0 10px 10px;
  img {
    display: block;
  }
}

.resi-card-table {
  margin-top: 20px;
}
.resi-row-btn {
  display: flex;
  margin-bottom: 13px;
  .el-button {
    margin-left: 10px;
    border: 0;
  }
  // .el-button--success {
  //   background: rgba(34, 193, 195, 1);
  // }
  // .el-button--warning {
  //   background: rgba(254, 179, 73, 1);
  // }
  // .el-button--danger {
  //   background: rgba(254, 98, 82, 1);
  // }
}
.resi-other {
  width: 100%;
  display: flex;
  .resi-other-title {
    flex-shrink: 0;
    // display: inline-block;
    width: 100px;
    box-sizing: border-box;
    margin-bottom: 10px;
    // padding: 6px 12px 0 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
  }
  .tabs-other-info {
    // display: inline-block;
    // flex: 1;
    // padding-left: 60px;
    width: calc(100% - 100px);
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
  text-align: right;
  margin-right: 16px;
}
.div-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .div_del {
    margin-top: 15px;
  }
  .m-page {
    margin-left: auto;
  }
}
</style>
