<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="{ prev, next }">
          <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 }} -->
              <v-form fast-fail @submit.prevent v-model="form1">
                <v-row class="px-2">
                  <v-col class="py-3" cols="12" md="12">
                    <v-text-field
                      label="ชื่อ / Name"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.firstName"
                    ></v-text-field>

                    <v-text-field
                      label="นามสกุล / LastName"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.lastName"
                    ></v-text-field>

                    <v-text-field
                      label="เลขบัตรประชาชน / ID card number"
                      variant="solo"
                      :rules="rules.id"
                      v-model="payload.cid"
                      counter
                    ></v-text-field>

                    <v-row>
                      <v-col class="py-3" cols="12" md="6">
                        <!-- <v-text-field
                            label="อายุ / Age"
                            variant="solo"
                            :rules="rules.required"
                            counter-value="true"
                          ></v-text-field> -->

                        <v-text-field
                          label="อายุ / Age"
                          variant="solo"
                          type="number"
                          min="40"
                          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-text-field
                      label="ประวัติการศึกษา / Education"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.education"
                    ></v-text-field>

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

                  <v-col class="d-none">
                    <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>

                      <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-5"
                        @change="Preview_image"
                        v-model="image"
                      ></v-file-input>
                    </v-card>
                  </v-col>
                </v-row>

                <!-- <v-btn @click.prevent="e1++" :disabled="!form1">next</v-btn> -->
                <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">
                      <v-radio
                        class="text-sub2"
                        :label="item.name"
                        :value="item.id"
                        v-for="(item, i) in items"
                        :key="i"
                      ></v-radio>
                    </v-radio-group>
                  </v-col>
                  <v-col>
                    <v-card>
                      <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>
                        <!-- {{ province }} -->
                        <v-autocomplete
                          label="จังหวัด"
                          :items="provinceItems"
                          variant="solo"
                          item-title="name"
                          item-value="id"
                          v-model.number="payload.province"
                          placeholder="จังหวัด"
                          @update:modelValue="filterData"
                        ></v-autocomplete>
                      </div>
                    </v-card>
                    <v-card>
                      <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
                          label="อำเภอ / เขต"
                          :items="districtItems"
                          variant="solo"
                          item-title="name"
                          item-value="id"
                          v-model.number="payload.zone"
                          placeholder="อำเภอ / เขต"
                          :disabled="payload.province == null"
                        ></v-autocomplete>
                      </div>
                    </v-card>
                  </v-col>
                </v-row>
                <div class="btn-next">
                  <v-btn @click="e1--" variant="text" class="float-left"
                    >Previous</v-btn
                  >
                  <!-- <v-spacer></v-spacer> -->

                  <v-btn
                    @click="e1++"
                    :disabled="
                      payload.zone == null ||
                      payload.province == null ||
                      payload.group == null
                    "
                    variant="tonal"
                    class="float-right"
                    >next</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 class="text-sub" cols="12">
                  คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
                </v-col>
                <v-col cols="12" md="12">
                  <!-- {{ opnitem1 }} -->
                  <v-row>
                    <v-col></v-col>
                    <v-col>
                      <v-row class="text-sub3 font-weight-medium">
                        <v-col class="rot-box" cols="4">เห็นด้วย</v-col
                        ><v-col class="rot-box" cols="4">ไม่เห็นด้วย</v-col
                        ><v-col class="rot-box" cols="4">พิจารณา</v-col>
                      </v-row>
                    </v-col></v-row
                  >
                  <!-- {{ option1 }} -->
                  <v-row
                    v-for="(item, i) in option1"
                    :key="i"
                    align="center"
                    justify="center"
                    style="border-bottom: 1px solid #e4e4e4"
                  >
                    <v-col class="">
                      {{ item.name }}
                    </v-col>
                    <v-col>
                      <v-radio-group inline hide>
                        <v-radio
                          class="text-sub2"
                          value="agree"
                          @click="item.choice = 'agree'"
                        ></v-radio>
                        <v-radio
                          class="text-sub2"
                          value="disagree"
                          @click="item.choice = 'disagree'"
                        ></v-radio>
                        <v-radio
                          class="text-sub2"
                          value="deciding"
                          @click="item.choice = 'deciding'"
                        ></v-radio>
                      </v-radio-group>
                    </v-col>
                  </v-row>
                </v-col>
                <v-col>
                  <v-card>
                    <div class="text-sub">
                      คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
                    </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">
                        <v-radio-group inline class="col4">
                          <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="deciding"
                            @click="item.choice = 'deciding'"
                            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>
                  </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">
                  คำถามอื่นเกี่ยวกับสว.
                  <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"
                      ></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"
                        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"
                    >
                      <span class="text-sub">บันทึก</span>
                    </v-btn>
                  </div>
                </v-card>
              </div>
            </v-stepper-window-item>
          </v-stepper-window>

          <v-stepper-actions
            v-show="e1 == 3 || el == 4"
            :disabled="disabled"
            @click:next="next"
            @click:prev="prev"
          ></v-stepper-actions>
        </template>
      </v-stepper>
    </div>
  </v-container>
</template>
<script>
// import Provinces from "./provinces.json";
// import Districts from "./districts.json";
import { client } from "@/utils/trpc";
import validateThaiID from "thai-id-validator";
// client.info.getAllGroups.query({}).then(console.log);
export default {
  watch: {
    image(val) {
      console.log(val);
      if (val == undefined) {
        this.url = null;
        this.image = null;
      }
    },
    url(val) {
      if (val) {
        this.payload.image = val;
      }
    },
  },
  computed: {
    disabled() {
      return this.e1 === 1
        ? "prev"
        : this.e1 === this.steps
        ? "next"
        : undefined;
    },
    //  isIdCardValid() {
    //   return this.$refs.form.validate();
    // },
    // // ถ้าเลขบัตรประชาชนไม่ถูกต้องให้ปุ่ม Next ถูก disable
    // isNextDisabled() {
    //   return !this.isIdCardValid;
    // }
  },

  data() {
    return {
      check: false,
      form1: false,
      form2: false,
      form3: false,
      form4: false,
      rules: {
        // ^[a-zA-Z0-9?><;,{}[\]\-_+=!@#$%\^&*|']*$
        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 || "Please fill out."],
        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) || "Invalid phone number",
        ],
        id: [
          (v) =>
            (parseInt(v) == v && v.length == 13 && validateThaiID(v)) ||
            "Invalid ID card number",
        ],
        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) || "invalid email";
          },
        ],
      },
      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,
        // opinions: [
        //   {
        //     opinionId: "",
        //     choice: "",
        //   },
        // ],
      },

      url: null,
      image: 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: {
    submit() {
      let dataOption = [...this.option1, ...this.option2];
      const filterOpt = dataOption.map((item) => {
        return {
          opinionId: item.opinionId,
          choice: item.choice,
        };
      });
      const filterOpt2 = filterOpt.filter((item) => item.choice !== null);
      if (filterOpt2.length) {
        this.payload.opinions = filterOpt2;
      }
      // console.log("opppp", filterOpt, filterOpt2);

      // let payload = {
      //   firstName: "ธรรมนูญ",
      //   lastName: "สังขวรรณ",
      //   title: "",
      //   cid: "1189900247580",
      //   age: 60,
      //   phone: "0819444825",
      //   public_phone: "0819444885",
      //   facebook: "https://m.facebook.com/ThoThamanoon?mibextid=LQQJ4d",
      //   twitter: "ThoThamanoon",
      //   tiktok: "ThoThamanoon",
      //   otherSocial: "thamanoon.sun@gmail.com",
      //   image: null,
      //   email: null,
      //   job: "ผู้จัดการทั่วไปพัฒนาเครือข่ายผู้จำหน่าย บริษัท นิสสัน มอเตอร์",
      //   education: "ปริญญาเอก",
      //   vision: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ”",
      //   reason: "ให้มีสภาร่างรัฐธรรมนูญ (สสร.) ใหม่ จากการเลือกตั้ง100%",
      //   group: 7,
      //   zone: 1034,
      //   province: 10,
      //   // opinions: [
      //   //   {
      //   //     opinionId: "",
      //   //     choice: "",
      //   //   },
      //   // ],
      // };
     
      // console.log("this.payload", this.payload);
      client.user.createUser
        .mutate(this.payload)
        .then((data) => {
          console.log("data", data);
          alert("บันทึกข้อมูลสำเร็จ");
          this.$router.push("/upload");
          // this.provinceItems = data;
        })
        .catch((error) => {
          alert("ไม่สามารถอัปโหลดข้อมูลได้");
          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() {
      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
      // if (this.province && this.province.provinceCode) {
      //   this.districtItems = [...Districts].filter(
      //     (item) => item.provinceCode === this.province.provinceCode
      //   );
      // }
      this.payload.zone = null;
      client.info.getAllZones
        .query({ provice_id: this.payload.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);
      })
      .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>
.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) {
  .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;
  }
}
</style>
