<template>
  <div
    style="height: auto; min-height: 100vh"
    class="d-flex justify-center parent-container"
  >
    <v-btn
      @click="model++"
      style="z-index: 999"
      class="float-right btn-r btn-desk"
      rounded="circle"
      size="lg"
      color="white"
      v-if="model < 17"
      ><v-icon icon="mdi-menu-right" size="70" color="#F4C03F"></v-icon
    ></v-btn>

    <v-btn
      v-if="model > 0"
      @click="model--"
      style="z-index: 999"
      class="float-right btn-l btn-desk"
      rounded="circle"
      size="lg"
      color="white"
      ><v-icon icon="mdi-menu-left" size="70" color="#F4C03F"></v-icon
    ></v-btn>

    <v-carousel
      style="height: auto; min-height: 100vh"
      progress="#f4c03f"
      :show-arrows="false"
      v-model="model"
      hide-delimiters
    >
      <v-carousel-item v-for="(slide, i) in slides" :key="i">
        <v-sheet
          min-height="100vh"
          :color="slide.color"
          tile
          class="d-flex justify-center"
        >
          <v-container
            class="text-white text-center ma-auto"
            style="width: 90%"
            v-show="model <= 16"
          >
            <div class="d-block fill-height justify-center align-center">
              <v-img
                :aspect-ratio="1"
                class="mx-auto mb-4"
                src="@/assets/Group 9.png"
                width="70"
              ></v-img>
              <div class="text-title">คำถามที่ {{ i + 1 }}</div>
              <div class="border-white my-2"></div>
              <br />
              <p class="text-title">{{ slide.txt }}</p>

              <p class="text-normal mt-3">{{ slide.subtxt }}</p>
              <a
                :href="slide.link"
                target="_blank"
                rel="noopener noreferrer"
                class="text-normal text-white"
              >
                {{ slide.link }}</a
              >

              <br />
              <div class="d-flex justify-center align-center">
                <div>
                  <div>
                    <v-chip-group
                      v-model="slide.vmodel"
                      selected-class="text-white"
                      mandatory
                      :key="i"
                    >
                      <v-chip
                        v-if="i == 0 || i == 1"
                        label
                        @click="check(false, i)"
                        variant="elevated"
                        size="x-large"
                        class="d-flex justify-center align-center"
                        style="width: 80px; font-size: 25px; height: 50px"
                        color="#3AA8C9"
                      >
                        ใช่
                      </v-chip>
                      <v-chip
                        v-else
                        label
                        @click="check(true, i)"
                        variant="elevated"
                        size="x-large"
                        class="d-flex justify-center align-center"
                        style="width: 80px; font-size: 25px; height: 50px"
                        color="#3AA8C9"
                      >
                        ใช่
                      </v-chip>

                      <v-chip
                        class="d-flex justify-center align-center"
                        label
                        @click="check(true, i)"
                        variant="elevated"
                        size="x-large"
                        style="width: 80px; font-size: 25px; height: 50px"
                        color="#dd6c31"
                        v-if="i == 0 || i == 1"
                      >
                        ไม่ใช่
                      </v-chip>
                      <v-chip
                        v-else
                        class="d-flex justify-center align-center"
                        label
                        @click="check(false, i)"
                        variant="elevated"
                        size="x-large"
                        style="width: 80px; font-size: 25px; height: 50px"
                        color="#dd6c31"
                      >
                        ไม่ใช่
                      </v-chip>
                    </v-chip-group>
                  </div>
                </div>
              </div>
              <div class="text-center my-10 next-phone">
                <v-btn
                  v-if="model > 0"
                  @click="model--"
                  style="z-index: 999"
                  rounded="circle"
                  size="lg"
                  color="white"
                  class="mr-5"
                  ><v-icon
                    icon="mdi-menu-left"
                    size="70"
                    color="#F4C03F"
                  ></v-icon
                ></v-btn>
                <v-btn
                  @click="model++"
                  style="z-index: 999"
                  rounded="circle"
                  size="lg"
                  color="white"
                  v-if="model < 17"
                  ><v-icon
                    icon="mdi-menu-right"
                    size="70"
                    color="#F4C03F"
                  ></v-icon
                ></v-btn>
                <!-- v-if="model > 0" -->
              </div>
            </div>
          </v-container>
          <!-- {{ checkNull.length }} -->

          <div
            class="py-7 parent-container"
            v-if="model > 16 && checkPass.length == 17"
          >
            <v-container>
              <div
                class="text-black text-center pa-5 ma-auto vcenter txt-black"
                style="
                  background: white;
                  border-radius: 50%;
                  height: 400px;
                  width: 400px;
                  box-shadow: 0px 0px 0px 12px rgba(255, 255, 255, 0.5);
                  position: relative;
                "
              >
                <v-icon
                  icon="mdi-check-decagram"
                  color="#4c884c"
                  size="60"
                ></v-icon>
                <div class="text-title txt-black my-2">สรุปผล</div>

                <hr
                  class="w-75 ma-auto"
                  style="border: 1px solid; color: #37332f"
                />
                <v-icon
                  icon="mdi-crown-outline"
                  size="70"
                  color="#1b76ba"
                ></v-icon>
                <div class="text-subtitle txt-black">
                  มีคุณสมบัติผ่าน <br />
                  การสมัครเป็น สว.
                </div>
              </div>
              <div class="text-center mt-5">
                <v-btn
                  elevated
                  color="#1B76BA"
                  class="mt-4 mr-2"
                  stacked
                  height="60"
                  to="/"
                >
                  <span class="text-sub">เสร็จสิ้น</span>
                </v-btn>
                <v-btn
                  elevated
                  color="#DD6C31"
                  stacked
                  height="60"
                  to="/forms"
                  class="mt-4 mr-2"
                  v-if="
                    getUsername == '' ||
                    getUsername == null ||
                    getUsername == undefined
                  "
                >
                  <span class="text-sub">แสดงตนเป็นผู้สมัคร</span>
                </v-btn>
              </div>
            </v-container>
          </div>

          <div
            class="py-7 text-center"
            v-if="
              (model > 16 && checkNull.length > 0) ||
              (model > 16 && alertList.length)
            "
          >
            <v-container class="txt-black">
              <div class="text-title mb-2">สรุปผล</div>
              <div class="border-white mb-5"></div>

      
                <div class="text-sub py-8 d-block" v-if="checkNull.length > 0">
                  <v-icon icon="mdi-alert-circle-outline mr-2"     color="white"></v-icon>
                  กรุณาตอบคำถามให้ครบ
                  <div class="text-sub2">
                    ไม่ได้ตอบข้อ
                    <span v-for="(choice, i) in checkNull" :key="i"
                      >{{ choice.idx }} ,
                    </span>
                  </div>
                </div>  

              <div v-if="model > 16 && alertList.length">
                <v-card  class="mx-auto my-10" elevation="6" rounded="xl">
                <v-card-item>
                  <br>
                <v-icon
                  icon="mdi-close-circle"
                  size="60"
                  color="#ca2234"
                ></v-icon>
                <div class="text-sub">มีคุณสมบัติที่ไม่ผ่าน</div>
                <div
                  v-for="(txt, i) in alertList"
                  :key="i"
                  class="text-left my-3 text-sub2"
                >
                  <v-avatar color="#4c884c" size="35">
                    {{ i + 1 }}
                  </v-avatar>

                  {{ txt.not }}
                </div>
                <br>
                </v-card-item>
                </v-card>
              </div>
              <v-btn
                elevated
                color="#1B76BA"
                class="mt-4"
                stacked
                height="60"
                to="/"
              >
                <span class="text-sub">เสร็จสิ้น</span>
              </v-btn>
            </v-container>
          </div>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>

    <!-- <hr style="bolder" /> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  watch: {
    model() {
      this.show = false;
    },
  },
  computed: {
    ...mapGetters(["getUsername"]),
    checkNull() {
      let slides = this.slides;
      let data = slides.filter((x) => x.check === null);
      return data;
    },
    checkPass() {
      let slides = this.slides;
      let data = slides.filter((x) => x.check === false);
      return data;
    },
    alertList() {
      let slides = this.slides;
      let data = slides.filter((x) => x.check === true);
      return data;
    },
  },
  data() {
    return {
      alert: [],
      selection: null,
      model: 0,
      show: false,
      slides: [
        {
          txt: "อายุ 40 ปีเต็ม นับถึงเดือนพฤษภาคม 2567 หรือไม่?",
          color: "#4C884C",
          not: "อายุไม่ถึง 40 ปีเต็ม นับถึงเดือนพฤษภาคม 2567",
          check: null,
          idx: 1,
          vmodel: null,
        },
        {
          txt: "มีสัญชาติไทยตั้งแต่เกิดหรือไม่?",
          not: "ไม่มีสัญชาติไทยตั้งแต่เกิด",
          check: null,
          idx: 2,
          vmodel: null,
          color: "#8aa042",
        },
        {
          txt: "ปัจจุบันคุณทำงานเป็นข้าราชการ พนักงาน หรือลูกจ้างของหน่วยงานรัฐ หรือรัฐวิสาหกิจ หรือไม่?",
          color: "#4C884C",
          not: "ต้องลาออกจากงานข้าราชการ พนักงานหรือลูกจ้างของรัฐ",
          check: null,
          idx: 3,
          vmodel: null,
        },
        {
          txt: "เป็นตุลาการศาลรัฐธรรมนูญ​ หรือเป็นผู้ดำรงตำแหน่งในองค์กรอิสระ?",
          color: "#8aa042",
          not: "ต้องลาออกจากตำแหน่งตุลาการ หรือกรรมการองค์กรอิสระ",
          check: null,
          idx: 4,
          vmodel: null,
        },
        {
          txt: "เป็นเจ้าของหรือผู้ถือหุ้น ในกิจการหนังสือพิมพ์หรือสื่อมวลชน?",
          color: "#4C884C",
          not: "ต้องลาออกหรือขายหุ้นในกิจการสื่อมวลชน",
          check: null,
          idx: 5,
          vmodel: null,
        },
        {
          txt: "เป็นสมาชิกพรรคการเมือง? ตรวจสอบการเป็นสมาชิกพรรคการเมืองได้ที่",
          link: "https://party.ect.go.th/checkidparty",
          color: "#8aa042",
          not: "ต้องลาออกจากการเป็นสมาชิกพรรค",
          check: null,
          idx: 6,
          vmodel: null,
        },
        {
          txt: "เป็นพระภิกษุ สามเณร นักพรต หรือนักบวช?",
          color: "#4C884C",
          not: "ต้องลาสิกขา หรือออกจากสถานะนักบวชของศาสนานั้นๆ",
          check: null,
          idx: 7,
          vmodel: null,
        },
        {
          txt: "เป็นบุคคลล้มละลายอยู่จนถึงเดือนพฤษภาคม 2567 หรือเคยเป็นบุคคลล้มละลายทุจริต?",
          color: "#8aa042",
          not: "เป็นบุคคลล้มละลายอยู่จนถึงเดือนพฤษภาคม 2567",
          check: null,
          idx: 8,
          vmodel: null,
        },
        {
          txt: "อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกตั้ง หรือระงับสิทธิสมัครรับเลือกตั้ง?",
          color: "#4C884C",
          not: "อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกตั้ง หรือระงับสิทธิสมัครรับเลือกตั้ง",
          check: null,
          idx: 9,
          vmodel: null,
        },
        {
          txt: "เคยต้องคำพิพากษาถึงที่สุดว่า ทำความผิดต่อตำแหน่งหน้าที่ราชการ ความผิดเกี่ยวกับทรัพย์ที่กระทำโดยทุจริต ความผิดฐานฉ้อโกงประชาชน ความผิดฐานเป็นผู้ผลิตหรือผู้ค้ายาเสพติด ความผิดฐานเป็นเจ้ามือการพนัน ความผิดฐานค้ามนุษย์ ความผิดฐานฟอกเงิน?",
          color: "#8aa042",
          not: "เคยต้องคำพิพากษาถึงที่สุดว่า ทำความผิดต่อตำแหน่งหน้าที่ราชการ ความผิดเกี่ยวกับทรัพย์ที่กระทำโดยทุจริต ความผิดฐานฉ้อโกงประชาชน ความผิดฐานเป็นผู้ผลิตหรือผู้ค้ายาเสพติด ความผิดฐานเป็นเจ้ามือการพนัน ความผิดฐานค้ามนุษย์ ความผิดฐานฟอกเงิน",
          check: null,
          idx: 10,
          vmodel: null,
        },
        {
          txt: "เคยต้องคำพิพากษาถึงที่สุดว่า ร่ำรวยผิดปกติ หรือมีความผิดตามกฎหมายป.ป.ช. หรือทุจริตการเลือกตั้ง?",
          color: "#4C884C",
          not: "เคยต้องคำพิพากษาถึงที่สุดว่า ร่ำรวยผิดปกติ หรือมีความผิดตามกฎหมายป.ป.ช. หรือทุจริตการเลือกตั้ง",
          check: null,
          idx: 11,
          vmodel: null,
        },
        {
          txt: "เคยพ้นจากราชการเพราะทุจริตต่อหน้าที่?",
          color: "#8aa042",
          not: "เคยพ้นจากราชการเพราะทุจริตต่อหน้าที่",
          check: null,
          idx: 12,
          vmodel: null,
        },
        {
          txt: "เป็นรัฐมนตรี เป็นสส. เป็นผู้ดำรงตำแหน่งในพรรคการเมือง เป็นผู้บริหารท้องถิ่น เป็นสมาชิกสภาท้องถิ่น และพ้นจากตำแหน่งมาไม่เกิน 5 ปี นับจนถึงพ.ค.67?",
          color: "#4C884C",
          not: "เป็นรัฐมนตรี เป็นสส. เป็นผู้ดำรงตำแหน่งในพรรคการเมือง เป็นผู้บริหารท้องถิ่น เป็นสมาชิกสภาท้องถิ่น และพ้นจากตำแหน่งมาไม่เกิน 5 ปี นับจนถึงพ.ค.67",
          check: null,
          idx: 13,
          vmodel: null,
        },
        {
          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกจากตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
          color: "#8aa042",
          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
          check: null,
          idx: 14,
          vmodel: null,
        },
        {
          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัคร สว. ในปี 2567?",
          color: "#4C884C",
          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัคร สว. ในปี 2567 (ในครอบครัวนึงให้เลือกลงสมัครได้คนเดียวนะ)",
          check: null,
          idx: 15,
          vmodel: null,
        },
        {
          txt: "คุณถูกจำกัดสิทธิสมัคร  สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือ ไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้ง  ",
          subtxt: "ตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
          link: "https://boraservices.bora.dopa.go.th/election/absvote/",
          color: "#8aa042",
          not: "ไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 โดยไม่ได้แจ้งเหตุ",
          check: null,
          idx: 16,
          vmodel: null,
        },
        {
          txt: "คุณเคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปีถ้าเป็นกรณีต่อไปนี้ ให้ตอบว่า “ไม่ใช่”",
          subtxt:
            "คดีนั้นรอลงอาญา / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดจากการกระทำโดยประมาท / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดลหุโทษ (ความผิดที่กฎหมายกำหนดโทษจำคุกไม่เกินหนึ่งเดือน ปรับไม่เกิน 10,000 บาท)",
          color: "#4C884C",
          not: "เคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปี",
          check: null,
          idx: 17,
          vmodel: null,
        },
        {
          color: "#8aa042",
          idx: 18,
          vmodel: null,
        },
      ],
      colors: ["primary", "secondary", "yellow darken-2", "#4C884C", "orange"],
    };
  },

  methods: {
    check(val, i) {
      if (val == true || val == false) {
        this.slides[i].check = val;
        // this.slides= this.slides
        this.show = true;
        this.model = this.model + 1;
      }
      //   if(val){
      //     alert.push()
      //   }
    },
  },
};
</script>

<style>
.btn-desk {
  display: block;
}
.next-phone {
  display: none;
}
.parent-container {
  position: relative; /* ตั้งค่าเพื่อให้ .btn-r สามารถตั้งอยู่ส่วนมากในพื้นที่นี้ */
  display: flex; /* ให้พาเนลหลักของพื้นที่ตรงกลางแนวตั้ง */
  align-items: center; /* จัดแนวตั้งของ .btn-r ให้อยู่ตรงกลาง */
}
.btn-r {
  height: 70px !important;
  width: 70px !important;
  position: absolute;
  right: 0px;
  margin: 15px;
  margin: 15px;
}
.btn-l {
  height: 70px !important;
  width: 70px !important;
  position: absolute;
  left: 0px;
  margin: 15px;
  margin: 15px;
}
.vcenter {
  display: block;
  /* justify-content: center; */
  align-items: center;
}
.border-white {
  border: 2px solid white;
  width: 350px;
  margin: auto;
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
  .btn-desk {
    display: none;
  }
  .next-phone {
    display: block;
  }
  .btn-r {
    background-color: transparent !important;
  }
  .btn-l {
    background-color: transparent !important;

    position: absolute;
    left: 0px;
    margin: 15px;
    margin: 15px;
  }
}
</style>
