<template>
  <div class="g-cnt-wrap">
    <div class="m-box m-search">
      <div class="wrap">
        <div class="title">
          <span>社区查询</span>
        </div>

        <div class="tabs">
          <div
            :class="{ 'z-on': searchData.type == 'jumin' }"
            @click="searchData.type = 'jumin'"
          >
            查居民
          </div>
          <div
            :class="{ 'z-on': searchData.type == 'fangwu' }"
            @click="searchData.type = 'fangwu'"
          >
            查房屋
          </div>
        </div>

        <div class="search">
          <div class="search-input">
            <div class="input">
              <input
                type="text"
                :placeholder="typePlaceholder[searchData.type]"
                v-model="searchData.searchKey"
                @keyup.enter="handleClickSearchBtn"
              />

              <div
                class="close-btn"
                v-if="searchData.searchKey != ''"
                @click="searchData.searchKey = ''"
              >
                <img src="@/assets/img/shequ/close.png" />
              </div>
            </div>
            <div class="btn" @click="handleClickSearchBtn">查一下</div>
          </div>
          <div class="btn2" @click="handleClickSearchBtn">
            <img src="@/assets/images/index/i-search.png" />
            智能搜索
          </div>
        </div>
      </div>
    </div>

    <div class="m-box" v-if="searchStatus == 'ing'">
      <div
        class="m-tb"
        v-if="
          searchData.type == 'jumin' &&
          searchData.searchKey != '' &&
          searchStatus == 'ing'
        "
      >
        <div class="tb">
          <el-table
            class="m-table"
            v-loading="searchJumin.loading"
            :data="searchJumin.list"
            border
            style="width: 100%"
            :max-height="1000"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />
            <el-table-column
              v-for="item in searchJumin.header"
              :key="item.columnName"
              :prop="item.columnName"
              :label="item.label"
              align="center"
              :show-overflow-tooltip="true"
              :width="
                item.itemType === 'radio' ? computedWidth(item.label) : 180
              "
            >
              <template slot-scope="scope">
                <span>{{ handleFilterSpan(scope.row, item) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  class="f-fc"
                  @click="handleWatchSearchJumin(scope.$index)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <div>
            <el-pagination
              @size-change="handleSizeChangeSearchJumin"
              @current-change="handleCurrentChangeSearchJumin"
              :current-page.sync="searchJumin.pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="parseInt(searchJumin.pageSize)"
              layout="sizes, prev, pager, next, total"
              :total="searchJumin.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div
        class="m-tb"
        v-if="
          searchData.type == 'fangwu' &&
          searchData.searchKey != '' &&
          searchStatus == 'ing'
        "
      >
        <div class="tb">
          <el-table
            class="m-table"
            :data="searchFangwu.list"
            v-loading="searchFangwu.loading"
            border
            :max-height="1000"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />
            <el-table-column prop="houseName" label="房屋名称" width="120">
            </el-table-column>
            <el-table-column prop="quartersName" label="所属小区" width="160">
            </el-table-column>
            <el-table-column prop="buildingName" label="所属楼栋">
            </el-table-column>
            <el-table-column prop="buildingUnitName" label="单元号">
            </el-table-column>
            <el-table-column prop="doorName" label="门牌号"> </el-table-column>
            <el-table-column prop="houseType" label="类型"> </el-table-column>
            <el-table-column prop="purpose" label="用途"> </el-table-column>
            <el-table-column prop="rentFlag" label="房屋状态">
            </el-table-column>
            <el-table-column prop="ownerName" label="房主姓名">
            </el-table-column>
            <el-table-column prop="ownerPhone" label="房主电话" width="110">
            </el-table-column>
            <el-table-column prop="ownerIdCard" label="身份证" width="170">
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              header-align="center"
              align="center"
              class="operate"
            >
              <template slot-scope="scope">
                <el-button
                  class="f-fc"
                  type="text"
                  size="small"
                  @click="handleWatchSearchFangwu(scope.$index)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              @size-change="handleSizeChangeSearchFangwu"
              @current-change="handleCurrentChangeSearchFangwu"
              :current-page.sync="searchFangwu.pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="parseInt(searchFangwu.pageSize)"
              layout="sizes, prev, pager, next"
              :total="searchFangwu.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <resi-info
      v-if="showedResiInfo && currentResiId"
      :resi-id="currentResiId"
      @close="showedResiInfo = false"
    />

    <house-info
      v-if="showedHouseInfo && currentHouseId"
      :house-id="currentHouseId"
      @close="showedHouseInfo = false"
    />
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import getQueryPara from "dai-js/modules/getQueryPara";
import resiInfo from "@/views/modules/cpts/resi/info";
import houseInfo from "@/views/modules/cpts/house/info";

export default {
  components: {
    resiInfo,
    houseInfo,
  },

  props: {
    type: {
      type: String,
      default: "",
    },
    searchKey: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      searchStatus: "ini", //ing over
      searchData: {
        type: "jumin",
        searchKey: "",
      },

      typePlaceholder: {
        jumin: "请输入姓名或电话或身份证号",
        fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
        xuqiu: "请输入需求人或需求内容或服务方",
      },

      searchJumin: {
        loading: false,
        header: [
          {
            itemId: "20220422102809_1006",
            label: "姓名",
            columnName: "name",
            itemType: "input",
            width: 80,
            options: [],
          },
          {
            itemId: "20220422102809_1001",
            label: "所属网格",
            columnName: "gridName",
            itemType: "select",
            width: 190,
            options: [],
          },
          {
            itemId: "20220422102809_1004",
            label: "所属房屋",
            columnName: "homeName",
            itemType: "select",
            width: 190,
            options: [],
          },
          {
            itemId: "20220422102809_1007",
            label: "联系电话",
            columnName: "mobile",
            itemType: "input",
            width: 120,
            options: [],
          },
          {
            itemId: "20220422102809_1009",
            label: "证件号",
            columnName: "idNum",
            itemType: "input",
            width: 180,
            options: [],
          },
          {
            itemId: "20220422102809_1008",
            label: "性别",
            columnName: "gender",
            itemType: "select",
            width: 54,
            options: [
              { label: "男", value: "1" },
              { label: "女", value: "2" },
            ],
          },
          {
            itemId: "20220422102809_1010",
            label: "出生日期",
            columnName: "birthday",
            itemType: "datepicker",
            width: 110,
            options: [],
          },
          {
            itemId: "20220422102809_1011",
            label: "备注",
            columnName: "remark",
            itemType: "textarea",
            width: 110,
            options: [],
          },
          {
            itemId: "20220422102809_1015",
            label: "党员",
            columnName: "partyFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1016",
            label: "低保人员",
            columnName: "subsistenceAllowanceFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1017",
            label: "保障房人员",
            columnName: "ensureHouseFlag",
            itemType: "radio",
            width: 100,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1018",
            label: "失业人员",
            columnName: "unemployedFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1019",
            label: "育龄妇女",
            columnName: "fertileWomanFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1020",
            label: "退役军人",
            columnName: "veteranFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1021",
            label: "统战人员",
            columnName: "unitedFrontFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1022",
            label: "信访人员",
            columnName: "petitionOfficerFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1023",
            label: "志愿者",
            columnName: "volunteerFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1024",
            label: "老年人",
            columnName: "oldPeopleFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1025",
            label: "空巢",
            columnName: "emptyNesterFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1026",
            label: "失独人员",
            columnName: "bereavedPersonFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1027",
            label: "失能",
            columnName: "disabledFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1028",
            label: "失智",
            columnName: "dementedFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1029",
            label: "残疾",
            columnName: "disabilityFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1030",
            label: "大病",
            columnName: "seriousIllnessFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_1031",
            label: "慢病",
            columnName: "chronicDiseaseFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_10310",
            label: "特殊人群",
            columnName: "specialCrowdFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_202204141504102",
            label: "流动人口",
            columnName: "floatingFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "20220422102809_202204141504101",
            label: "租户",
            columnName: "tenantFlag",
            itemType: "radio",
            width: 80,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
          {
            itemId: "202208111008491",
            label: "独居老人",
            columnName: "liveAloneFlag",
            itemType: "radio",
            width: 100,
            options: [
              { label: "是", value: "1" },
              { label: "否", value: "0" },
            ],
          },
        ],
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchFangwu: {
        loading: false,
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

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

      currentResiId: "",

      // 显示人员详情
      showedHouseInfo: false,
      currentHouseId: "",

      currentPage: "chaxun", //查询 预警,
    };
  },
  computed: {
    maxTableHeight() {
      // return this.clientHeight - 450;
      return 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.searchKey": function (val) {
      if (val == "") {
        this.searchStatus = "ini";
      }
    },
  },
  mounted() {
    this.getApiData();

    this.firstSearch();
  },
  methods: {
    firstSearch() {
      this.searchData.searchKey = getQueryPara("searchKey");
      this.searchData.type = getQueryPara("type");
      this.handleClickSearchBtn();
    },

    computedWidth(label) {
      const wd = 20 * label.length;
      return wd > 80 ? wd : 80;
    },
    handleFilterSpan(row, item) {
      let _val = "";
      if (item.options && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value == row[item.columnName]) _val = n.label;
        });
      }
      return _val || row[item.columnName];
    },

    handleClickSearchBtn() {
      const {
        searchData: { type, searchKey },
      } = this;
      if (!searchKey) return this.$message.error("请输入搜索条件");
      if (type == "jumin") {
        this.searchJumin.pageNo = 1;
        this.searchJumin.total = 0;
        this.getSearchJumin();
      } else if (type == "fangwu") {
        this.searchFangwu.pageNo = 1;
        this.searchFangwu.total = 0;
        this.getSearchFangwu();
      } else if (type == "xuqiu") {
        this.searchXuqiu.pageNo = 1;
        this.searchXuqiu.total = 0;
        this.getSearchXuqiu();
      }
      this.searchStatus = "ing";
    },

    handleSizeChangeSearchJumin(val) {
      console.log(`每页 ${val} 条`);
      this.searchJumin.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchJumin();
    },
    handleCurrentChangeSearchJumin(val) {
      console.log(`当前页: ${val}`);
      this.searchJumin.pageNo = val;
      this.getSearchJumin();
    },
    async handleWatchSearchJumin(rowIndex) {
      let item = this.searchJumin.list[rowIndex];
      this.currentResiId = item.resiId;
      await nextTick();
      this.showedResiInfo = true;
    },

    handleSizeChangeSearchFangwu(val) {
      console.log(`每页 ${val} 条`);
      this.searchFangwu.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchFangwu();
    },
    handleCurrentChangeSearchFangwu(val) {
      console.log(`当前页: ${val}`);
      this.searchFangwu.pageNo = val;
      this.getSearchFangwu();
    },

    async handleWatchSearchFangwu(rowIndex) {
      let item = this.searchFangwu.list[rowIndex];
      this.currentHouseId = item.id;
      await nextTick();
      this.showedHouseInfo = true;
    },

    getApiData() {},

    async getSearchJumin() {
      const url = "/actual/base/residentBaseInfo/communitySearch";
      const {
        searchData: { searchKey },
        searchJumin: { pageSize, pageNo },
      } = this;
      this.searchJumin.loading = true;
      const { data, code, msg } = await requestPost(url, {
        searchKey,
        pageSize,
        pageNo,
      });
      this.searchJumin.loading = false;
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchJumin.total = data.total || 0;
        this.searchJumin.list = data.list
          ? data.list.map((item) => {
              item = { ...item, ...item.categoryInfo };
              return item;
            })
          : [];
      } else {
      }
    },

    async getSearchFangwu() {
      const url = "/actual/base/communityHouse/communitySearch";
      const {
        searchData: { searchKey },
        searchFangwu: { pageSize, pageNo },
      } = this;
      this.searchFangwu.loading = true;
      const { data, code, msg } = await requestPost(url, {
        searchKey,
        pageSize,
        pageNo,
      });
      this.searchFangwu.loading = false;
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchFangwu.total = data.total || 0;
        this.searchFangwu.list = data.list
          ? data.list.map((item) => {
              const { houseType, rentFlag, purpose } = item;
              item.houseType = {
                1: "楼房",
                2: "平房",
                3: "别墅",
              }[houseType];
              item.rentFlag = {
                0: "自住",
                1: "出租",
                2: "闲置",
                3: "未售出",
              }[rentFlag];
              item.purpose = {
                1: "住宅",
                2: "商业",
                3: "办公",
                4: "工业",
                5: "存储",
                6: "商住混用",
                7: "其它",
              }[purpose];
              return item;
            })
          : [];
      } else {
      }
    },
  },
};
</script>

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

.m-box {
  position: relative;
  padding: 24px 16px;
  background: #ffffff;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.m-dialog {
  .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-btns {
    margin-top: 20px;
    text-align: center;
    text-align: right;
    margin-right: 16px;
  }
}

.m-search {
  box-sizing: border-box;
  padding: 40px 80px;
  margin-bottom: 16px;
  background-size: 100%;

  .title {
    height: 47px;
    font-size: 32px;
    font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    font-weight: 500;
    color: #0056d6;
    line-height: 47px;
    text-align: center;
  }

  .tabs {
    width: 692px;
    margin: 24px auto 0;
    display: flex;
    align-items: center;
    > div {
      position: relative;
      margin-right: 30px;
      width: 56px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;
      border-radius: 2px;
      color: #0056d6;
      text-align: center;
      cursor: pointer;

      &:hover {
        color: $c1_on;
      }
      &.z-on {
        color: #ffffff;
        background: $c1;

        &:hover {
          color: #ffffff;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: -10px;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-top: 5px solid $c1;
        }
      }
    }
  }

  .search {
    width: 692px;
    margin: 15px auto 0;
    display: flex;
    align-items: center;

    .search-input {
      position: relative;
      width: 560px;
      height: 48px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #0056d6;
      display: flex;

      .input {
        position: relative;
        width: calc(100% - 100px);

        input {
          margin-left: 20px;
          width: calc(100% - 10px);
          border: none;
          height: 44px;
          line-height: 44px;
          font-family: "思源宋体";
          font-size: 16px;
          font-weight: 400;
          color: #333;
        }

        .close-btn {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto 0;
          width: 18px;
          height: 18px;
          background-color: #eee;
          border-radius: 100%;
          cursor: pointer;

          img {
            display: block;
            margin: 4px auto;
            width: 10px;
            height: 10px;
            opacity: 0.3;
          }
        }
      }

      .btn {
        margin: 7px 9px 0 auto;
        line-height: 32px;
        width: 66px;
        height: 32px;
        background: #0056d6;
        border-radius: 2px;
        text-align: center;
        font-size: 15px;
        font-family: Source Han Serif CN;
        font-weight: 500;
        color: #ffffff;
        color: #ffffff;
        cursor: pointer;

        &:hover {
          background: $c1_on;
        }
      }
    }

    .btn2 {
      margin-left: 35px;
      width: 100px;
      height: 39px;
      line-height: 39px;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      font-family: Source Han Serif CN;
      font-weight: 500;
      color: #0056d6;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }

      &:hover {
        color: $c1_on;
      }
    }
  }
}
</style>
