<script setup lang="tsx">
import { useRouter } from 'vue-router';
import { NButton, NSwitch } from 'naive-ui';
// import dayjs from 'dayjs';
import { fetchChannelList, fetchDelChannel } from '@/service/api/h5-manage/channel-manage';
import { useTable } from '@/components/zt/Table/hooks/useTable';
const router = useRouter();

const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'accessId',
    title: '渠道ID',
    align: 'center',
    width: 100
  },
  {
    key: 'accessName',
    title: '渠道名称',
    align: 'center',
    width: 100
  },
  {
    key: 'tenantCode',
    title: '租户编号',
    align: 'center',
    width: 100
  },
  {
    key: 'payOwnership',
    title: '支付归属',
    align: 'center',
    width: 100,
    render: row => {
      return row.payOwnership === 1 ? '平台支付' : '第三方支付';
    }
  },
  {
    key: 'status',
    title: '状态',
    align: 'center',
    width: 100,
    render: row => {
      return <NSwitch uncheckedValue={0} checkedValue={1} value={row.status} disabled={true}></NSwitch>;
    }
  },

  {
    key: 'themeMainColor',
    title: '主题样式',
    align: 'center',
    width: 100,
    render: (row: any) => {
      return (
        <div>
          <div>主色：{row.themeMainColor}</div>
          <div>辅色：{row.themeSubColor}</div>
        </div>
      );
    }
  },
  {
    key: 'updateTime',
    title: '更新时间',
    align: 'center',
    width: 100
  }
];

const [registerTable, { refresh }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '渠道名称',
        component: 'NInput',
        field: 'accessName'
      },
      // {
      //   label: '开放渠道',
      //   component: 'dictSelect',
      //   field: 'openChannel',
      //   componentProps: {
      //     dictCode: 'open_channel',
      //     immediate: true
      //   }
      // },
      {
        label: '状态',
        field: 'status',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '禁用',
              value: 0
            },
            {
              label: '启用',
              value: 1
            }
          ]
        }
      },
      {
        label: '支付归属',
        field: 'payOwnership',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '平台支付',
              value: 1
            },
            {
              label: '第三方支付',
              value: 2
            }
          ]
        }
      }
    ],
    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: '/h5-manage/edit-channel'
  });
}
function handleDetail(row: any) {
  router.push({
    path: '/h5-manage/edit-channel',
    query: {
      id: row.id,
      mode: 'detail'
    }
  });
}
function handleEdit(row: any) {
  console.log('edit', row);
  router.push({
    path: '/h5-manage/edit-channel',
    query: {
      id: row.id,
      mode: 'edit'
    }
  });
}

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

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

<style scoped></style>
