<template>
  <div class="search-container">
    <div class="option-rows">
      <imageButton size="medium" @handlerClcik="handleExport">导出</imageButton>
    </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"
          >
            <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 { mapGetters } from "vuex";
import { listPerson, exportPerson } from "@/api/taicangpop/person.js";
import ColorCell from "@/components/ColorCell";
import { handleColor } from "@/utils/myFuntion.js";
export default {
  components: {
    ColorCell,
  },
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      queryParams: {
        isD: 1,
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  computed: {
    ...mapGetters(["queryParamsXiaoqu"]),
  },
  methods: {
    load() {
      if (this.list.length > 0 && this.list.length >= this.total) return;
      this.getList();
    },
    /**
     * 获取list
     */
    async getList() {
      this.loading = true;
      this.queryParams.xiaoquId = this.queryParamsXiaoqu.xiaoquId;
      this.queryParams.buildingId = this.queryParamsXiaoqu.buildingId;
      let result = await listPerson(this.queryParams);
      let data = handleColor(result.rows);

      this.list = [...this.list, ...data];
      this.total = result.total;
      this.queryParams.pageNum++;
      this.loading = false;
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal
        .confirm("是否确认导出党员数据？")
        .then(() => {
          return exportPerson(queryParams);
        })
        .then((response) => {
          this.$download.name(response.msg);
        })
        .catch(() => {});
    },
  },
};
</script>

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