<script setup lang="ts">
import { ref, watch } from "vue";
import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";

const dataStore = useDisciplineChannelDataStore();
const channel = ref<string>(dataStore.type);
const channelRef = ref<any>();
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
/**
 * รับ props มาจาก page หลัก
 */
const props = defineProps({
  data: {
    type: Object,
    default: null,
  },
  onSubmit: {
    type: Function,
    default: () => "",
  },
});

/**
 * เช็คข้อมูลจาก props
 * เมื่อมีข้อมูล
 * เก็บข้อมูลลง formData
 */

/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function save() {
  channelRef.value.validate().then(async (result: boolean) => {
    if (result) {
      if (channel.value) {
        props.onSubmit(channel.value);
      }
    }
  });
}

function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}
</script>
<template>
  <q-form ref="channelRef">
    <div class="col-12">
      <q-card bordered>
        <div class="col-12 row q-col-gutter-md q-pa-md">
          <div class="col-xs-12 col-sm-12 row">
            <q-separator />
            <div class="col-12 row q-pa-sm q-col-gutter-sm">
              <q-input
                :class="inputEdit(isReadonly)"
                dense
                outlined
                v-model="channel"
                for="channel"
                hide-bottom-space
                label="ชื่อช่องทาง"
                lazy-rules
                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
              />
            </div>
          </div>
        </div>
        <q-separator />
        <div class="row col-12 q-pa-sm">
          <q-space />
          <q-btn
            for="ButtonOnSubmit"
            id="formSubmit"
            label="บันทึก"
            color="public"
            @click="save"
          >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </div>
      </q-card>
    </div>
  </q-form>
</template>
