<template>
  <div class="search-container">
    <div class="option-rows">
      <el-select
        @change="changeSelect($event, 'xiaoquList')"
        v-model="queryParams.shequId"
        placeholder="选择社区"
        clearable
      >
        <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.id"
          :label="item.label"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select v-model="queryParams.houseid" placeholder="选择住户" clearable>
        <el-option
          v-for="item in houseList"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
        </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">
        <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">
          <div
            class="body-rows"
            v-for="(item, index) in list"
            :key="'rows' + index"
          >
            <div class="table-cell0">{{ index + 1 }}</div>
            <div class="table-cell1">{{ item.name }}</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>
  </div>
</template>

<script>
import { getNetWorkId, inputSearch } from "@/api/home/index.js";
import { handleTreeId } from "@/utils/findTreeId.js";
import { treeselect } from "@/api/system/dept"; //部门
import { mapGetters } from "vuex";
import ColorCell from "@/components/ColorCell";
import { exportSearch } from "@/api/home/index.js"; //预警
export default {
  dicts: ["b_color_type"],
  components: { ColorCell },
  computed: {
    ...mapGetters(["leftColor", "rightTopColor"]),
  },
  data() {
    return {
      input3: "",
      currentIndex: 0,
      credentialnoType: 0,
      tabList: [
        { name: "身份证", value: 0 },
        { name: "手机号", value: 1 },
        { name: "姓名", value: 2 },
      ],
      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" },
      ],
      radio: "",
      value: "",
      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,
        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" },
      ],
    };
  },
  mounted() {
    this.getDeptList();
  },
  methods: {
    /**获取树部门 */
    async getDeptList() {
      let result = await treeselect();
      this.deptList = result.data[0].children;
      console.log(result);
    },
    /**
     * 级联筛选
     */
    changeSelect(e, 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;
      });
      this[key] = handleTreeId(e, this.deptList);
    },

    /**
     * 搜索
     */
    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;

      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 = undefined;
      this.queryParams.xiaoquId = undefined;
      this.queryParams.parentid = undefined;
      this.queryParams.yuanid = undefined;
      this.queryParams.buildingId = undefined;
      this.queryParams.houseid = 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() {
      let result = await inputSearch(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++;
    },

    /**
     * 处理颜色
     */
    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>
.search-container {
  margin-top: 10px;
  flex: 1;
  ::v-deep .option-rows {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #003869;
    padding: 15px 0;
    .el-select {
      margin-right: 10px;
      width: 150px;
    }
    .el-radio-group {
      margin: 0 30px 0 10px;
    }
    .el-checkbox__label,
    .el-radio__label {
      font-size: 16px;
      color: #aabace;
      font-weight: 500;
      font-family: "Alibaba-PuHuiTi-Regular.otf";
    }
  }
  .three-option {
    margin-top: 15px;

    .option-list {
      position: relative;
      top: 2px;
      left: 0;
      display: flex;
      align-items: center;
      & > div {
        cursor: pointer;
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin-right: 8px;
        background: #0059a2;
        border-radius: 4px 4px 0px 0px;
        font-size: 16px;
        color: #aee0ff;
        font-weight: 400;
        font-family: "Alibaba-PuHuiTi-Regular.otf";
      }
    }
    .option-input {
      height: 80px;
      background: #042854;
      border: 1px solid #006cc5;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .input-general-width {
        margin-right: 10px;
      }
      .input-big-width {
        width: 300px;
        margin-right: 10px;
      }
    }
  }

  .result-list {
    margin-top: 15px;
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      .header-left-total {
        color: #ffa11b;
        font-weight: 500;
        font-family: "Alibaba-PuHuiTi-Medium.otf";
      }
      .header-rigth-total {
        color: #aacfff;
        font-weight: 400;
        font-family: "Alibaba-PuHuiTi-Regular.otf";
      }
    }
    .list-table {
      margin-top: 10px;
      .table-header {
        padding: 5px 0;
        font-size: 16px;
        color: #eff8ff;
        background: linear-gradient(90deg, #007b9f, #0066d8);
        font-family: "Alibaba-PuHuiTi-Regular.otf";
      }
      .table-body {
        height: 350px;

        .body-rows {
          padding: 7px 0;
          font-size: 14px;
          color: #ffffff;
          font-family: "Alibaba-PuHuiTi-Medium.otf";
        }
        & > .body-rows:nth-child(even) {
          background: #033159;
        }
      }
      .table-header,
      .body-rows {
        display: flex;
        align-items: center;
        & > div {
          text-align: center;
        }
        .table-cell0 {
          width: 50px;
        }
        .table-cell1 {
          flex: 1;
        }
        .table-cell2 {
          flex: 2;
        }
        .cell-flex {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .el-button {
    font-size: 14px;
    color: #cdfbff;
    font-weight: 400;
    background: url("~@/assets/images/ui/btn_bg.png");
    background-size: 100% 100%;
    padding: 12px 20px 14px 20px;
    font-family: "Alibaba-PuHuiTi-Regular.otf";
  }
}
.activeItme {
  color: #ffffff !important;
  border: 1px solid #006cc5 !important;
  border-bottom: 0 !important;
  background: #042854 !important;
}
</style>
