<script setup lang="tsx">
import { useRouter } from 'vue-router';
import { NButton, NImage, NSwitch } from 'naive-ui';
// import dayjs from 'dayjs';
import { fetchDelType, fetchTypeList, fetchUpdateStatus } from '@/service/api/member-center/member-type';
import { useTable } from '@/components/zt/Table/hooks/useTable';
const router = useRouter();

const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'id',
    title: 'ID',
    align: 'center',
    width: 100
  },
  {
    key: 'memberName',
    title: '会员名称',
    align: 'center',
    width: 100
  },
  {
    key: 'openChannelCodes',
    title: '开放渠道',
    align: 'center',
    width: 100,
    render: row => {
      return <dictTag value={row.openChannelCodes} dictCode="open_channel" immediate={true}></dictTag>;
    }
  },
  {
    key: 'status',
    title: '状态',
    align: 'center',
    width: 100,
    render: row => {
      return (
        <NSwitch
          uncheckedValue={0}
          checkedValue={1}
          value={row.status}
          onUpdate:value={val => {
            row.status = val;
            fetchUpdateStatus(row.id, row.status);
          }}
        ></NSwitch>
      );
    }
  },

  {
    key: 'coverImg',
    title: '活动封面',
    align: 'center',
    width: 100,
    render: (row: any) => {
      return <NImage src={row.coverImg} class={'h90px w90px'}></NImage>;
    }
  },
  {
    key: 'priceChannelId',
    title: '价格体系',
    align: 'center',
    width: 100
  },
  {
    key: 'faceAmount',
    title: '面额（元）',
    align: 'center',
    width: 100
  },
  {
    key: 'stock',
    title: '库存',
    align: 'center',
    width: 100,
    render: row => {
      return <div>{row.stock == -1 ? '不限制' : row.stock}</div>;
    }
  },
  {
    key: 'settleAmount',
    title: '结算价（元）',
    align: 'center',
    width: 100
  },
  {
    key: 'useValidDays',
    title: '使用有效期',
    align: 'center',
    width: 100,
    render: row => {
      return <div>领取之日起{row.useValidDays}天有效</div>;
    }
  },
  {
    key: 'cancelRule',
    title: '取消规则',
    align: 'center',
    width: 100,
    render: row => {
      const cancelOptions = {
        IMMEDIATE: '立即生效',
        NEXT_MONTH: '次月生效'
      };
      return <div> {cancelOptions[row.cancelRule as keyof typeof cancelOptions]}</div>;
    }
  },

  {
    key: 'rightsDesc',
    title: '权益描述',
    align: 'center',
    width: 230,
    ellipsis: {
      lineClamp: 2, // 最多显示2行
      tooltip: {
        // 控制 tooltip 样式/宽高
        contentStyle: {
          maxWidth: '300px' // tooltip 最大宽度
        },
        scrollable: true // 内容过长可滚动
      }
    }
  }
];

const [registerTable, { refresh }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '会员名称',
        component: 'NInput',
        field: 'memberName'
      },
      {
        label: '开放渠道',
        component: 'dictSelect',
        field: 'openChannel',
        componentProps: {
          dictCode: 'open_channel',
          immediate: true
        }
      },
      {
        label: '状态',
        field: 'status',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '下架',
              value: 0
            },
            {
              label: '上架',
              value: 1
            }
          ]
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    opWdith: 160,
    keyField: 'skuId',
    title: '活动列表',
    showAddButton: true,
    scrollX: 1800,
    fieldMapToTime: [
      ['price', ['minPrice', 'maxPrice']],
      ['createTime', ['startTime', 'endTime']]
    ]
  }
});

function handleAdd() {
  router.push({
    path: '/member-center/edit-member-type'
  });
}
// function handleDetail(row: any) {
//   router.push({
//     path: '/member-center/edit-member-type',
//     query: {
//       id: row.id,
//       mode: 'detail'
//     }
//   });
// }
function handleEdit(row: any) {
  console.log('edit', row);
  router.push({
    path: '/member-center/edit-member-type',
    query: {
      id: row.id,
      mode: 'edit'
    }
  });
}

function handleDelete(row: any) {
  window.$dialog?.info({
    title: '提示',
    content: `你确定要删除吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const { error } = await fetchDelType(row.id as string);
      if (!error) {
        refresh();
      }
    }
  });
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchTypeList" @add="handleAdd" @register="registerTable">
      <template #op="{ row }">
        <NSpace>
          <NButton size="small" @click="handleEdit(row)">编辑</NButton>
          <NButton size="small" @click="handleDelete(row)">删除</NButton>
        </NSpace>
      </template>
    </ZTable>
  </LayoutTable>
</template>

<style scoped></style>
