<script setup>
import LiveProductCategory from '@/components/LiveProductCategory.vue'
import { getOrderList } from '../api'

const appList = ref(null)
// 刷新
const handleRefresh = () => {
  appList.value?.refetch()
}
const listParams = reactive({ name: '', live_commodity_type_id: '', live_commodity_title: '' })

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getOrderList,
      params: listParams,
      beforeRequest(params, isReset) {
        if (isReset) listParams.live_commodity_type_id = ''
        params.live_commodity_type_id = listParams.live_commodity_type_id
        return params
      },
    },
    filters: [
      { label: '直播主题品类', prop: 'live_commodity_type_id', slots: 'filter-category' },
      { label: '直播主题名称', prop: 'live_commodity_title', type: 'input' },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '主播', prop: 'updated_operator_name' },
      {
        label: '商品信息',
        prop: 'commodity_info',
        computed({ row }) {
          try {
            const info = JSON.parse(row.commodity_info)
            const [picture] = JSON.parse(info.picture_addreses) || []
            return `<div style="display: flex; align-items: center; gap: 10px;"><img src="${picture.url}" width="100" />${info.title}</div>`
          } catch (e) {
            console.log(e)
          }
          return '--'
        },
      },
      {
        label: '单价/数量',
        prop: 'num',
        computed({ row }) {
          return `￥${row.price}<br/>x${row.num}`
        },
      },
      { label: '订单编号', prop: 'id' },
      {
        label: '订单状态',
        prop: 'status',
        computed() {
          return '待发货'
        },
      },
      { label: '下单时间', prop: 'updated_time' },
    ],
  }
})
</script>

<template>
  <AppCard title="订单管理">
    <AppList v-bind="listOptions" ref="appList">
      <template #filter-category>
        <LiveProductCategory v-model="listParams.live_commodity_type_id" @change="handleRefresh"></LiveProductCategory>
      </template>
    </AppList>
  </AppCard>
</template>
