<template>
  <div v-if="columns?.length">
    <DynamicTable row-key="id"
      header-title="配件管理"
      title-tooltip=""
      :data-request="Api.saleQuotationComponent.saleQuotationComponentList"
      :columns="columns"
      bordered
      size="small">
      <template #toolbar>
        <a-button type="primary"
          :disabled="!$auth('sale_quotation:sale_quotation_component:create')"
          @click="openEditModal({})">
          新增
        </a-button>
      </template>
    </DynamicTable>
  </div>
</template>

<script setup lang="tsx">
import { useTable } from '@/components/core/dynamic-table';
import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
import Api from '@/api/';
import { useFormModal, useModal } from '@/hooks/useModal';
import { formSchemas } from './formSchemas';

import { ref, onMounted } from 'vue';
defineOptions({
  name: 'SaleQuotationComponent',
});
const [DynamicTable, dynamicTableInstance] = useTable({ formProps: { autoSubmitOnEnter: true } });
const [showModal] = useFormModal();

// saleQuotationComponentList;
let columns = ref<TableColumnItem[]>();
onMounted(() => {
  columns.value = [
    ...baseColumns,
    {
      title: '操作',
      maxWidth: 150,
      width: 150,
      minWidth: 150,
      fixed: 'right',
      dataIndex: 'ACTION',
      hideInSearch: true,
      actions: ({ record }) => [
      
        {
          icon: 'ant-design:edit-outlined',
          tooltip: '编辑',
          auth: {
            perm: 'sale_quotation:sale_quotation_component:update',
            effect: 'disable',
          },
          onClick: () => openEditModal(record),
        },
        {
          icon: 'ant-design:delete-outlined',
          color: 'red',
          tooltip: '删除此配件',
          auth: 'sale_quotation:sale_quotation_component:delete',
          popConfirm: {
            title: '你确定要删除吗？',
            placement: 'left',
            onConfirm: () => delRowConfirm(record.id),
          },
        },

      ],
    },
  ];
});




/**
 * @description 打开新增/编辑弹窗
 */
const openEditModal = async (record: Partial<TableListItem>) => {
  const [formRef] = await showModal({
    modalProps: {
      title: `${record.id ? '编辑' : '新增'}配件`,
      width: '50%',
      onFinish: async (values) => {
        if (record.id) {
          await Api.saleQuotationComponent.saleQuotationComponentUpdate({ id: record.id }, values);
        } else {
          await Api.saleQuotationComponent.saleQuotationComponentCreate(values);
        }
        dynamicTableInstance?.reload();
      },
    },
    formProps: {
      labelWidth: 100,
      schemas: formSchemas,
    },
  });

  // 如果是编辑的话，需要获取角色详情
  if (record.id) {
    const info = await Api.saleQuotationComponent.saleQuotationComponentInfo({ id: record.id });
    formRef?.setFieldsValue({
      ...info,
    });
  }
};
const delRowConfirm = async (record) => {
  await Api.saleQuotationComponent.saleQuotationComponentDelete({ id: record });
  dynamicTableInstance?.reload();
};


</script>

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