<script setup lang="tsx">
import { computed } from 'vue';
import { NTag } from 'naive-ui';
import { fetchAdd, fetchDelete, fetchEdit, fetchList } from '@/service/api/operation/coupon';
import { useTable } from '@/components/zt/Table/hooks/useTable';
import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';

const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    type: 'selection',
    align: 'center',
    width: 48,
    fixed: 'left'
  },
  {
    key: 'name',
    align: 'center',
    title: '券名称'
  },
  {
    key: 'money',
    title: '充值金额',
    align: 'center'
  },
  {
    key: 'createTime',
    title: '创建时间',
    align: 'center'
  },
  {
    key: 'status',
    title: '状态',
    align: 'center',
    render: row => {
      return <NTag class={'mt7'}>{row.status == 1 ? '可用' : '不可用'}</NTag>;
    }
  },
  {
    key: 'tips',
    title: '充值提示',
    align: 'center'
  }
];

const [registerTable, { getTableCheckedRowKeys, refresh }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '充电券名称',
        component: 'NInput',
        field: 'name'
      },
      {
        label: '充值金额',
        component: 'NInput',
        field: 'money'
      },
      {
        label: '状态',
        component: 'NSelect',
        field: 'status',
        componentProps: {
          options: [
            {
              label: '不可用',
              value: 0
            },
            {
              label: '可用',
              value: 1
            }
          ]
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '平台券列表'
  }
});

const [
  registerModalForm,
  {
    openModal: openModalForm,
    setFieldsValue: setModalFormValue,
    setModalProps,
    getFieldsValue: getModalFormValue,
    closeModal: closeModalForm,
    setSubLoading
  }
] = useModalFrom({
  modalConfig: {
    title: '平台券',
    isShowHeaderText: false
  },
  formConfig: {
    schemas: [
      {
        label: '',
        field: 'id',
        component: 'NInput',
        show: false
      },
      {
        label: '',
        field: 'createTime',
        component: 'NInput',
        show: false
      },
      {
        label: '',
        field: 'createBy',
        component: 'NInput',
        show: false
      },
      {
        label: '',
        field: 'updateTime',
        component: 'NInput',
        show: false
      },
      {
        label: '',
        field: 'updateBy',
        component: 'NInput',
        show: false
      },
      {
        label: '',
        field: 'isDeleted',
        component: 'NInput',
        show: false
      },
      {
        field: 'name',
        label: '充电券名称',
        component: 'NInput',
        required: true
      },
      {
        field: 'money',
        label: '充值金额',
        component: 'NInput',
        required: true
      },
      {
        field: 'tips',
        label: '充值提示',
        component: 'NInput',
        required: true
      },
      {
        field: 'status',
        label: '状态',
        component: 'NSwitch',
        defaultValue: 1,
        required: true,
        componentProps: {
          checkedValue: 1,
          uncheckedValue: 0
        }
      }
    ],
    labelWidth: 120,
    layout: 'horizontal',
    gridProps: {
      cols: '1',
      itemResponsive: true
    }
  }
});

const isDisabled = computed(() => {
  return !getTableCheckedRowKeys().length;
});

function handleAdd() {
  setModalProps({
    title: '新增平台券'
  });
  openModalForm();
}
function handleEdit(row: any) {
  setModalProps({
    title: '编辑平台券'
  });
  openModalForm();
  setModalFormValue(row);
}
function handleBatchDelete() {
  const ids = getTableCheckedRowKeys().join(',');
  console.log('ids', ids);
  handleDelete(ids);
}
function handleDelete(id: any) {
  window.$dialog?.info({
    title: '删除',
    content: '你确定要删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const { error } = await fetchDelete(id);
      if (!error) {
        refresh();
      }
    }
  });
}

async function handleSubmit() {
  const form = await getModalFormValue();
  console.log(form, '表单');
  if (form.id) {
    // 编辑
    const { error } = await fetchEdit(form);
    if (error) {
      return;
    }
  } else {
    // 新增
    const { error } = await fetchAdd(form);
    if (error) {
      return;
    }
  }
  window.$message?.success('保存成功');

  setSubLoading(false);
  closeModalForm();
  refresh();
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchList" @register="registerTable" @add="handleAdd">
      <template #prefix="{ loading }">
        <NSpace>
          <NButton size="small" type="error" :disabled="isDisabled" :loading="loading" @click="handleBatchDelete">
            批量删除
          </NButton>
        </NSpace>
      </template>
      <template #op="{ row }">
        <NSpace>
          <NButton size="small" @click="handleDelete(row.id)">删除</NButton>
          <NButton size="small" @click="handleEdit(row)">编辑</NButton>
        </NSpace>
      </template>
    </ZTable>

    <BasicModelForm @register-modal-form="registerModalForm" @submit-form="handleSubmit"></BasicModelForm>
  </LayoutTable>
</template>

<style scoped></style>
