<script setup lang="tsx">
import { NButton, NImage, NSwitch } from 'naive-ui';
// import dayjs from 'dayjs';
import { router } from '@/router';
import { fetchGetStoreList } from '@/service/api/xsb-manage/store-info';
import {
  // fetchGetAllChannelList,
  fetchDelGoods,
  fetchProductList
} from '@/service/api/goods-center/health-goods';
import { useTable } from '@/components/zt/Table/hooks/useTable';

// const TypeName = ['企业用户', 'B端用户', 'C端用户'];
// const statusList = ['上架', '下架'];
const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'shopName',
    title: '门店名称',
    align: 'center',
    width: 100
  },
  {
    key: 'productNumber',
    title: '商品封面',
    align: 'center',
    width: 120,
    render: (row: any) => {
      return <NImage src={row.goodsImg} class={'h90px w90px'}></NImage>;
    }
  },
  {
    key: 'goodsName',
    title: '商品名称',
    align: 'center',
    width: 100,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'goodsCode',
    title: '商品编码',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'effectiveTime',
    title: '有效期',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    },
    render: (row: any) => {
      return `购买后${row.effectiveTime}天有效`;
    }
  },
  {
    key: 'price',
    title: '价格',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },

  {
    key: 'sales',
    title: '销量',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'shelfStatus',
    title: '状态',
    align: 'center',
    width: 120,
    render: (row: any) => {
      return <NSwitch uncheckedValue={0} checkedValue={1} value={row.status} disabled></NSwitch>;
    }
  }
];

const [registerTable, { refresh }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '门店名称',
        component: 'ApiSelect',
        field: 'shopId',
        componentProps: {
          api: fetchGetStoreList,
          resultFeild: 'data.list',
          labelFeild: 'shopName',
          valueFeild: 'shopId'
        }
      },
      {
        label: '商品名称',
        component: 'NInput',
        field: 'goodsName'
      },
      {
        label: '商品编码',
        component: 'NInput',
        field: 'goodsCode'
      },

      // {
      //   label: '业务类型',
      //   field: 'channelCode',
      //   component: 'ApiSelect',
      //   componentProps: {
      //     api: fetchGetDictDataList,
      //     labelFeild: 'name',
      //     valueFeild: 'value',
      //     resultFeild: 'data.list',
      //     params: {
      //       typeCode: 'sys_business_type'
      //     }
      //   }
      // },
      {
        label: '状态',
        field: 'productStatus',
        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: '/goods-center/edit-health-goods'
  });
}
function handleDetail(row: any) {
  router.push({
    path: '/goods-center/edit-health-goods',
    query: {
      id: row.id,
      mode: 'detail'
    }
  });
}
function handleEdit(row: any) {
  console.log('edit', row);
  router.push({
    path: '/goods-center/edit-health-goods',
    query: {
      id: row.id,
      mode: 'edit'
    }
  });
}

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

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

<style scoped></style>
