<template>
  <div class="g-pgi">
    <!-- 组织路由 -->
    <cpt-bread
      :separator="'/'"
      @tap="handleClickBreadItem"
      :breadList="breadList"
    ></cpt-bread>

    <div class="m-title">
      <img class="title_img" src="@/assets/images/index/list-logo.png" alt />
      <div class="tip_title">{{ tableTitle }}</div>
      <div class="title_line"></div>

      <div class="second-select" v-if="type == 'old'">
        <el-select
          v-model="oldVal"
          :popper-append-to-body="false"
          placeholder="请选择年龄"
        >
          <el-option
            v-for="item in oldList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        &nbsp;
        <el-select
          v-model="searchParams.resideSituation"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择居住情况"
        >
          <el-option
            v-for="item in resideArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="second-select" v-if="type == 'dibao'">
        <el-select
          v-model="searchParams.lowIncomeType"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择低保类型"
        >
          <el-option
            v-for="item in lowIncomeTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        &nbsp;
        <el-select
          v-model="searchParams.lowIncomeReason"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择低保原因"
        >
          <el-option
            v-for="item in lowIncomeReasonArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="second-select" v-if="type == 'zhiyuanzhe'">
        <el-select
          v-model="oldVal"
          :popper-append-to-body="false"
          placeholder="请选择年龄"
        >
          <el-option
            v-for="item in oldAllList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        &nbsp;
        <el-select
          v-model="searchParams.gategoryCode"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择志愿者类型"
        >
          <el-option
            v-for="item in volunteerArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="second-select" v-if="type == 'dangyuan'">
        <el-select
          v-model="oldVal"
          :popper-append-to-body="false"
          placeholder="请选择年龄"
        >
          <el-option
            v-for="item in oldAllList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        &nbsp;
        <el-select
          v-model="searchParams.cultureLevel"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择学历"
        >
          <el-option
            v-for="item in PostDictonArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="second-select" v-if="type == 'shiye'">
        <el-select
          v-model="oldVal"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择年龄"
        >
          <el-option
            v-for="item in oldAllList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        &nbsp;
        <el-select
          v-model="searchParams.employmentWish"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择就业愿望"
        >
          <el-option
            v-for="item in careerArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        &nbsp;
        <el-select
          v-model="searchParams.unemploymentReason"
          :popper-append-to-body="false"
          @change="changeSearch"
          placeholder="请选择失业原因"
        >
          <el-option
            v-for="item in unemploymentArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div
        class="second-select"
        v-if="
          type == 'fuwu' ||
          type == 'wennuan' ||
          type == 'jineng' ||
          type == 'gangwei'
        "
      >
        <el-input
          type="text"
          v-model="searchParams.serviceOrgName"
          placeholder="请输入服务方名称"
          @blur="changeFwfmc"
        />
      </div>
    </div>

    <div class="g-listbox">
      <cpt-tb
        :col-list="colList"
        :loading="loading"
        :header="header"
        :list="list"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handlePageNoChange="handlePageNoChange"
        @operate="jumpPage"
      ></cpt-tb>
    </div>
  </div>
</template>

<script>
import cptTb from "@/views/dataBoard/cpts/tb";
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
import getQueryPara from "dai-js/modules/getQueryPara";

export default {
  name: "resi-list",

  components: {
    cptTb,
    cptBread,
  },

  data() {
    return {
      breadList: [
        {
          path: "/dataBoard/renfang/index",
          meta: {
            title: "人房总览",
          },
        },
        {
          path: "/dataBoard/renfang/visualizing",
          meta: {
            title: "",
          },
        },
        {
          meta: {
            title: "居民列表",
          },
        },
      ],
      tableTitle: "居民列表",
      pageType: "",
      orgLevel: "",
      org_id: "",
      type_id: "", // 居民列表
      type_name: "",
      loading: true,
      pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
      pageNo: 1,
      total: 0,
      srcTableData: [],
      list: [],
      listData: [],
      oldList: [
        {
          label: "全部",
          value: ["ALL", "ALL"],
        },
        {
          label: "60-69岁",
          value: ["60", "69"],
        },
        {
          label: "70-79岁",
          value: ["70", "79"],
        },
        {
          label: "80-89岁",
          value: ["80", "89"],
        },
        {
          label: "90岁以上",
          value: ["90", "139"],
        },
      ],
      oldAllList: [
        {
          label: "全部",
          value: ["ALL", "ALL"],
        },
        {
          label: "0-9岁",
          value: ["0", "9"],
        },
        {
          label: "10-19岁",
          value: ["10", "19"],
        },
        {
          label: "20-29岁",
          value: ["20", "29"],
        },
        {
          label: "30-39岁",
          value: ["30", "39"],
        },
        {
          label: "40-49岁",
          value: ["40", "49"],
        },
        {
          label: "50-59岁",
          value: ["50", "59"],
        },
        {
          label: "60-69岁",
          value: ["60", "69"],
        },
        {
          label: "70-79岁",
          value: ["70", "79"],
        },
        {
          label: "80-89岁",
          value: ["80", "89"],
        },
        {
          label: "90岁以上",
          value: ["90", "139"],
        },
      ],
      colList: [
        {
          align: "left",
          width: "5%",
        },
        {
          align: "left",
          width: "10%",
        },
        {
          align: "left",
          width: "20%",
        },
        {
          align: "left",
          width: "20%",
        },
        {
          align: "left",
          width: "15%",
        },
        {
          align: "left",
          width: "10%",
        },
        {
          align: "left",
          width: "5%",
        },
        {
          align: "left",
          width: "10%",
        },
        {
          align: "left",
          width: "10%",
        },
      ],
      header: [
        "序号",
        "姓名",
        "所属网格",
        "所属房屋",
        "联系电话",
        "证件号",
        "性别",
        "出生日期",
        "操作",
      ],
      type: null,
      typeList: [
        {
          type: "old",
          name: "老年人",
          url: "/actual/base/peopleRoomOverview/oldPeoplePageList",
        },
        {
          type: "dibao",
          name: "低保人员",
          url: "/actual/base/peopleRoomOverview/lowIncomePageList",
        },
        {
          type: "zhiyuanzhe",
          name: "志愿者",
          url: "/actual/base/peopleRoomOverview/volunteerPageList",
        },
        {
          type: "dangyuan",
          name: "党员",
          url: "/actual/base/peopleRoomOverview/partyPageList",
        },
        {
          type: "shiye",
          name: "失业人员",
          url: "/actual/base/peopleRoomOverview/unemployedPageList",
        },
        {
          type: "fuwu",
          name: "服务找人分页查询",
          url: "/actual/base/peopleRoomOverview/servicePageList",
        },
        {
          type: "wennuan",
          name: "温暖找人查询",
          url: "/actual/base/peopleRoomOverview/warmthPageList",
        },
        {
          type: "jineng",
          name: "技能找人查询",
          url: "/actual/base/peopleRoomOverview/skillPageList",
        },
        {
          type: "gangwei",
          name: "岗位找人分页查询",
          url: "/actual/base/peopleRoomOverview/postPageList",
        },
      ],
      oldVal: ["60", "69"],
      jzVal: "",
      searchParams: {},
      unemploymentArr: [],
      PostDictonArr: [],
      resideArr: [],
      careerArr: [],
      lowIncomeReasonArr: [],
      lowIncomeTypeArr: [],
    };
  },

  activated() {
    const query = this.$route.query;
    this.org_id = query.org_id;
    this.type = query.type;
    this.type_id = query.type_id;
    this.pageType = query.pageType;
    this.type_name = query.type_name;
    const type_name = query.type_name;
    let title = type_name;
    if (this.type == "jineng" || this.type == "gangwei") {
      title = "失业人员";
    }
    if (this.type == "wennuan" || this.type == "fuwu") {
      title = "低保人员";
    }
    this.type_name1 = title;
    this.breadList[1].meta.title = title;
    this.tableTitle = type_name + "居民列表";
    this.pageNo = 1;
    const type = this.type;
    if (type == "dibao") {
      this.searchParams = {
        lowIncomeType: null, // 低保类型
        lowIncomeReason: null, // 低保原因
      };
    }
    if (type == "shiye") {
      this.searchParams = {
        employmentWish: null, // 就业愿望
        unemploymentReason: null, // 失业原因
        startAge: null,
        endAge: null,
      };
    }
    if (type == "dangyuan") {
      this.searchParams = {
        cultureLevel: null, // 学历
        startAge: null,
        endAge: null,
      };
    }
    if (type == "zhiyuan") {
      this.searchParams = {
        gategoryCode: null, // 志愿者类型
        startAge: null,
        endAge: null,
      };
    }
    if (
      type == "fuwu" ||
      type == "wennuan" ||
      type == "jineng" ||
      type == "gangwei"
    ) {
      this.searchParams = {
        serviceOrgName: null, // 服务方名称
      };
    }
    this.getList();
    if (this.pageType != "normal") {
      this.colList = [
        {
          align: "left",
          width: "5%",
        },
        {
          align: "left",
          width: "15%",
        },
        {
          align: "left",
          width: "20%",
        },
        {
          align: "left",
          width: "15%",
        },
        {
          align: "left",
          width: "15%",
        },
        {
          align: "left",
          width: "15%",
        },
        {
          align: "left",
          width: "10%",
        },
        {
          align: "left",
          width: "10%",
        },
      ];

      this.header = [
        "序号",
        "服务类型",
        "服务事项",
        "来源",
        "服务时间",
        "服务方",
        "服务人数",
        "操作",
      ];
    }
    // 字典
    this.getResideNation();
    this.getPostNation();
    this.getUnemployment();
    this.getCareer();
    this.getVolunteer();
    this.getLowIncomeReason();
    this.getLowIncomeType();
  },
  created() {
    this.pageNo = 1;
  },
  watch: {
    // $route(to, from) {
    //   this.$router.go(0);
    // },
    oldVal: {
      handler(newVal, oldVal) {
        this.pageNo = 1;
        const searchParams = {
          startAge: newVal[0],
          endAge: newVal[1],
        };
        this.getList(searchParams);
      },
    },
    searchParams(newVal, oldVal) {
      this.getList();
    },
  },

  methods: {
    handleClickBreadItem({ item }) {
      this.$router.push({
        path: item.path,
        query: {
          org_id: this.org_id,
          type_id: this.type_id,
          type_name: item.meta.title,
          pageType: this.pageType,
          type: this.type,
          pageType: this.pageType,
        },
      });
    },
    changeFwfmc(e) {
      this.searchParams = {
        serviceOrgName: e.target.value || null,
      };
      this.getList();
    },
    changeSearch() {
      this.getList();
    },
    jumpPage(index) {
      let item = this.listData[index];
      if (item.id) {
        this.$router.push({
          path: "/dataBoard/renfang/resident",
          query: {
            org_id: this.org_id,
            type_id: this.type_id,
            user_id: item.id,
            type: this.type,
            pageType: this.pageType,
            type_name: this.type_name,
          },
        });
      } else {
        this.$message.error("该人员暂无居民信息！");
      }
    },
    handlePageNoChange(pageNo) {
      this.pageNo = pageNo;
      this.getList();
    },
    handleSizeChange(pageSize) {
      localStorage.setItem("dataBoard_PageSize", pageSize);
      this.pageSize = pageSize;
      this.getList();
    },
    async getList(item) {
      const { url } = this.typeList.filter((item) => item.type == this.type)[0];
      const sourceType = ["公共服务", "共性需求", "政策找人", "服务找人"];
      this.loading = true;
      let queryParam = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.searchParams,
        ...item,
      };
      for (let key in queryParam) {
        if (queryParam[key] == "ALL") {
          queryParam[key] = undefined;
        }
      }
      this.$http.post(url, queryParam).then(({ data: res }) => {
        this.loading = false;
        const { data, code, msg } = res;
        const { list, total } = data;
        const gender = ["未知", "男", "女"];
        if (code === 0) {
          this.listData = list;
          if (this.pageType == "normal") {
            this.list = list.map((item, index) => {
              return [
                index + 1,
                item.name ? item.name : "--",
                item.gridName ? item.gridName : "--",
                item.fullName ? item.fullName : "--",
                item.mobile ? $sensitive(item.mobile, 3, 7) : "--",
                item.idNum ? $sensitive(item.idNum, 0, 14) : "--",
                item.gender ? gender[item.gender] : "--",
                item.birthday ? item.birthday : "--",
                { type: "operate", list: ["查看"] },
              ];
            });
          } else {
            this.list = list.map((item, index) => {
              return [
                index + 1,
                item.serviceCategoryKey ? item.serviceCategoryKey : "--",
                item.serviceName ? item.serviceName : "--",
                item.awardPoint ? sourceType[item.awardPoint] : "--",
                item.serviceTimeStart ? item.serviceTimeStart : "--",
                item.serviceOrgName ? item.serviceOrgName : "--",
                item.servedPersonQty ? item.servedPersonQty : "--",
                { type: "operate", list: ["查看"] },
              ];
            });
          }
          this.total = total;
        } else {
          this.$message.error(msg);
        }
      });
    },
    async getResideNation() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "reside_situation",
        });
        this.resideArr = [
          {
            value: "ALL",
            label: "全部",
          },
          ...data.data,
        ];
      } catch (error) {
        console.log(error, "获取居住情况字典");
      }
    },
    // async getPostNation() {
    //   try {
    //     let { data } = await this.$http.post("sys/dict/data/dictlist", {
    //       dictType: "welfare_post",
    //     });
    //     this.PostDictonArr = data.data;
    //   } catch (error) {
    //     console.log(error, "获取学历字典");
    //   }
    // },
    async getUnemployment() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "unemployment_reason",
        });
        this.unemploymentArr = [
          {
            value: "ALL",
            label: "全部",
          },
          ...data.data,
        ];
      } catch (error) {
        console.log(error, "获取失业原因字典");
      }
    },
    async getCareer() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "career_goals",
        });
        this.careerArr = [
          {
            value: "ALL",
            label: "全部",
          },
          ...data.data,
        ];
      } catch (error) {
        console.log(error, "获取就业愿望字典");
      }
    },
    async getVolunteer() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "VOLUNTEER_CATEGORY",
        });
        this.volunteerArr = [
          {
            value: "ALL",
            label: "全部",
          },
          ...data.data,
        ];
      } catch (error) {
        console.log(error, "获取志愿者类别字典");
      }
    },
    async getLowIncomeReason() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "low_income_reason",
        });
        this.lowIncomeReasonArr = [
          {
            value: "ALL",
            label: "全部",
          },
          ...data.data,
        ];
      } catch (error) {
        console.log(error, "获取低保原因字典");
      }
    },
    async getLowIncomeType() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "low_income_type",
        });
        this.lowIncomeTypeArr = [
          {
            value: "ALL",
            label: "全部",
          },
          ...data.data,
        ];
      } catch (error) {
        console.log(error, "获取低保类型字典");
      }
    },
    async getPostNation() {
      try {
        let { data } = await this.$http.post("sys/dict/data/education", {
          formCode: "resi_base_info",
        });
        this.PostDictonArr = [
          {
            value: "ALL",
            label: "全部",
          },
          ...data.data,
        ];
      } catch (error) {
        console.log(error, "获取学历字典");
      }
    },
  },
  destroyed() {
    console.log("我已经离开了！");
  },
};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>
