<script setup>
import { ref, onMounted, defineProps } from "vue";
import { getProductSettingType } from "@/apis/productSetting";
import ProductSettingTypeAddModal from "./ProductSettingTypeAddModal.vue";

const props = defineProps({
  onCancel: Function,
});

const columns = [
  { title: "名稱", key: "product_name" },
  { title: "顯示名稱", key: "operate_text" },
  { title: "狀態", key: "disable" },
  { title: "操作", key: "operation" },
];

const data = ref([]);
const getData = async () => {
  const res = await getProductSettingType();
  data.value = res.data.map((d) => ({ ...d, key: d.product_id }));
};

onMounted(() => {
  getData();
});

const editRecord = ref(null);
const edit = (record) => {
  editRecord.value = record;
  record && openModal();
};
const openModal = () => {
  production_setting_PS3_Add_modal.showModal();
};
</script>

<template>
  <ProductSettingTypeAddModal
    :editRecord="editRecord"
    :getData="getData"
    :updateEditRecord="edit"
  />
  <Modal
    id="production_setting_PS3_modal"
    title="產品設定"
    :onCancel="onCancel"
    width="1000"
  >
    <template #modalContent>
      <Table :columns="columns" :dataSource="data" :withStyle="false">
        <template #beforeTable>
          <button
            class="btn btn-sm btn-success my-4"
            @click.stop.prevent="openModal"
          >
            <font-awesome-icon :icon="['fas', 'plus']" />新增
          </button>
        </template>
        <template #bodyCell="{ record, column }">
          <template v-if="column.key === 'disable'">
            {{ record.disable === 0 ? "啟用" : "停用" }}
          </template>
          <template v-if="column.key === 'operation'">
            <button
              class="btn btn-sm btn-success text-white mr-2"
              @click.stop.prevent="() => edit(record)"
            >
              修改
            </button></template
          >
        </template>
      </Table>
    </template>
    <template #modalAction>
      <button
        type="reset"
        class="btn btn-outline-success mr-2"
        @click.prevent="onCancel"
      >
        關閉
      </button>
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
