<template>
  <CommonPage show-footer :title="$route.title">
    <n-row gutter="12">
      <n-col :span="24">
        <div flex>
          <n-card w-500>
            <n-statistic label="订单流水（元）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.total" :precision="2" />
            </n-statistic>
          </n-card>
          <!-- <n-card ml-10 w-500>
            <n-statistic label="订单佣金（元）" tabular-nums>
              <n-number-animation :from="0" :to="Number(cardData.service)" :precision="2" />
            </n-statistic>
          </n-card> -->
          <n-card ml-10 w-500>
            <n-statistic label="订单数量" tabular-nums>
              <n-number-animation :from="0" :to="cardData.count" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500>
            <n-statistic label="赠送豆子" tabular-nums>
              <n-number-animation :from="0" :to="cardData.gift_pulse" />
            </n-statistic>
          </n-card>
        </div>
      </n-col>
      <n-col :span="24" mt-10>
        <div>
          <span>订单状态：</span>
          <n-radio-group v-model:value="queryData.status">
            <n-radio-button
              v-for="song in songs"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-col>
      <n-col :span="24" mt-10>
        <div>
          <span>支付方式：</span>
          <n-radio-group v-model:value="queryData.pay_type">
            <n-radio-button
              v-for="song in [
                {
                  label: '微信',
                  value: 1,
                },
                {
                  label: '积分',
                  value: 2,
                },
              ]"
              :key="song.value"
              :value="song.value"
              :label="song.label"
            />
          </n-radio-group>
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10 flex items-center>
          <div w-100>关键字搜索：</div>
          <n-input-group>
            <n-select
              v-model:value="queryData.selectKey"
              :style="{ width: '15%' }"
              :options="selectOptions"
              placeholder="请选择"
            />
            <n-input v-model:value="queryData.word" :style="{ width: '20%' }" />
          </n-input-group>
        </div>
      </n-col>
      <n-col :span="10">
        <div mt-10 flex items-center>
          <span w-100>订单时间：</span>
          <n-date-picker
            v-model:formatted-value="queryData.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            clearable
          />
        </div>
      </n-col>
      <n-col :span="24">
        <div mt-10>
          <n-button type="primary" @click="getList">搜索</n-button>
          <n-button ml-10 @click="clear">重置</n-button>
        </div>
      </n-col>
    </n-row>
    <n-data-table
      class="mt-5"
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      :scroll-x="1800"
      remote
    />
  </CommonPage>
</template>

<script setup>
import api from './api'

const loading = ref(false)

const queryData = ref({
  status: '',
  time: null,
  word: '',
  selectKey: null,
  pay_type: null,
})

const cardData = ref({
  total: 0,
  service: 0,
  count: 0,
  gift_pulse: 0,
})

const songs = ref([
  {
    value: 1,
    label: '待付款',
  },
  {
    value: 2,
    label: '待核销',
  },
  {
    value: 3,
    label: '已核销',
  },
  {
    value: 4,
    label: '已过期',
  },
  {
    value: 5,
    label: '已销售',
  },
])

const selectOptions = ref([
  {
    value: 0,
    label: '商品名称',
  },
  {
    value: 1,
    label: '用户昵称',
  },
  {
    value: 2,
    label: '手机号',
  },
  {
    value: 3,
    label: '订单号',
  },
  {
    value: 4,
    label: '商家名称',
  },
])

const columns = ref([
  {
    title: '订单号',
    align: 'center',
    key: 'oid',
    width: 200,
    fixed: 'left',
  },
  {
    title: '用户',
    align: 'center',
    slot: 'user',
    render: (row) => {
      return [
        h(
          'div',
          {},
          {
            default: () => row.User.nickName,
          }
        ),
      ]
    },
  },
  {
    title: '用户电话',
    align: 'center',
    slot: 'phone',
    render: (row) => {
      return [
        h(
          'div',
          {},
          {
            default: () => row.User.phone,
          }
        ),
      ]
    },
  },
  {
    title: '商品名称',
    align: 'center',
    slot: 'goods_name',
    render: (row) => {
      const el = []
      row.OrderGoods.forEach((item) => {
        el.push(
          h(
            'div',
            {},
            {
              default: () =>
                `${item.Goods.name}|${item.pay_price}元或${item.pay_integral}积分|X${item.number}`,
            }
          )
        )
      })
      return el
    },
  },
  {
    title: '商品数量',
    align: 'center',
    key: 'count',
  },
  {
    title: '订单总价',
    align: 'center',
    slot: 'number',
    render: (row) => h('span', row.pay_type === 1 ? `${row.price}元` : `${row.exchange}积分`),
  },
  {
    title: '支付方式',
    align: 'center',
    slot: 'pay_type',
    render: (row) => h('span', row.pay_type === 1 ? '微信' : '积分'),
  },
  {
    title: '商家名称',
    align: 'center',
    slot: 'store_name',
    render: (row) => h('span', row.Store.name),
  },
  // {
  //   title: '订单佣金(元)',
  //   align: 'center',
  //   key: 'commission_number',
  // },
  {
    title: '订单状态',
    align: 'center',
    slot: 'status',
    render(row) {
      switch (row.status) {
        case 0:
          return h('span', '待付款')
        case 1:
          return h('span', '待核销')
        case 2:
          return h('span', '已核销')
        case 3:
          return h('span', '已过期')
      }
    },
  },
  {
    title: '下单时间',
    align: 'center',
    key: 'add_time',
  },
  {
    title: '核销时间',
    align: 'center',
    key: 'cancel_time',
  },
  {
    title: '操作',
    align: 'center',
    slot: 'action',
    render() {
      // console.log(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()
})

const getList = async () => {
  loading.value = true
  try {
    const query_data = {
      Status: queryData.value.status,
      PayType: queryData.value.pay_type || '',
      StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
      EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
    }
    switch (queryData.value.selectKey) {
      case 0:
        query_data['GoodsName'] = queryData.value.word
        break
      case 1:
        query_data['UserName'] = queryData.value.word
        break
      case 2:
        query_data['Phone'] = queryData.value.word
        break
      case 3:
        query_data['Oid'] = queryData.value.word
        break
      case 4:
        query_data['StoreName'] = queryData.value.word
    }
    const res = await api.getOrder({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
      ...query_data,
    })
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
    cardData.value.total = res.data.number
    cardData.value.service = res.data.commission
    cardData.value.count = res.data.total
    cardData.value.gift_pulse = res.data.gift_pulse
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}

const clear = () => {
  queryData.value = {
    status: '',
    time: null,
    word: '',
    selectKey: null,
    pay_type: null,
  }
  getList()
}
</script>

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