<template>
  <div>
    <div class="text-center pb-8">
      <v-img
        class="mx-auto"
        :aspect-ratio="1"
        src="@/assets/logo-title.png"
        width="250"
      ></v-img>
      <div class="text-title txt-black">ค้นหาผู้สมัคร สว.</div>
      <div class="my-5 text-sub2">
        สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
        ที่ตัวเองเป็นผู้แสดงตน
      </div>
      <div class="text-small text-red-darken-3">
        * การแสดงผลเป็นแบบสุ่มไม่เรียงลำดับ
      </div>
      <v-container>
        <!-- {{ checkdata }} -->
        <v-row>
          <v-col cols="12" md="4">
            <v-text-field
              v-if="province"
              label="จังหวัด"
              variant="solo"
              v-model="province"
              :value="province.name"
              readonly
            ></v-text-field>

            <!-- <v-autocomplete
              clearable
              label="จังหวัด"
              :items="provinceItems"
              variant="solo"
              item-title="name"
              item-value="id"
              v-model="province"
              placeholder="จังหวัด"
              @update:modelValue="filterData"
              hide-details
            ></v-autocomplete
          > -->
          </v-col>
          <v-col cols="12" md="4">
            <v-text-field
              v-if="province"
              label="อำเภอ / เขต"
              variant="solo"
              v-model="district"
              :value="district.name"
              readonly
            ></v-text-field>
            <!-- <v-autocomplete
              clearable
              label="อำเภอ / เขต"
              :items="districtItems"
              variant="solo"
              item-title="name"
              v-model="district"
              item-value="id"
              placeholder="อำเภอ / เขต"
              hide-details
              :disabled="province == null"
            ></v-autocomplete
          > -->
          </v-col>
          <v-col cols="12" md="4">
            <v-text-field
              v-if="province"
              label="กลุ่มอาชีพ"
              variant="solo"
              v-model="group"
              :value="group.id + ' ' + group.name"
              readonly
            ></v-text-field>
            <!-- <v-autocomplete
              clearable
              label="กลุ่มอาชีพ"
              :items="items"
              variant="solo"
              item-title="name"
              return-object
              placeholder="กลุ่มอาชีพ"
              hide-details
              v-model="group"
            >
              <template v-slot:item="{ props, item }">
                <v-list-item
                  v-bind="props"
                  :title="item.raw.id + ' ' + item.raw.name"
                ></v-list-item>
              </template>
            </v-autocomplete> -->
          </v-col>
        </v-row>
        <v-btn
          color="#e23972"
          class="mt-8"
          elevated
          size="large"
          @click="
            searchUserApi(0, '');
            showGroup = false;
          "
          :loading="load"
          width="300"
          height="52px"
        >
          <span class="text-sub">ค้นหากลุ่มอาชีพตนเอง</span>
        </v-btn>
        <!-- @click="searchUserApi(0, 'all')" -->
        <v-btn
          color="#4c884c"
          class="mx-5 mt-8"
          elevated
          size="large"
          width="300"
          @click="showGroup = true"
          :loading="load"
          height="52px"
        >
          <span class="text-sub">ค้นหาทุกกลุ่มอาชีพ</span>
        </v-btn>
      </v-container>
      <div v-if="!showGroup">
        <CardUser :dataProfile="result" v-if="result.length" class="mt-2" />

        <div
          v-if="result.length == 0 && this.show"
          class="my-10 text-sub2 txt-black"
        >
          <v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
        </div>

        <div class="text-center mt-2">
          <v-pagination
            elevation="3"
            v-if="count > 1"
            v-model="page"
            :length="Math.ceil(count / 2)"
            rounded="circle"
            @update:model-value="searchUser((this.page - 1) * 2)"
            next-icon="mdi-menu-right"
            prev-icon="mdi-menu-left"
          ></v-pagination>
        </div>
      </div>
      <!-- <v-container class="my-0 py-0"> -->
      <div>
        <!-- v-if="showGroup" -->
        <v-checkbox
        v-if="showGroup"
          v-model="checkbox1"
          label="ดูเฉพาะกลุ่มอาชีพที่มีข้อมูล"
          size="large"
          class="px-7 mt-5 check-card text-subtitle"
          color="#3d763d"
          hide-details
          
        ></v-checkbox>
      </div>
    <!-- </v-container>  -->
      <div v-for="(group, i) in apiGroup" :key="i">
        <CardUserGroup
          :check="checkbox1"
          :group="group"
          :province="province"
          :district="district"
          v-if="showGroup"
        />
      </div>
    </div>
  </div>
</template>
<script>
// import Provinces from "@/components/form/provinces.json";
// import Districts from "@/components/form/districts.json";
import CardUser from "./CardUser.vue";
import CardUserGroup from "./CardUserGroup.vue";
import { client } from "@/utils/trpc";

export default {
  components: {
    CardUser,
    CardUserGroup,
  },
  data() {
    return {
      checkbox1: true,
      showGroup: false,
      apiGroup: [],
      allg: "",
      checkdata: "",
      show: false,
      load: false,
      result: [],
      page: 1,
      province: null,
      district: null,
      districtItems: [],
      provinceItems: [],
      items: [],
      group: null,
      offset: 0,
      count: 0,
    };
  },
  methods: {
    searchUser(offset) {
      this.show = false;
      this.load = true;
      if (offset == 0) {
        this.page = 1;
      }
      let data = {
        offset: offset,
        limit: 2,
      };
      if (this.province) {
        data.province = this.province.id;
        // data.province = this.province;
      }
      if (this.group) {
        if (this.allg !== "all") {
          data.group = this.group.id;
        }
      }
      if (this.district) {
        data.zone = this.district.id;
      }

      // console.log(data);
      client.user.getAllUser
        .query(data)
        .then((rs) => {
          this.result = rs;
          console.log(rs);
          this.load = false;
          if (rs.length == 0) {
            this.show = true;
          }

          // this.districtItems = rs;
        })
        .catch((error) => {
          this.load = false;

          alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
    searchUserApi(offset, checkg) {
      this.allg = checkg;
      this.show = false;
      this.load = true;
      if (offset == 0) {
        this.page = 1;
      }
      // this.offset = (this.page - 1) * 10;
      let data = {
        offset: offset,
        limit: 2,
      };
      if (this.province) {
        data.province = this.province.id;
        // data.province = this.province;
      }

      if (this.group) {
        if (checkg !== "all") {
          data.group = this.group.id;
        }
      }
      if (this.district) {
        data.zone = this.district.id;
      }

      // console.log(data);
      client.user.getAllUserCount
        .query(data)
        .then((rs) => {
          this.count = rs;
        })
        .catch((error) => {
          alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });

      client.user.getAllUser
        .query(data)
        .then((rs) => {
          this.result = rs;
          console.log(rs);
          this.load = false;
          if (rs.length == 0) {
            this.show = true;
          }

          // this.districtItems = rs;
        })
        .catch((error) => {
          this.load = false;

          // alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
    filterData() {
      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
      this.district = null;
      if (this.province) {
        client.info.getAllZones
          .query({ provice_id: this.province })
          .then((data) => {
            this.districtItems = data;
          })
          .catch((error) => {
            // alert("ไม่สามารถโหลดข้อมูลได้");
            console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
          });
      }
    },
    getUser(datap) {
      client.user.getSelf
        .mutate({})
        .then((data) => {
          let province = datap.filter((x) => x.id === data.zone.province);
          // let g =[...this.items].filter((x) => x.id === data.group);
          this.province = province[0];
          this.district = data.zone;
          this.checkdata = { ...data };
          this.group = data.group;
          let filteredGroup = [...this.items].filter(
            (x) => x.id !== data.group.id
          );
          this.apiGroup = filteredGroup;
          console.log("filteredGroup", filteredGroup);
        })
        .catch((error) => {
          // alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
  },
  mounted() {
    client.info.getAllGroups
      .query({})
      .then((groups) => {
        this.items = groups;
      })
      .catch((error) => {
        // alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });

    client.info.getAllProvinces
      .query({})
      .then((data) => {
        this.provinceItems = data;
        this.getUser(data);
      })
      .catch((error) => {
        // alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });
  },
};
</script>
<style>
.check-card .v-selection-control {
  align-items: center !important;
  font-size: 25px;
}
.v-pagination .v-btn {
  font-size: large;
  background-color: white;
}

/* .v-pagination .v-pagination__item .v-btn {
  display: none;
} */
.v-pagination .v-btn .pagination__prev {
  font-size: 80px;
  display: block !important;
}
.v-pagination .v-btn .pagination__next {
  display: block !important;
  font-size: 80px;
}
</style>
