<script setup lang="ts">
import { ref } from "vue";
import Form from "@/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import router from "@/router";
import http from "@/plugins/http";
import config from "@/app.config";

const route = useRoute();
const typeId = ref<string>(route.params.id.toString());
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, showLoader, dialogConfirm, success } = mixin;

/**
 * บันทึกข้อมูลที่เเก้ไข
 * @param id ระบุ บุคคล
 */
function onSubmit(type:string) {
  dialogConfirm($q, () => putData(type));
}

/**
 * อัปเดตข้อมูล
 * @param type ช่องทางการร้องเรียน
 */
function putData(type: string) {
  showLoader();
  http
    .put(config.API.complaintChannelbyId(typeId.value), {
      name:type
    })
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      router.push(`/discipline/channel`);
    });
}
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.push(`/discipline/channel`)"
      />
      แก้ไขช่องทางการร้องเรียน
    </div>

    <Form :on-submit="onSubmit"/>
  </div>
</template>
