<template>
  <v-container class="txt-black my-3">
    <!-- <div class="text-subtitle mb-5">กรุณากรอกข้อมูลตามกำหนด</div> -->

    <div>
      <v-stepper v-model="e1">
        <template v-slot:default="">
          <v-stepper-header>
            <template v-for="n in steps" :key="`${n}-step`">
              <v-stepper-item
                color="#4C884C"
                :complete="e1 > n"
                :step="`Step {{ n }}`"
                :value="n"
              ></v-stepper-item>

              <v-divider v-if="n !== steps" :key="n"></v-divider>
            </template>
          </v-stepper-header>

          <v-stepper-window>
            <!-- -------------------------------------------step1----------------------------------------------- -->
            <v-stepper-window-item
              :key="`${1}-content`"
              :value="1"
              class="text-sub2"
            >
              <!-- <v-card color="" class="text-sub2"> -->
              <div>ช่วงที่ 1</div>
              <div class="text-subtitle">
                ข้อมูลส่วนตัว
                <hr class="my-3" />
              </div>
              <!-- {{ form1 disabled}} -->
              <v-form fast-fail @submit.prevent v-model="form1">
                <v-row class="px-2">
                  <v-col class="py-3" cols="12" md="6">
                    <v-text-field
                      label="ชื่อ / Name"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.firstName"
                      class="my-2"
                    ></v-text-field>
                    <v-text-field
                      label="นามสกุล / LastName"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.lastName"
                      class="my-2"
                    ></v-text-field>
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
                      <span class="text-red-accent-4 ml-2">
                        * ชื่อผู้ใช้งาน (username)
                      </span>
                    </div>
                    <v-text-field
                      label="เลขบัตรประชาชน / ID card number"
                      variant="solo"
                      :rules="rules.id"
                      v-model="payload.cid"
                      counter
                      readonly
                      class="mb-2"
                    ></v-text-field>
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
                      <span class="text-red-accent-4 ml-2">
                        * รหัสผ่าน (password)
                      </span>
                    </div>
                    <v-text-field
                      label="เบอร์โทรศัพท์"
                      variant="solo"
                      :rules="rules.tel"
                      v-model="payload.phone"
                      type="number"
                      hide-spin-buttons
                      class="my-2"
                      readonly
                    ></v-text-field>
                    <span class="text-medium-emphasis ml-2" style="font-size: 15px">
                         หมายเลขผู้สมัคร สามารถแก้ไขได้ในภายหลัง
                      </span>
                    <v-text-field
                      label="หมายเลขผู้สมัคร"
                      variant="solo"
                      v-model="payload.registerno"
                      type="number"
                      hide-spin-buttons
                      class="my-2"
                    ></v-text-field>
                    <v-row>
                      <v-col class="py-3" cols="12" md="6">
                        <v-text-field
                          label="อายุ / Age"
                          variant="solo"
                          type="number"
                          min="40"
                          :rules="rules.age"
                          v-model.number="payload.age"
                        ></v-text-field>
                      </v-col>
                      <v-col class="py-3" cols="12" md="6">
                        <v-text-field
                          label="อาชีพ / Occupation"
                          variant="solo"
                          :rules="rules.required"
                          v-model="payload.job"
                        ></v-text-field>
                      </v-col>
                    </v-row>

                    <v-select
                      label="ประวัติการศึกษา / Education"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.education"
                      :items="educateItem"
                    ></v-select>

                    <!-- <v-text-field
                      label="เบอร์โทรศัพท์"
                      variant="solo"
                      :rules="rules.tel"
                      v-model="payload.phone"
                      readonly
                    ></v-text-field> -->
                  </v-col>

                  <v-col class="">
                    <v-card
                      color="#4C884C"
                      class="pa-5 text-center h-100"
                      elevated
                    >
                      <div class="text-sub text-left">
                        <v-icon icon="mdi-plus-box-multiple"></v-icon>
                        เพิ่มรูปภาพ
                      </div>
                      <!-- {{url}} -->
                      <v-avatar size="200" color="grey" class="elevation-3">
                        <v-img :src="url" v-if="url"></v-img>
                        <v-icon dark v-else size="80"> mdi-account </v-icon>
                      </v-avatar>
                      <!-- :rules="rules.files" -->
                      <v-progress-linear
                        color="yellow-darken-2"
                        :indeterminate="loadimg"
                        class="mt-3"
                      ></v-progress-linear>
                      <v-file-input
                        label="แนบรูปภาพ"
                        accept="image/png, image/jpeg, image/bmp"
                        placeholder="แนบรูปภาพไฟล์ png/jpeg/jpg"
                        prepend-inner-icon="mdi-camera"
                        prepend-icon=""
                        variant="solo-filled"
                        class="mt-0"
                        @change="onFileChanged($event)"
                        v-model="image"
                      ></v-file-input>
                    </v-card>
                  </v-col>
                </v-row>
                <div class="btn-next">
                  <v-btn
                    @click.prevent="e1++"
                    :disabled="disabled && !form1"
                    variant="tonal"
                    class="float-right"
                    size="large"
                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>

                <!-- <v-stepper-actions
                  type="submit"
                  :disabled="disabled && !form1"
                  @click:next="next"
                  @click:prev="prev"
                ></v-stepper-actions> -->
              </v-form>
              <!-- </v-card> -->
            </v-stepper-window-item>
            <!-- -------------------------------------------step2----------------------------------------------- -->
            <v-stepper-window-item :key="`${2}-content`" :value="2">
              <v-form
                fast-fail
                @submit.prevent
                v-model="form2"
                class="text-sub2"
              >
                <div>ช่วงที่ 2</div>
                <div class="text-subtitle">
                  ข้อมูลการสมัคร สว.
                  <hr class="my-3" />
                </div>
                <v-row class="">
                  <v-col class="text-sub" cols="12">
                    ประสงค์จะสมัครในกลุ่ม*
                  </v-col>
                  <v-col class="py-3 col2" cols="12" md="12">
                    <!-- {{payload.group}} -->
                    <v-radio-group v-model.number="payload.group.id">
                      <v-radio
                        class="text-sub2 my-2"
                        :label="item.id + '). ' + item.name"
                        :value="item.id"
                        v-for="(item, i) in items"
                        :key="i"
                      ></v-radio>
                    </v-radio-group>
                  </v-col>
                  <v-col>
                    <div>
                      <div class="text-sub">
                        จังหวัดที่คุณประสงค์จะลงสมัคร*
                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
                        <hr class="my-3" />
                        <div class="text-sub3 text-red font-weight-bold">
                          เงื่อนไข
                        </div>
                        <div class="text-sub2">
                          จังหวัดที่เกิด
                          มีชื่ออยู่ในทะเบียนบ้านติดต่อกันไม่น้อยกว่า 2 ปี
                          (นับถึงวันสมัคร) เคยมีชื่ออยู่ในทะเบียนบ้านไม่น้อยกว่า
                          2 ปี ทำงานติดต่อกันไม่น้อยกว่า 2 ปี
                          เคยทำงานไม่น้อยกว่า 2 ปี
                          เป็นที่ตั้งของสถานศึกษาที่เคยศึกษา
                          ติดต่อกันไม่น้อยกว่า 2 ปีการศึกษา
                        </div>
                        <!-- {{ payload.zone }} -->
                        <!-- {{ province }} -->
                        <v-autocomplete
                          label="จังหวัด"
                          :items="provinceItems"
                          variant="solo"
                          item-title="name"
                          item-value="id"
                          v-model.number="payload.zone.province"
                          placeholder="จังหวัด"
                          @update:modelValue="filterData('')"
                          bg-color="#f6ebd5"
                        ></v-autocomplete>
                      </div>
                    </div>
                    <div>
                      <div class="text-sub">
                        อำเภอที่คุณประสงค์จะลงสมัคร*
                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
                        <hr class="my-3" />
                        <div class="text-sub3 text-red font-weight-bold">
                          เงื่อนไข
                        </div>
                        <div class="text-sub2">
                          อำเภอที่เกิด
                          มีชื่ออยู่ในทะเบียนบ้านติดต่อกันไม่น้อยกว่า 2 ปี
                          (นับถึงวันสมัคร) เคยมีชื่ออยู่ในทะเบียนบ้านไม่น้อยกว่า
                          2 ปี ทำงานติดต่อกันไม่น้อยกว่า 2 ปี
                          เคยทำงานไม่น้อยกว่า 2 ปี
                          เป็นที่ตั้งของสถานศึกษาที่เคยศึกษา
                          ติดต่อกันไม่น้อยกว่า 2 ปีการศึกษา
                        </div>
                        <!-- {{ payload.zone }} -->
                        <v-autocomplete
                          bg-color="#f6ebd5"
                          label="อำเภอ / เขต"
                          :items="districtItems"
                          variant="solo"
                          item-title="name"
                          return-object
                          v-model.number="payload.zone"
                          placeholder="อำเภอ / เขต"
                          :disabled="payload.zone.province == null"
                        ></v-autocomplete>
                      </div>
                    </div>
                  </v-col>
                </v-row>
                <div class="btn-next">
                  <v-btn
                    @click="e1--"
                    class="float-left"
                    size="large"
                    variant="tonal"
                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                  >
                  <!-- <v-spacer></v-spacer> -->

                  <v-btn
                    @click="e1++"
                    :disabled="
                      payload.group.id == null ||
                      payload.zone.province == null ||
                      payload.zone.id == null
                    "
                    size="large"
                    variant="tonal"
                    class="float-right"
                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>
                <!-- <v-stepper-actions
                  type="submit"
                  :disabled="disabled"
                  @click:next="next"
                  @click:prev="prev"
                ></v-stepper-actions> -->
              </v-form>
            </v-stepper-window-item>

            <!-- -------------------------------------------step3----------------------------------------------- -->
            <v-stepper-window-item
              :key="`${3}-content`"
              :value="3"
              class="text-sub2"
            >
              <div>ช่วงที่ 3</div>
              <!-- <div class="text-subtitle">
                จุดยืนในฐานะสมาชิกรัฐสภา ( สว.)
                <hr class="my-3" />
              </div> -->
              <v-row>
                <v-col>
                  <v-card>
                    <div class="text-subtitle">
                      คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
                    </div>
                    <hr class="my-3" />
                    <v-row>
                      <v-col></v-col>
                      <v-col>
                        <!-- <v-row class="text-sub3 font-weight-bold ">
                          <v-col class="rot-box" cols="3">เห็นด้วย</v-col><v-col class="rot-box" cols="3">ไม่เห็นด้วย</v-col
                          ><v-col class="rot-box" cols="3">พิจารณา</v-col>
                          <v-col class="rot-box" cols="3">ไม่แสดงความเห็น</v-col>
                        </v-row> -->
                      </v-col></v-row
                    >
                    <!-- {{option2}} -->
                    <v-row
                      v-for="(item, i) in option2"
                      :key="i"
                      align="center"
                      justify="center"
                      style="border-bottom: 1px solid #e4e4e4"
                    >
                      <v-col class="text-sub2 font-weight-medium" cols="12">
                        {{ item.name }}
                      </v-col>
                      <v-col cols="12">
                        <!-- {{ item.choice }} -->
                        <v-radio-group
                          inline
                          class="col4"
                          v-model="item.choice"
                        >
                          <v-radio
                            class="text-sub2"
                            value="strongly agree"
                            @click="item.choice = 'strongly agree'"
                            label="เห็นด้วยอย่างยิ่ง"
                          ></v-radio>
                          <v-radio
                            class="text-sub2"
                            value="agree"
                            @click="item.choice = 'agree'"
                            label="เห็นด้วย"
                          ></v-radio>
                          <v-radio
                            class="text-sub2"
                            value="disagree"
                            @click="item.choice = 'disagree'"
                            label="ไม่เห็นด้วย"
                          ></v-radio>
                          <v-radio
                            class="text-sub2"
                            value="strongly disagree"
                            @click="item.choice = 'strongly disagree'"
                            label="ไม่เห็นด้วยอย่างยิ่ง"
                          ></v-radio>
                          <v-radio
                            class="text-sub2"
                            value="ignore"
                            @click="item.choice = 'ignore'"
                            label="ไม่แสดงความเห็น"
                          ></v-radio>
                        </v-radio-group>
                      </v-col>
                    </v-row>
                  </v-card>
                  <v-card class="mt-8">
                    <!-- <div class="text-sub">
                      คำอธิบายจุดยืนในฐานะสมาชิกรัฐสภาเพิ่มเติมที่ต้องการจะให้คนอื่นทราบ
                      *
                    </div>
                    <hr class="my-3" /> -->
                    <!-- <v-textarea
                      label=""
                      variant="solo"
                      bg-color="#F2EBD1"
                      v-model="payload.vision"
                    ></v-textarea> -->

                    <div class="btn-next">
                      <v-btn
                        @click="e1--"
                        variant="tonal"
                        size="large"
                        class="float-left"
                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                      >
                      <!-- <v-spacer></v-spacer> -->

                      <v-btn
                        @click="e1++"
                        :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
                        variant="tonal"
                        class="float-right"
                        size="large"
                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                      >
                    </div>
                    <!-- {{ checkOpt1 }} -->
                  </v-card>
                </v-col>
              </v-row>
            </v-stepper-window-item>

            <!-- -------------------------------------------step4----------------------------------------------- -->
            <v-stepper-window-item
              :key="`${4}-content`"
              :value="4"
              class="text-sub"
            >
              <div>
                <div>ช่วงที่ 4</div>
                <div class="text-subtitle">
                  ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
                  <hr class="my-3" />
                </div>
                <!-- <v-card class="mt-8 text-sub">
                  <div class="text-sub">
                    แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
                  </div>
                  <v-textarea
                    label="เหตุผลความตั้งใจในการลงสมัคร  สว. ครั้งนี้"
                    variant="solo"
                    bg-color="#F2EBD1"
                    v-model="payload.reason"
                  ></v-textarea>
                </v-card> -->
                <v-card class="mt-8 text-sub">
                  <!-- <div class="text-sub">
                    ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
                  </div> -->
                  <v-row>
                    <v-col cols="12" md="12">
                      <v-text-field
                        variant="solo"
                        bg-color="#F2EBD1"
                        label="โทรศัพท์"
                        v-model="payload.public_phone"
                        :rules="rules.tel"
                        class="d-none"
                      ></v-text-field
                    ></v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" md="4"
                      ><v-text-field
                        variant="solo"
                        bg-color="#F2EBD1"
                        label="Facebook"
                        v-model="payload.facebook"
                      ></v-text-field
                    ></v-col>
                    <v-col cols="12" md="4"
                      ><v-text-field
                        variant="solo"
                        bg-color="#F2EBD1"
                        label="X (twitter)"
                        v-model="payload.twitter"
                      ></v-text-field
                    ></v-col>
                    <v-col cols="12" md="4"
                      ><v-text-field
                        variant="solo"
                        bg-color="#F2EBD1"
                        label="TikTok"
                        v-model="payload.tiktok"
                      ></v-text-field
                    ></v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="12" md="6">
                      <v-text-field
                        variant="solo"
                        bg-color="#F2EBD1"
                        label="email"
                        v-model="payload.email"
                      ></v-text-field
                    ></v-col>
                    <v-col cols="12" md="6">
                      <v-text-field
                        variant="solo"
                        bg-color="#F2EBD1"
                        v-model="payload.otherSocial"
                        label="ช่องทางอื่นๆ"
                      ></v-text-field
                    ></v-col>
                  </v-row>

                  <!-- <div class="text-sub">ช่องทางการติดต่อ (สำหรับทีมงาน)*</div>
                  <v-row>
                    <v-col cols="12" md="4">
                      <v-text-field
                        variant="solo"
                        bg-color="#F2EBD1"
                        label="โทรศัพท์"
                        :rules="rules.tel"
                        v-model="payload.public_phone"
                      ></v-text-field
                    ></v-col>
                  </v-row> -->
                </v-card>
                <v-card class="mt-8 text-sub">
                  <div class="text-sub">กรุณายืนยันการแก้ไขข้อมูล</div>
                  <v-checkbox
                    color="success"
                    value="true"
                    style="font-size: 24px"
                    v-model="check"
                  ></v-checkbox>
                  <div class="text-sub3">
                    ข้าพเจ้าขอสาบานตนต่อสิ่งศักดิ์สิทธิ์ทั้งหลายที่ข้าพเจ้านับถือ
                    และ/หรือหลักการใดๆ ที่ข้าพเจ้ายึดถือว่า
                    ข้อมูลที่ข้าพเจ้าได้ให้ไว้นั้นเป็นความสัตย์จริง ทั้งสิ้น
                    และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา ( สว.) ในครั้งนี้
                    จะทำหน้าที่ต่างๆ
                    โดยยึดเอาหลักการประชาธิปไตยและประชาชนเป็นที่ตั้ง
                    หากข้าพเจ้าให้ความเท็จหรือกระทำการใดอันขัดต่อหลักประชาธิปไตยและสิทธิมนุษยชน
                    ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
                    *ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
                  </div>
                  <div class="text-center mb-5">
                    <v-btn
                      color="#DD6C31"
                      class="mt-4"
                      height="40"
                      @click="submit"
                      :disabled="!check"
                      :loading="load"
                    >
                      <span class="text-sub">บันทึก</span>
                    </v-btn>
                  </div>
                  <div class="btn-next">
                    <v-btn
                      @click="e1--"
                      class="float-left"
                      size="large"
                      variant="tonal"
                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                    >
                  </div>
                </v-card>
              </div>
            </v-stepper-window-item>
          </v-stepper-window>
          <!-- <LoadSave :dialog="load" /> -->
        </template>
      </v-stepper>
    </div>
  </v-container>
</template>
<script>
// import LoadSave from "../form/LoadSave.vue";
import pica from "pica";
import Compressor from "compressorjs";
import { client } from "@/utils/trpc";
import { createFormData } from "@/utils/fileUpload";
import validateThaiID from "thai-id-validator";
import { mapGetters } from "vuex";

// client.info.getAllGroups.query({}).then(console.log);
export default {
  components: {},
  watch: {
    image(val) {
      console.log(val);
      if (val == undefined) {
        this.url = null;
        this.image = null;
      }
    },
    url(val) {
      if (val) {
        this.payload.image = val;
      }
    },
  },
  computed: {
    ...mapGetters(["getUsername"]),
    disabled() {
      return this.e1 === 1
        ? "prev"
        : this.e1 === this.steps
        ? "next"
        : undefined;
    },
    checkOpt1() {
      let dataOption = [...this.option2];
      const filteredItems = dataOption.filter(
        (item) => item.choice !== null && item.choice !== undefined
      );

      return { count: dataOption.length, checkcount: filteredItems.length };
    },
  },

  data() {
    return {
      loadimg: false,
      educateItem: [
        "ต่ำกว่าระดับประถม",
        "ระดับประถม",
        "ระดับมัธยมต้น",
        "ระดับมัธยมปลาย",
        "ระดับอาชีวศึกษา",
        "ระดับปริญญาตรี",
        "ระดับปริญญาโท",
        "ระดับปริญญาเอก",
      ],
      load: false,
      check: false,
      form1: false,
      form2: false,
      form3: false,
      form4: false,
      rules: {
        files: [
          (files) =>
            !files ||
            !files.some((file) => file.size > 3_097_152) ||
            "ไฟล์รูปต้องไม่เกิน 3MB!",
        ],
        space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
        username: (v) =>
          /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%&*|']*$/.test(v) ||
          "Username ไม่ถูกต้อง",

        name_eng: (v) => {
          if (v === null || v === undefined) {
            return false;
          }

          const pattern = /^[A-Za-z]+$/;
          return (
            (pattern.test(v) && v.length >= 8) ||
            "English name must contain only letters and be 8 characters or more"
          );
        },
        name_thai: (v) => {
          const pattern = /[\u0E00-\u0E7F']/;
          return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น";
        },
        required: [(value) => !!value || "กรุณากรอกข้อมูล"],
        password: (v) =>
          /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) ||
          // /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) ||
          "The password must contain lowercase letters ( a - z ), uppercase letters ( A - Z ), and numbers ( 0 - 9 ), with a length of 8 or more.",
        // 'รหัสผ่านจะต้องประกอบด้วยตัวพิมพ์เล็ก ( a - z ) ตัวอักษรพิมพ์ใหญ่ ( A - Z ) และตัวเลข ( 0 - 9 ) ความยาว 8 ขึ้นไป',
        passwordsMatch: (v) => {
          return v === this.FormRegister.password || "Passwords do not match";
        },
        min: (v) => v.length >= 6 || v.slice(0, 5),
        tel: [
          (v) =>
            // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
            /^([0-9]{10})$/.test(v) || "เบอร์โทรศัพท์ไม่ถูกต้อง",
        ],
        id: [
          (v) =>
            (/^\d+$/.test(v) &&
              parseInt(v) == v &&
              v.length == 13 &&
              validateThaiID(v)) ||
            "เลขบัตรประชาชนไม่ถูกต้อง",
        ],
        age: [(v) => parseInt(v) >= 40 || "อายุต้องมากกว่า 40 ปี"],
        email: [
          (value) => {
            const pattern =
              /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return pattern.test(value) || "อีเมลไม่ต้องถูก";
          },
        ],
      },
      checkdata: null,
      payload: {
        firstName: null,
        lastName: null,
        title: "",
        cid: null,
        age: null,
        phone: null,
        public_phone: null,
        facebook: null,
        twitter: null,
        tiktok: null,
        otherSocial: null,
        image: null,
        email: null,
        job: null,
        education: null,
        vision: null,
        reason: null,
        group: null,
        zone: null,
        province: null,
        registerno: null,
        // opinions: [
        //   {
        //     opinionId: "",
        //     choice: "",
        //   },
        // ],
      },

      url: null,
      image: null,
      file: null,
      province: null,
      district: null,
      districtItems: [],
      provinceItems: [],
      radio: null,
      e1: 1,
      steps: 4,
      option1: [],
      option2: [],
      opnitem2: [
        { text: "แก้ไข มาตรา 112", idx: 1, check: null },
        {
          text: "สามจังหวัดชายแดนภาคใต้เป็นเขตปกครองพิเศษ",
          idx: 2,
          check: null,
        },
        {
          text: "ควบคุมองค์กร NGO (องค์กรเอกชนเพื่อสาธารณประโยชน์)",
          idx: 3,
          check: null,
        },
      ],
      opnitem1: [
        { text: " สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
        { text: "แก้ไขรัฐธรรมนูญ 2560", idx: 2, check: null },
        { text: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ” ", idx: 3, check: null },
        {
          text: "เขียนรัฐธรรมนูญใหม่ แต่ยกเว้นหมวด 1 หมวด 2",
          idx: 4,
          check: null,
        },
        {
          text: "ให้มีสภาร่างรัฐธรรมนูญ (สสร.) ใหม่ จากการเลือกตั้ง100%",
          idx: 5,
          check: null,
        },
        {
          text: "แก้ไขที่มาของ สว. ยกเลิก สว. ใช้ระบบสภาเดี่ยว",
          idx: 6,
          check: null,
        },
        { text: "นิรโทษกรรมคดีการเมือง “ทุกคดี”", idx: 7, check: null },
        {
          text: "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
          idx: 8,
          check: null,
        },
        { text: "ป้องกันภัยคุกคามจากต่างประเทศ", idx: 9, check: null },
        { text: "ควบคุมสื่อสังคมออนไลน์", idx: 10, check: null },
        // { text: "ยกเลิกกฎหมายปราบปรามการค้าประเวณี", idx: 11, check: null },
        {
          text: "กัญชาเสรี บำนาญให้ประชาชนทุกคน เดือนละ 3,000 บาท",
          idx: 11,
          check: null,
        },
        {
          text: "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
          idx: 12,
          check: null,
        },
        { text: "กระจายอำนาจ เพิ่มงบประมาณให้ท้องถิ่น", idx: 13, check: null },
        {
          text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการ สว.",
          idx: 14,
        },
      ],
      items: [],
    };
  },
  methods: {
    optMapData() {
      // console.log('mappedData',this.option1);
      if (this.option1.length) {
        let opinions1 = [...this.option1];

        let opinions2 = [...this.payload.opinions];
        let opinions3 = [...this.option2];

        const mappedData = opinions2.map((opinion) => {
          // ค้นหาข้อมูลกลุ่มที่เกี่ยวข้องโดยใช้ id จาก opinionId
          const group = opinions1.find(
            (group) => group.id === opinion.opinionId
          );
          // สร้าง object ใหม่ที่มีข้อมูล opinionId, choice, และ groupName
          return {
            opinionId: opinion.opinionId,
            choice: opinion.choice,
            name: group ? group.name : null,
          };
        });

        const mappedData2 = opinions2.map((opinion) => {
          // ค้นหาข้อมูลกลุ่มที่เกี่ยวข้องโดยใช้ id จาก opinionId
          const group = opinions3.find(
            (group) => group.id === opinion.opinionId
          );
          // สร้าง object ใหม่ที่มีข้อมูล opinionId, choice, และ groupName
          return {
            opinionId: opinion.opinionId,
            choice: opinion.choice,
            name: group ? group.name : null,
          };
        });
        this.option1 = mappedData.filter((item) => item.name !== null);
        this.option2 = mappedData2.filter((item) => item.name !== null);
        // console.log("mappedData", mappedData, opinions1);
      }
    },
    onFileChanged(event) {
      this.loadimg = true;
      const file = event.target.files[0];
      this.file = file;
      if (this.file && this.file !== null) {
        this.resizeAndCompressImage(this.file);
      } else {
        this.url = null;
      }
    },
    resizeAndCompressImage(file) {
      const picaInstance = pica();

      const img = new Image();
      const reader = new FileReader();

      reader.onload = (e) => {
        img.src = e.target.result;
        img.onload = () => {
          const canvas = document.createElement("canvas");
          const maxWidth = 1024;
          const maxHeight = 1024;

          let width = img.width;
          let height = img.height;

          if (width > height) {
            if (width > maxWidth) {
              height *= maxWidth / width;
              width = maxWidth;
            }
          } else {
            if (height > maxHeight) {
              width *= maxHeight / height;
              height = maxHeight;
            }
          }

          canvas.width = width;
          canvas.height = height;

          picaInstance
            .resize(img, canvas, {
              quality: 3,
              alpha: true,
            })
            .then((result) => picaInstance.toBlob(result, "image/jpeg", 0.8))
            .then((blob) => {
              if (blob.size > 3 * 1024 * 1024) {
                new Compressor(blob, {
                  quality: 0.6,
                  maxWidth: 1024,
                  maxHeight: 1024,
                  success: (compressedBlob) => {
                    const compressedFile = new File(
                      [compressedBlob],
                      file.name,
                      { type: file.type, lastModified: Date.now() }
                    );
                    this.file = compressedFile;
                    this.createUrlFromBlob(compressedFile);
                  },
                  error: (err) => {
                    console.error("Compression error:", err);
                  },
                });
              } else {
                const resizedFile = new File([blob], file.name, {
                  type: file.type,
                  lastModified: Date.now(),
                });
                this.file = resizedFile;
                this.createUrlFromBlob(resizedFile);
                this.loadimg = false;
              }
            })
            .catch((err) => {
              console.error("Resize error:", err);
            });
        };
      };
      reader.readAsDataURL(file);
    },
    createUrlFromBlob(blob) {
      const reader = new FileReader();
      reader.onload = (event) => {
        this.url = event.target.result;
      };
      reader.readAsDataURL(blob);
    },
    // onFileChanged(event) {
    //   const file = event.target.files[0];
    //   this.file = file;

    //   if (this.file && this.file !== null) {
    //     const reader = new FileReader();
    //     reader.onload = (event) => {
    //       console.log(event.target.result);
    //       this.url = event.target.result;
    //     };
    //     reader.readAsDataURL(this.file);
    //     console.log();
    //   } else {
    //     this.url = null;
    //   }
    // },
    getUserAfterEdit() {
      client.user.getSelf.mutate({}).then((data) => {
        localStorage.setItem("username", data.firstName);
        localStorage.setItem("img", data.image);
        this.$store.commit("setUsername", data.firstName);
        this.$store.commit("setImg", data.image);
        this.load = false;
        this.$swal
          .fire({
            title: "บันทึกข้อมูลสำเร็จ",
            icon: "success",
            timer: 3000,
            showConfirmButton: false,
          })
          .then(() => {
            this.$router.push("/");
          });
      });
    },

    async uploadImage() {
      if (!this.file) {
        this.getUserAfterEdit();
        return;
      }
      let request = await client.user.requestChangeImage.mutate({
        imageName: this.file.name,
        contentType: this.file.type,
      });
      let formData = createFormData(request, this.file);
      await fetch(request.postURL, {
        method: "POST",
        body: formData,
      }).then(() => {
        client.user.confirmChangeImage
          .mutate()
          .then(() => {
            this.getUserAfterEdit();
          })
          .catch((error) => {
            this.load = false;
            console.log("error.message", error.message);
            alert("บันทึกรูปภาพไม่สำเร็จ!");
            this.getUserAfterEdit();
            // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
          });
        // alert("บันทึกข้อมูลสำเร็จ");
      });
      console.log("done");
    },
    submit() {
      this.load = true;
      let dataOption = [...this.option1, ...this.option2];
      let checkOption = [...this.payload.opinions];

      const changedChoices = dataOption.filter((item) => {
        const correspondingOpinion = checkOption.find(
          (opinion) => opinion.opinionId === item.opinionId
        );
        return correspondingOpinion.choice !== item.choice;
      });

      const filterOpt = changedChoices.map((item) => {
        return {
          opinionId: item.opinionId,
          choice: item.choice,
        };
      });

      let data2 = this.payload;
      // data1.group =data1.group.id
      // data1.zone =data1.zone.id
      data2.group = data2.group.id;
      data2.zone = data2.zone.id;
      delete data2.image;

      filterOpt.map((x) => {
        client.user.changeOpinion
          .mutate(x)
          .then(() => {
            this.getUser();
          })
          .catch((error) => {
            alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
            console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
          });
      });

      client.user.updateUser
        .mutate(data2)
        .then(() => {
          // console.log("data", data);
          this.uploadImage();
          // if (!this.file) {
          //   this.getUser("to");
          // } else {
          //   this.uploadImage();
          // }
        })
        .catch((error) => {
          this.load = false;
          console.log("eeee" +  error.message);
          if ( error.message == "Unable to create new user") {
            this.$swal.fire({
              title: "บันทึกข้อมูลไม่สำเร็จ",
              text: "บัญชีผู้ใช้งานซ้ำ",
              icon: "error",
            });
          } else {
            this.$swal.fire({
              title: "บันทึกข้อมูลไม่สำเร็จ",
              text: error.message,
              icon: "error",
            });
          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
    login(payload) {
      client.user.login
        .mutate(payload)
        .then((data) => {
          console.log("data", data);

          localStorage.setItem("token", data.token);
          this.$router.push("/");
        })
        .catch((error) => {
          this.load = false;
          console.log("eeee" +  error.message);
          if ( error.message == "Unable to create new user") {
            this.$swal.fire({
              title: "บันทึกข้อมูลไม่สำเร็จ",
              text: "บัญชีผู้ใช้งานซ้ำ",
              icon: "error",
            });
          } else {
            this.$swal.fire({
              title: "บันทึกข้อมูลไม่สำเร็จ",
              text: error.message,
              icon: "error",
            });
          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
    getUser() {
      client.user.getSelf
        .mutate({})
        .then((data) => {
          this.checkdata = { ...data };
          this.payload = { ...data };
          this.filterData("load");
          this.optMapData();
          this.url = data.image;
          this.$store.commit("setUsername", data.firstName);
          this.$store.commit("setImg", data.image);
        })
        .catch((error) => {
          this.load = false;
          console.log("eeee" +  error.message);
          if ( error.message == "Unable to create new user") {
            this.$swal.fire({
              title: "บันทึกข้อมูลไม่สำเร็จ",
              text: "บัญชีผู้ใช้งานซ้ำ",
              icon: "error",
            });
          } else {
            this.$swal.fire({
              title: "บันทึกข้อมูลไม่สำเร็จ",
              text: error.message,
              icon: "error",
            });
          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
    Preview_image() {
      // console.log('this.image', this.image)
      if (this.image && this.image !== null) {
        const reader = new FileReader();
        reader.onload = (event) => {
          console.log(event.target.result);
          this.url = event.target.result;
        };
        reader.readAsDataURL(this.image);
        console.log();
      } else {
        this.url = null;
      }
    },
    filterData(load) {
      if (load == !"load") {
        this.payload.zone.id = null;
        this.payload.zone.name = null;
      }
      client.info.getAllZones
        .query({ provice_id: this.payload.zone.province })
        .then((data) => {
          this.districtItems = data;
        })
        .catch((error) => {
          alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
  },
  mounted() {
    client.info.getAllOpinions
      .query({ type: "3Choice" })
      .then((rs) => {
        let data = [...rs].map((x) => {
          x.choice = null;
          x.opinionId = x.id;
          return x;
        });
        let data1 = [...data].filter((x) => x.type == "3Choice");
        this.option1 = data1;
        let data2 = [...data].filter((x) => x.type == "4Choice");
        this.option2 = data2;
        console.log("rs", rs, data1, data2);
        if (this.getUsername) {
          this.getUser();
        }
      })
      .catch((error) => {
        // alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });

    client.info.getAllGroups
      .query({})
      .then((groups) => {
        this.items = groups;
      })
      .catch((error) => {
        alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });

    client.info.getAllProvinces
      .query({})
      .then((data) => {
        this.provinceItems = data;
      })
      .catch((error) => {
        alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });
  },
};
</script>
<style>
.v-input--density-default .v-field__input {
  font-size: larger;
}
.v-selection-control {
  align-items: start !important;
}
/* [class$="--disabled"],
[class*="--disabled "] * {
    color: #000 !important; 
} */
.btn-next {
  padding: 1.5rem 0 0;
}
.v-selection-control-group--inline > * {
  flex-grow: 1;
}

.v-radio-group .v-input__details {
  display: none;
}
.v-stepper-item__avatar.v-avatar {
  width: 40px !important;
  height: 40px !important;
  font-size: 20px;
}
.v-label.v-field-label {
  opacity: 0.8;
}
.col2 {
  column-count: 2 !important;
}
.v-selection-control .v-label {
  font-size: 20px;
  opacity: 1;
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
  .text-red-accent-4 {
    display: block;
  }
  .col2 {
    column-count: 1 !important;
  }
  .rot-box {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-size: 17px;
    font-weight: 500;
  }
  .v-stepper-item__avatar.v-avatar {
    width: 20px !important;
    height: 20px !important;
    font-size: 15px;
  }
  .v-selection-control .v-label {
    font-size: 17px;
    opacity: 1;
  }
  .v-stepper-item__avatar.v-avatar {
    width: 33px !important;
    height: 33px !important;
    font-size: 25px;
  }
}
</style>
