<template>
    <PageLayout>
          <q-list separator class="bg-white">
            <template v-for="(item, i) in config" :key="i">
              <template
                v-if="item.field === 'opened' || config[0].field_val"
              >
                <q-item v-if="item.type == 'switch'">
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                    <q-item-label caption>{{ item.desc }}</q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-toggle
                      :model-value="item.field_val == 1 ? 1 : 0"
                      :true-value="1"
                      :false-value="0"
                      @update:model-value="(val) => setValue(item.field, val)"
                    />
                  </q-item-section>
                </q-item>
                <q-item
                  v-else-if="item.type == 'input'"
                  @click="
                    promptUpdate(item.field, {
                      title: item.name,
                      prompt: { type: 'number',model: item.field_val},
                    })
                  "
                  clickable
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                    <q-item-label caption>{{ item.desc }}</q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-item-label>
                      {{ item.field_val }}
                      <q-icon name="keyboard_arrow_right" size="14px" />
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item
                  v-else
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                    <q-item-label caption>{{ item.desc }}</q-item-label>
                  </q-item-section>
                  <!-- <q-item-section side>
                    <q-item-label class="q-mr-xs">
                      {{ item.field_val }}
                    </q-item-label>
                  </q-item-section> -->
                </q-item>
              </template>
            </template>
          </q-list>
    </PageLayout>
  </template>
  <script setup>
  import { ref, onMounted, reactive, watch } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { useSelfStore } from "stores/self";
  import { api } from "boot/axios";
  import { useQuasar } from "quasar";
  // import { isVieTottery } from "src/utils/const";
  const $q = useQuasar();
  const route = useRoute();
  const router = useRouter();
  const store = useSelfStore();
  const config = ref([])
  function getLotteryConfig() {
    api.getLotteryConfig({ lottery_type_id: route.query.id }).then((res) => {
        config.value = res
    });
  }
  getLotteryConfig()
  function promptUpdate(key, dialogOptions) {
    $q.dialog({
      cancel: true,
      ...dialogOptions,
      prompt: {
        model: "",
        type: "text", // optional
        ...dialogOptions.prompt,
      },
    }).onOk((val) => {
      setValue(key, val);
    });
  }
  function setValue(field, field_val) {
    return api
      .updateLotteryConfig({
        lottery_type_id: route.query.id,
        field,
        field_val,
      })
      .then((res) => {
        getLotteryConfig()
      })
      .catch((e) => {
        $q.notify({ type: "negative", message: e.message });
        return Promise.reject(e);
      });
  }
  </script>
  <style lang="scss" scoped></style>
