<template>
  <div class="resi-container">
    <el-card ref="searchCard" class="search-card">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="fmData"
        :label-width="'100px'"
        class="demo-form-inline"
      >
        <div>
          <el-form-item prop="gridId" label="所属网格">
            <div class="resi-cell-value">
              <el-select
                v-model.trim="fmData.gridId"
                placeholder="请选择网格"
                size="small"
                clearable
                class="resi-cell-select"
                @change="handleChangeGrid"
              >
                <el-option
                  v-for="item in optionsG"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="所属房屋">
            <div class="resi-cell-value">
              <div class="resi-cell-col">
                <el-form-item prop="villageId">
                  <el-select
                    v-model.trim="fmData.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="fmData.buildId"
                    placeholder="楼号"
                    size="small"
                    clearable
                    :disabled="changeVDisabled"
                    class="resi-cell-select resi-cell-select-middle"
                    @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="fmData.unitId"
                    placeholder="单元"
                    size="small"
                    clearable
                    :disabled="changeBDisabled"
                    class="resi-cell-select resi-cell-select-middle"
                    @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="fmData.homeId"
                    placeholder="房号"
                    size="small"
                    clearable
                    :disabled="changeDDisabled"
                    class="resi-cell-select resi-cell-select-middle"
                  >
                    <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>
        </div>

        <div>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="fmData.name"
              class="resi-cell-input"
              size="small"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="fmData.mobile"
              class="resi-cell-input"
              size="small"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="身份证号" prop="idCard">
            <el-input
              v-model="fmData.idCard"
              class="resi-cell-input"
              size="small"
              clearable
              placeholder="请输入"
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              class="diy-button--search"
              size="small"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              class="diy-button--reset"
              size="small"
              @click="resetForm('searchForm')"
              >重置</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <el-button @click="handleChu" class="diy-button--reset" size="small"
          >导出</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="resi-table"
        :height="tableHeight"
      >
        <el-table-column
          label="序号"
          fixed="left"
          type="index"
          align="center"
          width="50"
        />

        <el-table-column
          prop="GRID_ID"
          align="center"
          label="所属网格"
          min-width="160"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="HOME_ID"
          label="所属家庭"
          align="center"
          min-width="160"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="NAME"
          align="center"
          label="姓名"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="MOBILE"
          width="140"
          align="center"
          label="手机号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column prop="GENDER" align="center" width="60" label="性别">
        </el-table-column>

        <el-table-column
          prop="ID_CARD"
          align="center"
          min-width="160"
          label="身份证号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="BIRTHDAY"
          align="center"
          label="出生日期"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="REMARKS"
          align="center"
          label="备注"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              @click="handleWatch(scope.$index)"
              type="text"
              size="small"
              >查看</el-button
            >
          </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="parseInt(pageSize)"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

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

    <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="computeQueryParams()"
        @close="diyDialog = false"
      ></diy-info>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import peopleMore from "@/views/modules/shequ/cpts/people-more";
import diyInfo from "@/views/modules/base/diyInfo.vue";

export default {
  props: {
    elseParams: {
      type: Array,
      default: () => [],
    },
  },

  components: { peopleMore, diyInfo },
  data() {
    return {
      openSearch: false,

      formShow: false,
      formTitle: "",

      pageNo: 1,
      pageSize: window.localStorage.getItem("pageSize") || 20,
      total: 1,

      tableData: [],

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

      optionsWelfare: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "0",
          label: "否",
        },
      ],

      fmData: {
        gridId: "",
        villageId: "",
        buildId: "",
        unitId: "",
        homeId: "",
        name: "",
        mobile: "",
        idCard: "",
      },
      rangeTime: [],

      searchH: 0,
      tableHeight: 0,

      // 显示人员详情
      showedPeopleMoreInfo: false,

      currentPepeleId: "",
      currentPepeleGridName: "",

      diyDialog: false,
      exportList: [],
    };
  },
  computed: {
    ...mapGetters(["clientHeight", "iframeHeight"]),
    maxTableHeight() {
      console.log("computed-searchH---", this.searchH);
      const h = this.clientHeight - this.searchH + this.iframeHeight;
      const _h = this.clientHeight - this.searchH;
      console.log("computed-searchH---_h", _h);
      return this.$store.state.inIframe ? h : _h;
    },

    changeVDisabled() {
      return !this.fmData.villageId;
    },
    changeBDisabled() {
      return !this.fmData.buildId;
    },
    changeDDisabled() {
      return !this.fmData.unitId;
    },
  },
  watch: {
    rangeTime: function (val) {
      console.log("val----", val);
      if (Array.isArray(val) && val.length == 2) {
        this.fmData.startTime = val[0];
        this.fmData.endTime = val[1];
      } else {
        this.fmData.startTime = "";
        this.fmData.endTime = "";
      }
    },
    searchH() {
      const h = this.clientHeight - this.searchH + this.iframeHeight;
      const _h = this.clientHeight - this.searchH;
      console.log("computed-searchH---_h", _h);

      this.$nextTick(() => {
        this.tableHeight = this.$store.state.inIframe ? h : _h;
      });
    },
  },
  mounted() {
    this.getGridList();
    this.getValiheList();
    this.getTableData();
    this.searchH = this.$refs.searchCard.$el.offsetHeight + 270;
    console.log("searchH----", this.$refs.searchCard.$el.offsetHeight);
  },
  methods: {
    async handleWatch(rowIndex) {
      let item = this.tableData[rowIndex];
      this.currentPepeleId = item.icResiUserId;
      this.currentPepeleGridName = item.GRID_ID;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    handleClearVillage() {
      this.fmData.buildId = "";
      this.fmData.homeId = "";
    },
    handleClearBuild() {
      this.fmData.buildId = "";
      this.fmData.unitId = "";
      this.fmData.homeId = "";
    },
    handleClearDan() {
      this.fmData.unitId = "";
      this.fmData.homeId = "";
    },
    handleChangeGrid(val) {
      console.log("val", val);
      this.fmData.villageId = "";
      this.fmData.buildId = "";
      this.fmData.unitId = "";
      this.fmData.homeId = "";
      this.getValiheList();
    },
    handleChangeV(val) {
      console.log("val", val);
      this.fmData.buildId = "";
      this.fmData.unitId = "";
      this.fmData.homeId = "";
      this.getBuildList();
    },
    handleChangeB(val) {
      console.log("val", val);
      this.fmData.unitId = "";
      this.fmData.homeId = "";
      this.getUniList();
    },
    handleChangeD(val) {
      console.log("val", val);
      this.fmData.homeId = "";
      this.getHouseList();
    },

    getGridList() {
      const { user } = this.$store.state;
      this.$http
        .post("/gov/org/customergrid/gridoption", {
          agencyId: user.agencyId,
          purpose: "query",
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            console.log("获取查询详情成功", res.data);
            this.optionsG = res.data;
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
    getValiheList() {
      const { user } = this.$store.state;
      this.$http
        .post("/gov/org/icneighborhood/neighborhoodoption", {
          gridId: this.fmData.gridId,
          agencyId: "",
          // 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.fmData.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.fmData.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.fmData.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("网络错误");
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getTableData();
    },

    handleClose() {
      this.formShow = false;
    },
    handleSearch(val) {
      console.log(this.fmData);
      this.pageNo = 1;
      this.getTableData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.handleSearch();
    },

    computeQueryParams() {
      const { elseParams, fmData } = this;

      return {
        formCode: "resi_base_info",
        pageNo: 1,
        pageSize: 20,
        conditions: [
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "GRID_ID",
            columnValue: [fmData.gridId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "VILLAGE_ID",
            columnValue: [fmData.villageId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "BUILD_ID",
            columnValue: [fmData.buildId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "UNIT_ID",
            columnValue: [fmData.unitId],
          },
          {
            queryType: "equal",
            tableName: "ic_resi_user",
            columnName: "HOME_ID",
            columnValue: [fmData.homeId],
          },
          {
            queryType: "like",
            tableName: "ic_resi_user",
            columnName: "NAME",
            columnValue: [fmData.name],
          },
          {
            queryType: "like",
            tableName: "ic_resi_user",
            columnName: "MOBILE",
            columnValue: [fmData.mobile],
          },
          {
            queryType: "like",
            tableName: "ic_resi_user",
            columnName: "ID_CARD",
            columnValue: [fmData.idCard],
          },
          ...elseParams,
        ],
      };
    },

    async handleChu() {
      this.getExportList();
    },

    async getExportList() {
      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 getTableData() {
      const url = "/epmetuser/icresiuser/listresi";
      const { pageSize, pageNo, fmData } = this;
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        ...this.computeQueryParams(),
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.total = data.total || 0;
        this.tableData = data.list
          ? data.list.map((item) => {
              return item;
            })
          : [];
      } else {
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/buttonstyle.scss";

.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);
  }
}
.resi-table {
  ::v-deep .el-button--text {
    text-decoration: underline;
  }
}
.resi-card-table {
  margin-top: 20px;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
}

.resi-container .resi-card {
  position: relative;
  overflow: visible;
}

.demo-form-inline {
  // display: flex;
  // align-items: center;
  // margin-bottom: 20px;

  .resi-cell-label {
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    margin-right: 15px;
    // text-align: right;
    // line-height: 32;
  }
  .resi-cell-label1 {
    width: max-content;
  }
  .resi-cell-value-radio {
    display: flex;
    align-items: center;
    min-height: 32px;
  }
  .resi-cell-input {
    width: 200px;
  }
  .resi-cell--daterange {
    max-width: 260px;
  }
  .resi-cell-select {
    width: 200px;
    box-sizing: border-box;
    margin-right: 10px;
    &-middle {
      width: 120px;
    }
    &-small {
      width: 88px;
    }
  }
  .resi-cell-select:last-child {
    margin-right: 0;
  }
}

.mt10 {
  margin-top: 10px;
}
</style>
