<template>
  <CommonPage show-footer :title="$route.title">
    <n-row gutter="12">
      <n-col :span="24">
        <div flex>
          <n-card w-500 rounded-5 style="background-color: #5579e9">
            <n-statistic label="交易金额（元）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.payments" :precision="2" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500 rounded-5 style="background-color: #e74f5b">
            <n-statistic label="订单数量（条）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.count" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500 rounded-5 style="background-color: #00b4c3">
            <n-statistic label="赠送豆子（个）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.total_pulse" :precision="2" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500 rounded-5 style="background-color: #f1b301">
            <n-statistic label="挂帐（元）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.onAccount" :precision="2" />
            </n-statistic>
          </n-card>
          <n-card ml-10 w-500 rounded-5 style="background-color: #ffa940">
            <n-statistic label="抹零（元）" tabular-nums>
              <n-number-animation :from="0" :to="cardData.zero" :precision="2" />
            </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">
        <div mt-10 flex items-center>
          <div w-100>关键字搜索：</div>
          <n-input-group>
            <n-select
              v-model:value="queryData.selectKey"
              :style="{ width: '25rem' }"
              :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'
import { NEllipsis } from 'naive-ui'

const loading = ref(false)

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

const songs = ref([
  {
    value: 1,
    label: '未付款',
  },
  {
    value: 2,
    label: '已付款',
  },
  {
    value: 3,
    label: '挂帐中',
  },
])

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

const columns = ref([
  {
    title: '订单号',
    align: 'center',
    key: 'oid',
  },
  {
    title: '用户',
    align: 'center',
    slot: 'nickName',
    render: (row) => h('span', {}, { default: () => row.User.nickName }),
  },
  {
    title: '手机号',
    align: 'center',
    key: 'phone',
  },
  {
    title: '商品名称',
    align: 'center',
    slot: 'goods_name',
    render: (row) => {
      const el = []
      row.OrderGoods.forEach((item) => {
        el.push(
          h(
            NEllipsis,
            {
              style: 'max-width: 100px',
            },
            {
              default: () => `${item.Goods.name}|${item.pay_price}元|X${item.number}`,
            }
          )
        )
      })
      return el
    },
  },
  {
    title: '商品数量',
    align: 'center',
    key: 'count',
  },
  {
    title: '商品总价',
    align: 'center',
    key: 'payments',
  },
  {
    title: '实付金额',
    align: 'center',
    key: 'pay_amount',
  },
  {
    title: '抹零',
    align: 'center',
    key: 'zero',
  },
  {
    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', '挂帐中')
      }
    },
  },
  {
    title: '下单时间',
    align: 'center',
    key: 'add_time',
  },
  {
    title: '挂帐时间',
    align: 'center',
    key: 'on_account_time',
  },
  {
    title: '付款时间',
    align: 'center',
    key: 'payment_time',
  },
  // {
  //   title: '操作',
  //   align: 'center',
  //   slot: 'action',
  //   render() {
  //     // console.log(row)
  //   },
  // },
])

const data = ref([])

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

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,
      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['GoodName'] = 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
    }
    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.payments = res.data.payments
    cardData.value.onAccount = res.data.onAccount
    cardData.value.total_pulse = res.data.total_pulse
    cardData.value.count = res.data.total
  } catch (error) {
    $message.error(error.msg)
    throw error
  }
  loading.value = false
}

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

<style lang="scss" scoped>
:deep(.n-statistic__label) {
  color: #fff !important;
  font-size: 16px;
}
:deep(.n-statistic-value__content) {
  color: #fff !important;
  font-size: 16px;
}
</style>
