<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-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 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.mark" label="">全部</el-radio>
      <el-radio v-model="queryParams.mark" label="ninety">3个月</el-radio>
      <el-radio v-model="queryParams.mark" label="eighty">半年</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">搜索结果列表</div>
        <div class="header-rigth-total">共{{ total }}条数据</div>
      </div>
      <div class="list-table" v-loading="loading">
        <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-cell1">分色</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"
          >
            <div class="table-cell0">{{ index + 1 }}</div>
            <div class="table-cell1">{{ item.name }}</div>
            <div class="table-cell1">
              {{ item.phone }}
            </div>

            <div class="table-cell1">{{ item.credentialNo }}</div>
            <div class="table-cell1 cell-flex">
              <ColorCell :item="item" />
              <span style="margin-left: 3px">{{ item.color }}</span>
            </div>
            <div class="table-cell1">
              <div class="recover" @click.stop="addClcik(item)">
                <span>恢复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRecycleList,
  exportHuishou,
  getNetWorkId,
  recoverData,
  removeData,
} from "@/api/home/index.js"; //回收
import { addPerson } from "@/api/taicangpop/person";
import { handleTreeId } from "@/utils/findTreeId.js";
import { treeselect } from "@/api/system/dept"; //部门
import { mapGetters } from "vuex";
import ColorCell from "@/components/ColorCell";
export default {
  dicts: ["b_color_type"],
  components: { ColorCell },
  computed: {
    ...mapGetters(["leftColor", "rightTopColor", "userId", "queryParamsIndex"]),
  },
  data() {
    return {
      loading: true,

      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" },
      ],

      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,
        mark: "",
        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.queryParams.shequId = this.queryParamsIndex.shequId;
    this.getDeptList();
  },
  methods: {
    /**
     * 恢复
     */
    /**恢复 */
    addClcik(item) {
      // console.warn("恢复数据", item.deleteUserId, this.userId);
      if (item.deleteUserId != this.userId) {
        this.$message.error("您没有权限恢复该条记录！");
      } else {
        this.$modal
          .confirm("您确定要恢复该条记录吗？")
          .then(() => {
            delete item.id;
            return addPerson(item);
          })
          .then(() => {
            removeData(item.personId);
          })
          .then(() => {
            this.handleSearch();
          })
          .then(() => {
            this.$message({
              message: "恢复成功",
              type: "success",
            });
          })
          .catch(() => {});
      }
    },
    /**获取树部门 */
    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 exportHuishou(this.queryParams);
        })
        .then((response) => {
          this.$download.name(response.msg);
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },

    /**
     * 重置操作
     */
    handleReset() {
      this.keyWord = "";
      this.credentialnoType = 0;
      this.queryParams.mark = "";
      // 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() {
      this.loading = true;
      let result = await getRecycleList(this.queryParams);
      let handleColor = this.handleColor(result.rows);
      this.list = [...this.list, ...handleColor];
      this.total = result.total;
      this.queryParams.pageNum++;
      this.loading = false;
    },

    /**
     * 处理颜色
     */
    handleColor(list) {
      let arr = list.map((item) => {
        item.personInfo = JSON.parse(item.personInfo);
        item.personInfo.deleteUserId = item.deleteUserId;
        item.personInfo.personId = item.id;
        if (!item.personInfo.color) {
          item.personInfo.leftColor = "#7b75ff";
          item.personInfo.rightTopColor = "#7b75ff";
        } else {
          for (let key in this.leftColor) {
            if (item.personInfo.color == key) {
              item.personInfo.leftColor = this.leftColor[key];
              item.personInfo.rightTopColor = this.rightTopColor[key];
            }
          }
        }

        item = item.personInfo;
        return item;
      });
      // console.log(arr);
      return arr;
    },

    /**
     * 重置
     */
    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>
