<template>
  <div>
    <div class="fixed-grid has-3-cols">
      <div class="grid">
        <div class="cell" v-for="rule in recordRules" :key="rule.code">
          <label class="radio">
            <input type="radio" name="answer" :value="rule.code" v-model="recordCurrent" />
            {{ isVietnamese ? rule.vi : rule.en }}
          </label>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const { $updateapi, $snackbar, $getdata, $store } = useNuxtApp();
var props = defineProps({
  api: String,
  pagename: String,
  row: Object,
  prefix: String,
});

const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");

const recordRules = ref([]);
const recordCurrent = ref({});
let current = {};

let foundCurrent = await $getdata(props.api, { category: "system", classify: "current", code: "rule" });

if (foundCurrent !== "error" && foundCurrent.length > 0) {
  recordCurrent.value = foundCurrent[0].detail;
  current.value = foundCurrent[0];
}

let foundRules = await $getdata(props.api, { category: "system", classify: "rules" });
if (foundRules !== "error" && foundRules.length > 0) {
  recordRules.value = foundRules;
}

watch(recordCurrent, async (newVal) => {
  current.value.detail = newVal;
  let rs = await $updateapi(props.api, current.value, null);
  if (rs === "error") return $snackbar(rs);
});
</script>
