var VPPreviewBankSoal = (function () {
  let vp_template = `
  <div v-if="soalPG.length||soalPGMulti.length||soalPGTF.length||soalPGCouple.length"
  class="table-wrapper table-bordered table-responsive">
    <h5>Soal Pilihan Ganda</h5>
    <table class="table ">
        <tr v-for="(soal,si) in [...soalPG,...soalPGMulti,...soalPGTF,...soalPGCouple]">
            <td style="max-width:30px;vertical-align:top" class="px-1 pt-0">
                {{si+1}}
            </td>
            <td>
                <div class="p-1" v-html="soal.question">
                </div>

                <template v-if="[1,3,6].includes(parseInt(soal.jenis_soal))">
                    <div v-if="opsi.findIndex(v=>v.soal_id==soal.id)!=-1">
                        <table width="100%">
                            <tbody>
                                <tr>
                                    <td v-if="opsi.find(v=>v.soal_id==soal.id)"
                                        style="padding: 3px;width: 2%; vertical-align: text-top;">A.</td>
                                    <td v-if="opsi.find(v=>v.soal_id==soal.id)"
                                        style="padding: 3px;width: 31%; vertical-align: text-top;">
                                        <div v-html="opsi.find(v=>v.soal_id==soal.id).body">
                                        </div>
                                    </td>
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[2]"
                                        style="padding: 3px;width: 2%; vertical-align: text-top;">C.</td>
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[2]"
                                        style="padding: 3px;width: 31%; vertical-align: text-top;">
                                        <div v-html="opsi.filter(v=>v.soal_id==soal.id)[2].body">
                                        </div>
                                    </td>
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[4]"
                                        style="padding: 3px;width: 2%; vertical-align: text-top;">E.</td>
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[4]"
                                        style="padding: 3px;width: 31%; vertical-align: text-top;">
                                        <div v-html="opsi.filter(v=>v.soal_id==soal.id)[4].body">
                                        </div>
                                    </td>
                                </tr>
    
                                <tr v-if="opsi.filter(v=>v.soal_id==soal.id)[1]||opsi.filter(v=>v.soal_id==soal.id)[3]">
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[1]"
                                        style="padding: 3px;width: 2%; vertical-align: text-top;">B.</td>
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[1]"
                                        style="padding: 3px;width: 31%; vertical-align: text-top;">
                                        <div v-html="opsi.filter(v=>v.soal_id==soal.id)[1].body">
                                        </div>
                                    </td>
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[3]"
                                        style="padding: 3px;width: 2%; vertical-align: text-top;">D.</td>
                                    <td v-if="opsi.filter(v=>v.soal_id==soal.id)[3]"
                                        style="padding: 3px;width: 31%; vertical-align: text-top;">
                                        <div v-html="opsi.filter(v=>v.soal_id==soal.id)[3].body">
                                        </div>
                                    </td>
    
                                </tr>
    
                            </tbody>
                        </table>
                        Kunci : {{getKeys(soal.id)}}
    
                    </div>
                </template>
                <template v-if="soal.jenis_soal==4">
                  <div class="row m-0">
                    <div class="col-md-6">
                      <label>Pertanyaan</label>
                      <table width="100%">
                        <tbody>
                            <tr v-if="couple.filter(v=>v.soal_id==soal.id)[0]">
                              <td style="padding: 3px;width: 2%; vertical-align: text-top;">A.</td>
                              <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                  <div v-html="couple.filter(v=>v.soal_id==soal.id)[0].body"></div>
                              </td>
                            </tr>
                            <tr v-if="couple.filter(v=>v.soal_id==soal.id)[1]">
                              <td style="padding: 3px;width: 2%; vertical-align: text-top;">B.</td>
                              <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                  <div v-html="couple.filter(v=>v.soal_id==soal.id)[1].body"></div>
                              </td>
                            </tr>
                            <tr v-if="couple.filter(v=>v.soal_id==soal.id)[2]">
                                <td style="padding: 3px;width: 2%; vertical-align: text-top;">C.</td>
                                <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                    <div v-html="couple.filter(v=>v.soal_id==soal.id)[2].body">
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="couple.filter(v=>v.soal_id==soal.id)[3]">
                                <td style="padding: 3px;width: 2%; vertical-align: text-top;">D.</td>
                                <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                    <div v-html="couple.filter(v=>v.soal_id==soal.id)[3].body">
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="couple.filter(v=>v.soal_id==soal.id)[4]">
                                <td style="padding: 3px;width: 2%; vertical-align: text-top;">E.</td>
                                <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                    <div v-html="couple.filter(v=>v.soal_id==soal.id)[4].body">
                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    </div>
                    <div class="col-md-6">
                    <label>Jawaban</label>
                      <table width="100%">
                        <tbody>
                            <tr v-if="opsi.filter(v=>v.soal_id==soal.id)[0]">
                              <td style="padding: 3px;width: 2%; vertical-align: text-top;">A.</td>
                              <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                  <div v-html="opsi.filter(v=>v.soal_id==soal.id)[0].body"></div>
                              </td>
                            </tr>
                            <tr v-if="opsi.filter(v=>v.soal_id==soal.id)[1]">
                              <td style="padding: 3px;width: 2%; vertical-align: text-top;">B.</td>
                              <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                  <div v-html="opsi.filter(v=>v.soal_id==soal.id)[1].body"></div>
                              </td>
                            </tr>
                            <tr v-if="opsi.filter(v=>v.soal_id==soal.id)[2]">
                                <td style="padding: 3px;width: 2%; vertical-align: text-top;">C.</td>
                                <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                    <div v-html="opsi.filter(v=>v.soal_id==soal.id)[2].body">
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="opsi.filter(v=>v.soal_id==soal.id)[3]">
                                <td style="padding: 3px;width: 2%; vertical-align: text-top;">D.</td>
                                <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                    <div v-html="opsi.filter(v=>v.soal_id==soal.id)[3].body">
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="opsi.filter(v=>v.soal_id==soal.id)[4]">
                                <td style="padding: 3px;width: 2%; vertical-align: text-top;">E.</td>
                                <td style="padding: 3px;width: 31%; vertical-align: text-top;">
                                    <div v-html="opsi.filter(v=>v.soal_id==soal.id)[4].body">
                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                    </div>
                    Kunci : {{getCoupleKey(soal.id)}}
                  </div>
                </template>

            </td>
        </tr>
    </table>
  </div>

  <div v-if="soalShortEntry.length" class="table-wrapper table-bordered table-responsive">
    <h5>Soal Isian Singkat</h5>
      <table class="table ">
        <tr v-for="(soal,si) in soalShortEntry">
          <td style="max-width:30px;vertical-align:top" class="px-1 pt-0">
            {{si+1}}
          </td>
          <td>
            <div class="p-1" v-html="soal.question">
            </div>
            Jawaban : {{soal.shortentry}}
          </td>
        </tr>
      </table>
  </div>

  <div v-if="soalEsai.length" class="table-wrapper table-bordered table-responsive">
    <h5>Soal Esai</h5>
      <table class="table ">
        <tr v-for="(soal,si) in soalEsai">
          <td style="max-width:30px;vertical-align:top" class="px-1 pt-0">
            {{si+1}}
          </td>
          <td>
            <div class="p-1" v-html="soal.question">
            </div>
          </td>
        </tr>
      </table>
  </div>
  
    `;
  return {
    name: 'preview',
    template: vp_template,
    props: ['bankId', 'autoLoad'],
    data() {
      return {
        soal: [],
        opsi: [],
        couple: [],
        kode: null,
      }
    },
    mounted() {
      if (this.autoLoad) this.loadSoal();
    },
    methods: {
      getCoupleKey(soal_id) {
        let alphabet = ['A', 'B', 'C', 'D', 'E'];
        let couple = this.couple.filter(v => v.soal_id == soal_id);
        let opsi = this.opsi.filter(v => v.soal_id == soal_id);
        let keys = [];
        opsi.forEach((el, i) => {
          let coupled = couple.findIndex(v => v.id == el.soal_couple_id);
          if (coupled == -1) return;
          keys.push(`${alphabet[coupled]}-${alphabet[i]}`);
        });
        return keys.join(',');
      },
      loadSoal() {
        if (!this.bankId) return;
        this.soal = [];
        axios({
          method: 'GET',
          url: this.$store.state.config.base_url + `/panel/bank-soal/preview/${this.bankId}/soal`,
        }).then((response) => {
          if (!isObject(response.data)) return setTimeout(this.loadSoal, 1000);
          this.kode = response.data.kode;
          this.soal = response.data.soal;
        }, (error) => { });
      },
      loadOpsi() {
        let sid = [...this.soalPG, ...this.soalPGMulti, ...this.soalPGTF, ...this.soalPGCouple].map(v => v.id).join(',');
        if (!sid) return;
        axios({
          method: 'GET',
          url: this.$store.state.config.base_url + `/panel/bank-soal/preview/${this.bankId}/opsi?soal_id=${sid}`,
        }).then((response) => {
          if (!isObject(response.data)) return setTimeout(this.loadOpsi, 1000);
          this.opsi = response.data;
        }, (error) => { });
      },
      loadCouple() {
        let sid = this.soalPGCouple.map(v => v.id).join(',');
        if (!sid) return;
        axios({
          method: 'GET',
          url: this.$store.state.config.base_url + `/panel/bank-soal/preview/${this.bankId}/couple?soal_id=${sid}`,
        }).then((response) => {
          if (!isObject(response.data)) return setTimeout(this.loadCouple, 1000);
          this.couple = response.data;
        }, (error) => { });
      },
      getKeys(id) {
        let soal = this.soal.find(v => v.id == id);
        if (!soal) return null;
        let opsi = this.opsi.filter(v => v.soal_id == id).map((v, i) => {
          switch (i) {
            case 0:
              v.k = 'A';
              break;
            case 1:
              v.k = 'B';
              break;
            case 2:
              v.k = 'C';
              break;
            case 3:
              v.k = 'D';
              break;
            case 4:
              v.k = 'E';
              break;
          }
          return v;
        });
        if (soal.jenis_soal != 6) return opsi.filter(v => v.is_key == 1).map(v => v.k).join(',');
        if (soal.jenis_soal == 6) return opsi.map(v => `${v.k}-${v.is_key}`).join(',');
      }
    },
    watch: {
      soal() {
        this.loadOpsi();
        this.loadCouple();
      },
      bankId() {
        this.loadSoal();
      }
    },
    computed: {
      soalPG() {
        return this.soal.filter(v => v.jenis_soal == 1);
      },
      soalPGMulti() {
        return this.soal.filter(v => v.jenis_soal == 3);
      },
      soalPGTF() {
        return this.soal.filter(v => v.jenis_soal == 6);
      },
      soalPGCouple() {
        return this.soal.filter(v => v.jenis_soal == 4);
      },
      soalEsai() {
        return this.soal.filter(v => v.jenis_soal == 2);
      },
      soalShortEntry() {
        return this.soal.filter(v => v.jenis_soal == 5);
      },
    }
  }
})();
