<template>
  <div class="page">
    <BaseTableHeader title="我的订单" :show-search="true" @reset="reset" @search="search">
      <template #searchFormSlot>
        <a-form layout="vertical" class="grid grid-cols-3 gap-col-100">
          <a-form-item label="所属品牌">
            <a-select placeholder="请选择" v-model:value="searchParams.brandId" size="large" allowClear>
              <a-select-option :value="item.id" v-for="item in brandList" :key="item.id">{{ item.brandName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="订单状态">
            <a-select placeholder="请选择" v-model:value="searchParams.state" size="large" allowClear>
              <a-select-option :value="item.value" v-for="item in commonStore.dict[DICT_CODE.ORDER_STATUS]" :key="item.value">{{
                item.text
              }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="下单时间">
            <BaseRangePicker v-model:start="searchParams.startTime" v-model:end="searchParams.endTime" size="large" class="w-full"></BaseRangePicker>
          </a-form-item>
        </a-form>
      </template>
    </BaseTableHeader>

    <div class="p-30 bg-white mt-10">
      <a-table
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="list"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, value, record }">
          <template v-if="column.dataIndex === 'state'">
            {{ enumsMap(value, commonStore.dict[DICT_CODE.ORDER_STATUS]) }}
          </template>
          <template v-if="column.dataIndex === 'price'">
            {{ toUSD(value) }}
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <router-link class="c-primary" :to="{ path: '/order/detail', query: { id: record.id, supplierId: record.supplierId } }">详情</router-link>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { computed } from 'vue'
import type { TableProps } from 'ant-design-vue'
import type { ProductSearchParams, BaseSearch } from 'Types/api'
import { apiOrderList } from '@/api/order'
import { apiBrandList } from '@/api/brand'
import { usePagination } from 'vue-request'
import { toUSD, enumsMap } from '@/utils'
import useCommonStore from '@/store/modules/common'
import { DICT_CODE } from '@/utils/const'
import type { BrandItem } from 'Types/api'
const commonStore = useCommonStore()
commonStore.getDict(DICT_CODE.ORDER_STATUS)
// console.log('order status',orderStatus)
const searchParams = reactive<BaseSearch>({
  brandId: '',
  state: '',
  startTime: '',
  endTime: '',
})
const columns = [
  {
    title: '意向订单ID',
    dataIndex: 'id',
  },
  {
    title: '客户名称',
    dataIndex: 'customerName',
  },
  {
    title: '所属品牌',
    dataIndex: 'brandName',
  },
  {
    title: '订单状态',
    dataIndex: 'state',
  },
  {
    title: '销售总价',
    dataIndex: 'price',
  },
  {
    title: '下单时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
]
const brandList = ref<Array<BrandItem>>()
onMounted(() => {
  apiBrandList({ pageNo: 1, pageSize: 9999 }).then((res) => {
    // console.log(res.data.result.records)
    brandList.value = res.data.result.records
  })
})

const { data, run, loading, current, pageSize } = usePagination(apiOrderList, {
  // formatResult: res => res.data.data,
  defaultParams: [searchParams],

  pagination: {
    currentKey: 'pageNo',
    pageSizeKey: 'pageSize',
  },
})

const pagination = computed(() => ({
  total: data.value?.data.result.total || 0,
  current: current.value,
  pageSize: pageSize.value,
}))

const list = computed(() => {
  return data.value?.data.result.records || []
})

const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number }) => {
  run({
    pageSize: pag.pageSize,
    pageNo: pag.current,
    ...searchParams,
  })
}

const search = () => {
  console.log(searchParams)
  run({
    pageNo: 1,
    pageSize: pagination.value.pageSize,
    ...searchParams,
  })
}

const reset = () => {
  Object.keys(searchParams).forEach((key) => {
    searchParams[key] = ''
  })
  run({
    pageNo: 1,
    pageSize: pagination.value.pageSize,
    ...searchParams,
  })
}
</script>
<style scoped></style>

