<template>
  <div class="pa-lg-8 pa-md-8 pa-sm-3 page-m-card" v-if="!check || cardCount">
    <!-- {{ check }}{{ show }} -->
    <!-- {{ result }} -->
    <div
      style="
        background-color: #a8d18d;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 20px;
      "
      class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
    >
      <div class="text-subtitle text-left mb-md-3">
        <v-row align="center">
          <v-col cols="auto" class="pa-0 pl-2 pt-2">
            <v-avatar color="#f5e010" class="text-normal" size="50"
              >{{ group.id }}
            </v-avatar></v-col
          >
          <v-col> {{ group.name }}</v-col>
        </v-row>
      </div>
      <!-- {{ result }} -->
      <!-- {{ chunkedResults }} -->
      <v-container>
        <v-carousel
          v-model="model"
          height="auto"
          style="max-width: 900px"
          class="mx-auto"
        >
          <v-carousel-item
            v-for="(chunk, i) in chunkedResults"
            :value="i"
            :key="i"
          >
            <v-row class="page-search">
              <v-col :key="i" cols="12" md="12" lg="12">
                <div class="text-sub2 mx-auto card-user" maxWidth="1000">
                  <v-overlay
                    class="align-center justify-center"
                    scrim="#2a2a2adb"
                    contained
                    v-model="overlay"
                  >
                    <div
                      class=""
                      style="
                        padding: 20px;
                        border-radius: 10px;
                        color: white;
                        font-size: 25px;
                      "
                    >
                      ไม่พบข้อมูลผู้สมัคร
                    </div>
                  </v-overlay>
                  <div
                    style="
                      background: white;
                      border-radius: 10px;
                      min-height: 180px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      flex-direction: column;
                      text-align: center;
                    "
                    class="py-5"
                  >
                    <div v-for="(item, j) in chunk" :key="j" cols="12" md="4">
                      <div class="font-weight-bold my-2">
                        <div
                          class="mx-auto txt-subtitle my-auto"
                          style="margin: auto"
                          v-if="item.firstName"
                        >
                          <span>{{ item.firstName }}</span>
                          <span class="ml-3">{{ item.lastName }}</span>
                        </div>
                        <div v-else>-</div>
                      </div>
                    </div>
                    <!-- <div class="font-weight-bold my-2 text-md-left">
                      <div
                        class="mt-3 mb-2"
                        style="font-size: xx-large"
                        v-if="item.firstName"
                      >
                        <span> {{ item.firstName }}</span>
                        <span class="ml-3">
                          {{ item.lastName }}
                        </span>
                      </div>
                      <div v-else>-</div>
                    </div> -->
                  </div>
                </div></v-col
              >
            </v-row>
          </v-carousel-item>
        </v-carousel>

        <!-- <div class="text-subtitle my-10" v-else>ไม่พบผู้สมัคร</div> -->
      </v-container>
    </div>
  </div>
</template>
<script>
import { client } from "@/utils/trpc";
export default {
  props: {
    check: {
      type: Boolean,
    },
    dataProfile: {
      type: Array,
    },
    group: {
      type: Object,
    },
    province: {
      type: Object,
    },
    district: {
      type: Object,
    },
  },
  computed: {
    chunkedResults() {
      const chunkSize = 3;
      let chunks = [];
      for (let i = 0; i < this.result.length; i += chunkSize) {
        chunks.push(this.result.slice(i, i + chunkSize));
      }
      return chunks;
    },
  },
  data() {
    return {
      overlay: false,
      cardCount: 0,
      allg: "",
      checkdata: "",
      show: false,
      load: false,
      result: [],
      page: 1,
      districtItems: [],
      provinceItems: [],
      items: [],
      offset: 0,
      count: 0,
      model: 0,
      colors: ["primary", "secondary", "yellow darken-2", "red", "orange"],
    };
  },
  mounted() {
    this.$emit("valueSent", true);
    // this.load2 = true;
    let data = {};
    if (this.province) {
      data.province = this.province;
    }
    // if (this.district) {
    //   data.zone = this.district;
    // }
    if (this.group) {
      data.group = this.group.id;
    }
    data.limit = 30;
    if (data) {
       client.user.getAllUser
        .query(data)
        .then((rs) => {
          this.cardCount = rs.length;
          if (rs.length) {
            // rs.map((x)=>x.show=true)
            this.show = true;
            this.result = rs;
          } else {
            this.overlay = true;
            this.show = false;
            this.result = [
              {
                show: false,
                id: 56,
                firstName: "",
                lastName: "",
                title: "",
                cid: "1767250304480",
                age: " -",
                job: " -",
                education: " -",
                vision: null,
                reason: null,
                group: {
                  id: this.group.id,
                  name: " -",
                },
                zone: {
                  id: " -",
                  name: this.district.name,
                  province: {
                    id: "",
                    name: this.province.name,
                  },
                },
              },
            ];
          }
          console.log(rs);
          this.load = false;
          if (rs.length == 0) {
            this.show = true;
          }
          this.$emit("valueSent", false);
          // this.load2 = false;
          // this.districtItems = rs;
        })
        .catch((error) => {
          this.load = false;
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });

      // let param = { input: JSON.stringify({ 0: data }) };
      // var axios = require("axios");

      // const config = {
      //   method: "get",
      //   url: "http://localhost:3000/api/user.getAllUser",
      //   params: param,
      //   headers: {},
      // };

      // axios(config)
      //   .then((response) => {
      //     const rs = response.data.result.data;
      //     this.cardCount = rs.length;
      //     if (rs.length) {
      //       this.show = true;
      //       this.result = rs;
      //     } else {
      //       this.overlay = true;
      //       this.show = false;
      //       this.result = [
      //         {
      //           show: false,
      //           id: 56,
      //           firstName: "",
      //           lastName: "",
      //           title: "",
      //           cid: "1767250304480",
      //           age: " -",
      //           job: " -",
      //           education: " -",
      //           vision: null,
      //           reason: null,
      //           group: {
      //             id: this.group.id,
      //             name: " -",
      //           },
      //           zone: {
      //             id: " -",
      //             name: this.district.name,
      //             province: {
      //               id: "",
      //               name: this.province.name,
      //             },
      //           },
      //         },
      //       ];
      //     }
      //     console.log(rs);
      //     this.load = false;
      //     if (rs.length == 0) {
      //       this.show = true;
      //     }
      //     this.$emit("valueSent", false);
      //   })
      //   .catch((error) => {
      //     this.load = false;
      //     console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      //   });
    }
  },
};
</script>
<style>
.v-overlay__scrim {
  opacity: 0.7;
}
.overay-box {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  z-index: 99999;
}
.text-medium-emphasis {
  color: #3b3737c4;
}
div.v-window__container
  > div.v-window__controls
  > button.v-btn.v-btn--elevated.v-btn--icon.v-theme--light.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated {
  background-color: #3d763d8c;
  color: white;
}
.v-carousel__controls {
  margin-top: 40px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #3d763d8c;
  height: 23px;
}
.img-display-g {
  height: 450px;
}
.box-group {
  border-radius: 5px;
  background-color: #ffcd68;
  border-radius: 10px;
  width: -webkit-fill-available;
  width: fit-content;
  min-width: 100%;
  padding: 10px 2px;
  height: 100%;
}
.line-r-g {
  padding-left: 5px;
  border-color: #ffcd68;
  border-right: 0.2px solid #ffcd68;
}
.line-g {
  border: 1px solid #ffcd68;
  display: inline-flex;
}
.card-user {
  position: relative;
  /* height: 500px; */
}
.more {
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto;
}
.box-province {
  border-radius: 5px;
  background-color: #ffcd68;
  border-radius: 10px;
  width: -webkit-fill-available;
  /* width: fit-content; */
}

@media only screen and (min-width: 0px) and (max-width: 700px) {
  div.v-window__container
    > div.v-window-item.v-window-item--active.v-carousel-item
    > div
    > div.v-responsive__content
    > div
    > div
    > div {
    padding: 0 !important;
  }
  div.v-col-md.v-col-12.mx-auto > div.font-weight-bold.my-2.text-md-left {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .v-carousel__controls {
    height: 23px;
  }
  div.mx-auto.text-md-left.text-sub2.my-1 {
    margin: 0 !important;
  }
  div.font-weight-bold.my-2.text-md-left > div.text-sub2.text-left.mt-5 {
    margin-top: 0px !important;
    line-height: 24px;
  }
  div.v-window__container
    > div.v-window-item.v-window-item--active.v-carousel-item
    > div
    > div.v-responsive__content
    > div
    > div
    > div
    > div.v-card-item
    > div
    > div
    > div.v-col-md.v-col-12.mx-auto
    > div.font-weight-bold.my-2.text-md-left
    > div.mt-3.mb-2 {
    margin-top: 0px !important;
    line-height: 38px;
  }
  div.v-card-item
    > div
    > div
    > div.v-col-md.v-col-12.mx-auto
    > div.v-row
    > .v-col {
    padding: 2px !important;
  }
  .box-group {
    border-radius: 5px;
    background-color: #ffcd68;
    border-radius: 10px;
    width: -webkit-fill-available;
    /* width: fit-content; */
    /* min-width: 90%; */
    padding: 5px 0px;
    height: 85px;
    line-height: 37px;
  }
  .page-m-card {
    margin: 20px 7px;
  }
  .page-search {
    padding: 20px 0px;
  }

  .card-user {
    max-height: auto !important;
    height: auto !important;
  }
  .line-g {
    display: inline-flex;
  }
  .box-province {
    border-radius: 5px;
    background-color: #ffcd68;
    border-radius: 10px;
    width: -webkit-fill-available;
  }
  .img-display-g {
    height: 300px !important;
  }
  div.py-2.text-sub2.box-province.mx-auto.mx-md-1.my-4.mobile-box2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
<style scoped>
@media only screen and (min-width: 0px) and (max-width: 700px) {
  .text-subtitle {
    font-size: 19px;
    font-weight: 600;
  }
  .v-container {
    width: 100%;
    padding: 0px;
  }
}
</style>
