<template>
  <div class="search-container">
    <div class="option-rows" v-if="show_shequ_xiaoqu">
      <el-select
        @change="changeSelect($event, 'xiaoquList')"
        v-model="queryParams.shequId"
        placeholder="选择社区"
        clearable
        v-show="deptXiaoqu"
      >
        <el-option
          v-for="item in deptList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="queryParams.xiaoquId"
        placeholder="选择小区"
        @change="changeSelect($event, 'netList')"
        clearable
      >
        <el-option
          v-for="item in xiaoquList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="option-rows">
      <el-select
        v-model="queryParams.parentid"
        placeholder="选择网格"
        @change="changeSelect($event, 'yuanList')"
        clearable
      >
        <el-option
          v-for="item in netList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="queryParams.yuanid"
        placeholder="选择苑"
        @change="changeSelect($event, 'buildingList')"
        clearable
      >
        <el-option
          v-for="item in yuanList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="queryParams.buildingId"
        placeholder="选择楼栋"
        @change="changeSelect($event, 'houseList')"
        clearable
      >
        <el-option
          v-for="item in buildingList"
          :key="item.buildingId"
          :label="item.buildingName"
          :value="item.buildingId"
        >
        </el-option>
      </el-select>
      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
        <el-option
          v-for="item in houseList"
          :key="item.houseId"
          :label="item.houseName"
          :value="item.houseId"
        >
        </el-option>
      </el-select>
    </div>
    <div class="option-rows">
      <el-select
        v-model="colorList"
        placeholder="选择分色"
        multiple
        collapse-tags
        clearable
      >
        <el-option
          v-for="dict in dict.type.b_color_type"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        >
        </el-option>
      </el-select>

      <el-radio v-model="queryParams.type" :label="1">户籍</el-radio>
      <el-radio v-model="queryParams.type" :label="2">流动</el-radio>

      <el-checkbox-group v-model="isCheck">
        <el-checkbox label="中共党员"> </el-checkbox>
        <el-checkbox label="帮扶对象"> </el-checkbox>
        <el-checkbox label="重点人群"> </el-checkbox>
        <el-checkbox label="退役军人"> </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="three-option">
      <div class="option-list">
        <div
          class="option-list-item"
          v-for="(item, index) in tabList"
          :key="index"
          @click="handleClick(index)"
          :class="currentIndex == index ? 'activeItme' : ''"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="option-input">
        <el-select
          v-model="credentialnoType"
          v-show="currentIndex == 0"
          class="input-general-width"
        >
          <el-option
            v-for="item in optionList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-input
          prefix-icon="el-icon-search"
          placeholder="请输入内容"
          v-model="keyWord"
          class="input-big-width"
        >
        </el-input>
        <el-button type="text" @click="handleSearch()">搜索</el-button>
        <el-button type="text" @click="handleReset()">重置</el-button>
        <el-button type="text" @click="handleExport()">导出</el-button>
      </div>
    </div>

    <div class="result-list">
      <div class="list-header">
        <div class="header-left-total">
          搜索结果列表
          <!-- {{ houseTotal }}户 {{ total }}人 -->
        </div>
        <div class="header-rigth-total">共{{ total }}条数据</div>
      </div>
      <div
        class="list-table"
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="加载中"
      >
        <div class="table-header">
          <div class="table-cell0">序号</div>
          <div class="table-cell1">姓名</div>
          <div class="table-cell1">证件号</div>
          <div class="table-cell1">手机号</div>
          <div class="table-cell2">家庭地址</div>
          <div class="table-cell1">分色</div>
        </div>
        <div
          class="table-body"
          style="overflow: auto"
          v-infinite-scroll="load"
          :infinite-scroll-distance="10"
          :infinite-scroll-delay="500"
        >
          <div
            class="body-rows"
            v-for="(item, index) in list"
            :key="'rows' + index"
            @click="getInfo(item)"
          >
            <div class="table-cell0">{{ index + 1 }}</div>
            <div class="table-cell1">{{ item.pname }}</div>
            <div class="table-cell1">{{ item.credentialNo }}</div>
            <div class="table-cell1">{{ item.phone }}</div>
            <div class="table-cell2">
              {{
                item.shequ_name +
                item.xiaoqu_name +
                item.deptname +
                item.buildingname +
                item.housename
              }}
            </div>
            <div class="table-cell1 cell-flex">
              <ColorCell :item="item" />
              <span style="margin-left: 3px">{{ item.color }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 查看详情 -->
    <el-dialog
      :visible.sync="openInfo"
      append-to-body
      custom-class="taicang-dialog-small"
    >
      <div class="dialog-main">
        <div class="dialog-title"><span></span> 详情</div>
        <div class="info-container">
          <div class="border-top">社区名称</div>
          <div class="border-top">{{ infoData.shequ_name }}</div>
          <div class="border-top no-left">姓名</div>
          <div class="border-top">{{ infoData.pname }}</div>
          <div>小区名称</div>
          <div>{{ infoData.xiaoqu_name }}</div>
          <div class="no-left">身份证号</div>
          <div>{{ infoData.credentialNo }}</div>
          <div>网格名称</div>
          <div>{{ infoData.parentname }}</div>
          <div class="no-left">手机号码</div>
          <div>{{ infoData.phone }}</div>
          <div>苑名称</div>
          <div>{{ infoData.deptname }}</div>
          <div class="no-left">户口类型</div>
          <div>{{ infoData.typename }}</div>
          <div>楼栋名称</div>
          <div>{{ infoData.buildingname }}</div>
          <div class="no-left">分色</div>
          <div>
            <ColorCell :item="infoData"
              ><span class="house-color"> {{ infoData.color }}</span></ColorCell
            >
          </div>
          <div>住户名称</div>
          <div>
            {{ infoData.housename }}
            <el-link
              v-show="!this.show_shequ_xiaoqu"
              style="margin-left: 10px"
              type="success"
              @click="handlerClick()"
              >查看详情</el-link
            >
          </div>
          <div class="no-left">实际工作单位</div>
          <div>{{ infoData.workunit || "/" }}</div>

          <div>未更新天数</div>
          <div>{{ infoData.daycount || "/" }} 天</div>
          <div class="no-left">数据更新人员</div>
          <div>{{ infoData.updateBy || "/" }}</div>
          <div>数据更新时间</div>
          <div>{{ infoData.updateTime || "/" }}</div>

          <div class="no-left">参保单位</div>
          <div>{{ infoData.qymc || "/" }} 天</div>
          <div>参保类型</div>
          <div>
            <dict-tag
              :options="dict.type.sys_sb_type"
              :value="infoData.eacaabbff || '/'"
            />
          </div>
          <div class="no-left">民族</div>
          <div>
            <dict-tag
              :options="dict.type.sys_nationality"
              :value="infoData.mzcgf || '/'"
            />
          </div>

          <div>社保联系电话</div>
          <div style="width: 80%">{{ infoData.lxdh || "/" }}</div>

          <div>社保联系地址</div>
          <div style="width: 80%">{{ infoData.lxdzDzmc || "/" }}</div>
          <div>备注</div>
          <div style="width: 80%">{{ infoData.remark || "/" }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { inputSearch2 } from "@/api/home/index.js";
import { handleTreeId } from "@/utils/findTreeId.js";
import { treeselect, getsszxBh } from "@/api/system/dept"; //部门
import { mapGetters } from "vuex";
import ColorCell from "@/components/ColorCell";
import { exportSearch } from "@/api/home/index.js"; //预警
import { listHouse } from "@/api/taicangpop/house"; //户
import { handleColor } from "@/utils/myFuntion.js";

export default {
  dicts: ["b_color_type", "sys_nationality", "sys_sb_type"],

  components: { ColorCell },
  computed: {
    ...mapGetters(["leftColor", "rightTopColor", "queryParamsXiaoqu", "dept"]),
  },
  data() {
    return {
      openInfo: false,
      infoData: {},
      show_shequ_xiaoqu: true,
      deptXiaoqu: true,
      show_net: false,
      loading: true,
      currentIndex: 0,
      credentialnoType: 0,
      tabList: [
        { name: "身份证", value: 0 },
        { name: "手机号", value: 1 },
        { name: "姓名", value: 2 },
        { name: "参保单位", value: 3 },
      ],
      optionList: [
        { name: "完整身份证号", value: 0 },
        { name: "省级(前2位)", value: 1 },
        { name: "市级(前4位)", value: 2 },
        { name: "县级(前6位)", value: 3 },
      ],
      isCheck: [],
      isList: [
        { name: "中共党员", key: "isd" },
        { name: "帮扶对象", key: "isk" },
        { name: "退役军人", key: "isj" },
        { name: "重点人群", key: "isx" },
      ],

      keyWord: "",
      colorList: [],
      queryParams: {
        shequId: undefined,
        xiaoquId: undefined,
        parentid: undefined,
        yuanid: undefined,
        buildingId: undefined,
        houseid: undefined,
        isd: undefined, //党员
        isk: undefined, //帮扶
        isj: undefined, //退伍
        isx: undefined, //重点
        credentialno: undefined, //身份证(全)
        cre1: undefined, //身份证(2)
        cre2: undefined, //身份证(4)
        cre3: undefined, //身份证(6)
        phone: undefined,
        name: undefined,
        color: undefined,
        type: undefined,
        qymc: undefined,
        pageNum: 1,
        pageSize: 20,
      },
      deptList: [],
      xiaoquList: [],
      netList: [],
      yuanList: [],
      buildingList: [],
      houseList: [],
      list: [],
      houseTotal: 0,
      total: 0,
      objList: [
        { key: "deptList", value: "shequId" },
        { key: "xiaoquList", value: "xiaoquId" },
        { key: "netList", value: "parentid" },
        { key: "yuanList", value: "yuanid" },
        { key: "buildingList", value: "buildingId" },
        { key: "houseList", value: "houseid" },
      ],
    };
  },
  created() {
    // this.show_shequ_xiaoqu = this.$auth.hasRoleOr(["admin", "leader"]); //超级管理员 - 领导
    // this.show_net = this.$auth.authRoleNet("network"); //网格员

    // console.log(this.show_shequ_xiaoqu, this.show_net);

    // this.queryParams.shequId = this.queryParamsIndex.shequId;
    this.getDeptList();
  },
  methods: {
    handlerClick() {
      this.openInfo = false;
      this.$emit("lookBuild", this.infoData);
    },
    /**
     * 详情
     */
    getInfo(item) {
      this.infoData = handleColor([item])[0];
      this.openInfo = true;
    },
    /**获取树部门 */
    async getDeptList() {
      let result = await treeselect();
      this.deptList = result.data[0].children;

      this.$nextTick(() => {
        if (this.$route.path == "/xiaoqu") {
          this.queryParams.xiaoquId = this.queryParamsXiaoqu.xiaoquId;
          this.changeSelect(this.queryParams.xiaoquId, "netList");
          this.show_shequ_xiaoqu = false;
        } else if (this.$route.query.deptId) {
          this.queryParams.shequId = this.dept.xiaoquId;
          this.deptXiaoqu = false;
          this.changeSelect(this.queryParams.shequId, "xiaoquList");
        }
      });
    },
    /**
     * 级联筛选
     */
    async changeSelect(e, key) {
      console.log(key);
      let list = [];
      let index = this.objList.findIndex((item) => item.key == key);
      if (index > -1) {
        list = this.objList.slice(index);
      }
      list.map((item) => {
        this.queryParams[item.value] = undefined;
      });

      if (key == "buildingList" || key == "houseList") {
        let res = await getsszxBh({
          deptId: this.queryParams.yuanid,
          buildingId: this.queryParams.buildingId,
        });
        this[key] = res.data;
      } else {
        this[key] = handleTreeId(e, this.deptList);
      }
    },

    /**
     * 获取住户
     */
    async getHouse() {
      let result = await listHouse();
    },

    /**
     * 搜索
     */
    handleSearch() {
      this.reset();
      //分色
      this.queryParams.color = this.colorList.toString();
      // console.log(this.queryParams.color);
      //处理四个is
      this.isCheck.forEach((item) => {
        let index = this.isList.findIndex((it) => it.name == item);
        if (index > -1) {
          this.queryParams[this.isList[index].key] = 1;
        }
      });
      //三个tab搜索
      if (this.currentIndex == 0) {
        if (this.credentialnoType == 0) {
          this.queryParams.credentialno = this.keyWord;
        } else {
          this.queryParams["cre" + this.credentialnoType] = this.keyWord;
        }
      }
      if (this.currentIndex == 1) this.queryParams.phone = this.keyWord;
      if (this.currentIndex == 2) this.queryParams.name = this.keyWord;
      if (this.currentIndex == 3) this.queryParams.qymc = this.keyWord;
      this.load();
    },

    /**
     * 导出
     */
    handleExport() {
      if (this.list.length == 0) {
        this.$message({
          message: "没有数据可导出！",
          type: "warning",
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "正在生成excel，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$modal
        .confirm("是否确认导出所有数据项？")
        .then(() => {
          return exportSearch(this.queryParams);
        })
        .then((response) => {
          this.$download.name(response.msg);
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },
    /**
     * 重置操作
     */
    handleReset() {
      this.keyWord = "";
      this.credentialnoType = 0;
      this.queryParams.type = undefined;
      this.queryParams.shequId = this.deptXiaoqu
        ? undefined
        : this.dept.xiaoquId;
      this.queryParams.xiaoquId =
        this.$route.path == "/xiaoqu"
          ? this.queryParamsXiaoqu.xiaoquId
          : undefined;
      this.queryParams.parentid = undefined;
      this.queryParams.yuanid = undefined;
      this.queryParams.buildingId = undefined;
      this.queryParams.houseid = undefined;
      (this.queryParams.qymc = undefined), (this.colorList = []);
      this.isCheck = [];
      this.reset();
      this.load();
    },
    /**
     * 三个输入方式
     */
    handleClick(index) {
      if (this.currentIndex == index) return;
      this.keyWord = "";
      this.currentIndex = index;
    },
    /**
     * 加载更多
     */
    load() {
      if (this.list.length > 0 && this.list.length >= this.total) return;
      this.getList();
    },
    /**
     * 获取list
     */
    async getList() {
      this.loading = true;
      let result = await inputSearch2(this.queryParams);
      let handleColor = this.handleColor(result.data.xinxilist.rows);
      this.list = [...this.list, ...handleColor];
      this.houseTotal = result.data.count;
      this.total = result.data.xinxilist.total;
      this.queryParams.pageNum++;
      this.loading = false;
    },

    /**
     * 处理颜色
     */
    handleColor(list) {
      list.map((item) => {
        if (!item.color) {
          item.leftColor = "#7b75ff";
          item.rightTopColor = "#7b75ff";
          return;
        }
        for (let key in this.leftColor) {
          if (item.color == key) {
            item.leftColor = this.leftColor[key];
            item.rightTopColor = this.rightTopColor[key];
          }
        }
      });
      return list;
    },

    /**
     * 重置
     */
    reset() {
      this.queryParams.isd = undefined; //党员
      this.queryParams.isk = undefined; //帮扶
      this.queryParams.isj = undefined; //退伍
      this.queryParams.isx = undefined; //重点
      this.queryParams.credentialno = undefined; //身份证(全)
      this.queryParams.cre1 = undefined; //身份证(2)
      this.queryParams.cre2 = undefined; //身份证(4)
      this.queryParams.cre3 = undefined; //身份证(6)
      this.queryParams.phone = undefined;
      this.queryParams.name = undefined;
      this.queryParams.color = undefined; //分色

      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;

      this.list = [];
      this.houseTotal = 0;
      this.total = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/isTable.scss";
</style>
