<template>
  <CommonPage show-footer :title="$route.title">
    <n-button type="primary" @click="addGood(1)">添加商品</n-button>
    <n-data-table
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
    />
  </CommonPage>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { NButton, NEllipsis, NImage, NSwitch } from 'naive-ui'
import api from './api'
import api1 from '../add/api'
import { useGoodsStore } from '@/store/modules/goods'

const loading = ref(false)

const columns = ref([
  {
    title: 'ID',
    align: 'center',
    key: 'ID',
  },
  {
    title: '封面',
    align: 'center',
    slot: 'cover',
    render(row) {
      return h(NImage, {
        width: '50',
        src: row.cover,
      })
    },
  },
  {
    title: '商品分类',
    align: 'center',
    slot: 'class_id',
    render(row) {
      const data = optList.value.filter((item) => item.ID === row.goods_class_id)
      return h('span', data[0]?.name)
    },
  },
  {
    title: '商品名称',
    align: 'center',
    slot: 'name',
    render(row) {
      return h(
        NEllipsis,
        {
          class: 'w-300',
        },
        { default: () => row.name }
      )
    },
  },
  {
    title: '商品价格',
    align: 'center',
    key: 'number',
  },
  {
    title: '商品库存',
    align: 'center',
    key: 'stock',
  },
  {
    title: '审核状态',
    align: 'center',
    slot: 'status',
    render(row) {
      return h('span', row.status === 1 ? '已审核' : row.status === 2 ? '已拒绝' : '待审核')
    },
  },
  {
    title: '是否上架',
    align: 'center',
    slot: 'state',
    render(row) {
      return [
        h(NSwitch, {
          checkedValue: 1,
          uncheckedValue: 2,
          value: row.state,
          onUpdateValue: async (val) => {
            await api1.addGoods({
              ...row,
              state: val,
            })
            getList()
          },
        }),
      ]
    },
  },
  {
    title: '备注',
    key: 'notes',
    align: 'center',
  },
  {
    title: '操作',
    align: 'center',
    slot: 'action',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'primary',
            size: 'small',
            onClick: () => toEdit(row),
          },
          () => '编辑'
        ),
      ]
    },
  },
])

const data = ref([])

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    getList()
  },
})

onMounted(() => {
  getList()
  getclasslist()
})

const optList = ref([])

const getclasslist = async () => {
  const res = await api.getGoodClass()
  optList.value = res.data.data
}

const getList = async () => {
  loading.value = true
  try {
    const res = await api.getGoods({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
    })
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}
const route = useRouter()
const { setRow, setType } = useGoodsStore()

const addGood = (type) => {
  setType(type === 1 ? 'add' : 'edit')
  route.push({
    path: '/goods/goods_add',
  })
}

const toEdit = (item) => {
  setRow(item)
  addGood()
}
</script>

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