<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { objectClean } from '@/utils';
import { fetchQueryChannelList, fetchQueryVipOrderList } from '@/service/api';
import { Icon } from '@iconify/vue';
import {PAGINATION_PAGE_SIZES} from '@/const/index'

const orderStatusOptions = [
  { label: '待支付', value: '00' },
  { label: '支付中', value: '01' },
  { label: '支付完成', value: '02' },
  // { label: '充值中', value: '03' },
  { label: '订单完成', value: '04' },
  { label: '已关闭', value: '05' }
]
// 应用类型 01:h5 02:公众号 3:微信小程序 04:支付宝-h5 05:支付宝小程序	
const appTypeOptions = [
  { label: 'h5', value: '01' },
  { label: '公众号', value: '02' },
  { label: '微信小程序', value: '03' },
  { label: '支付宝-h5', value: '04' },
  { label: '支付宝小程序', value: '05' },
]
const channelOptions = ref([])

async function getChannelList() {
  const res = await fetchQueryChannelList({
    pageNum: 1,
    pageSize: 100
  })
  console.log(res)
  if(res.data) {
    channelOptions.value = res.data?.data?.records || []
  }
}


const pagination = ref({
  pageSize: 10,
  itemCount: 0,
  pageNum: 1
});
function handlePageUpdate(page: number) {
  pagination.value.pageNum = page;
  getListData();
}
function handlePageSizeUpdate(pageSize: number) {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = pageSize;
  getListData();
}

function createQueryParams() {
  return {
    orderId: '',
    mobile: '',
    createTime: null,
    startCreateTime: '',
    endCreateTime: '',
    orderStatus: null,
    appType: null,
    channelCode: null
  };
}

/** 检索 */
function handleQuery() {
  getListData();
}
/** 重置检索 */
function handleResetQuery() {
  queryParams.value = { ...createQueryParams() };
  getListData();
}

const listData = ref([]);

const queryParams = ref(createQueryParams());

const loading = ref(false);

async function getListData() {
  loading.value = true;
  const { pageNum, pageSize } = pagination.value;
  const { orderId, mobile, createTime, orderStatus, appType, channelCode } = queryParams.value;

  const params = {
    orderId,
    mobile,
    orderStatus,
    appType,
    channelCode,
    startCreateTime: createTime ? `${createTime[0]} 00:00:00` : '',
    endCreateTime: createTime ? `${createTime[1]} 23:59:59` : '',
    pageNum,
    pageSize
  };
  const { data } = await fetchQueryVipOrderList(objectClean(params));
  if (data?.ok) {
    listData.value = data.data.records;
    pagination.value.itemCount = data.data.total;
  }
  loading.value = false;
}

const showModal = ref(false)
const currentRow = ref<any>({})
function handleShowModal(row: any, type: string) {
  showModal.value = true
  currentRow.value = row
}

function filterOrderStatus(value: string) {
  const item = orderStatusOptions.find((item) => item.value === value);
  return item ? item.label : '';
}
function filterAppType(value: string) {
  const item = appTypeOptions.find((item) => item.value === value);
  return item ? item.label : '';
}

onMounted(() => {
  getListData();
  getChannelList()
});
</script>

<template>
  <div>
    <n-card class="h-full shadow-sm rounded-8px">
      <n-grid cols="1 s:2 m:3 l:4 xl:5 2xl:6" responsive="screen" x-gap="12" y-gap="12">
          <n-grid-item>
            <p class="mb-6px">订单编号：</p>
            <n-input clearable v-model:value="queryParams.orderId" placeholder="订单编号"></n-input>
          </n-grid-item>
          <n-grid-item>
            <p class="mb-6px">订单状态：</p>
            <n-select v-model:value="queryParams.orderStatus" clearable placeholder="订单状态" :options="orderStatusOptions" />
          </n-grid-item>
          <n-grid-item>
            <p class="mb-6px">下单平台：</p>
            <n-select v-model:value="queryParams.appType" clearable placeholder="下单平台" :options="appTypeOptions" />
          </n-grid-item>
          <n-grid-item>
            <p class="mb-6px">渠道来源：</p>
            <n-select 
              label-field="channelName"
              value-field="channelCode"
              v-model:value="queryParams.channelCode" clearable placeholder="渠道来源" :options="channelOptions" />
          </n-grid-item>
          <n-grid-item>
            <p class="mb-6px">手机号：</p>
            <n-input clearable v-model:value="queryParams.mobile" placeholder="手机号"></n-input>
          </n-grid-item>
          <n-grid-item>
            <p class="mb-6px">创建时间：</p>
            <n-date-picker
              v-model:formatted-value="queryParams.createTime"
              :actions="[]"
              close-on-select
              value-format="yyyy-MM-dd"
              placeholder="创建时间"
              type="daterange"
              start-placeholder="开始"
              end-placeholder="结束"
              clearable
            />
          </n-grid-item>
          <n-grid-item class="flex items-end">
            <n-space>
              <n-button secondary strong type="primary" @click="handleQuery"> 查 询 </n-button>
              <n-button secondary strong @click="handleResetQuery">重 置</n-button>
            </n-space>
          </n-grid-item>
        </n-grid>
    </n-card>
    
    <n-card class="shadow-sm rounded-8px mt-12px">
      <n-spin :show="loading">
        <vxe-table
          :column-config="{ resizable: true }"
          :seq-config="{ startIndex: (pagination.pageNum - 1) * pagination.pageSize }"
          auto-resize
          :row-config="{ isHover: true }"
          stripe
          border
          :data="listData"
        >
        <vxe-column type="seq" title="序号" width="60"></vxe-column>
        <vxe-column min-width="200" field="orderId" title="订单编号"></vxe-column>
        <vxe-column min-width="120" field="mobile" title="手机号"></vxe-column>
        <vxe-column min-width="120" field="realPrice" title="订单金额">
          <template #default="{row}">
            ￥{{ row.realPrice }}
          </template>
        </vxe-column>
        <vxe-column min-width="120" field="productName" title="会员期限"></vxe-column>
        <vxe-column min-width="200" field="vipEndTime" title="会员到期时间"></vxe-column>
        <vxe-column min-width="120" field="orderStatus" title="订单状态">
          <template #default="{row}">
            <n-tag round :bordered="false" type="warning" v-if="row.orderStatus === '00'">
              {{ filterOrderStatus(row.orderStatus) }}
            </n-tag>
            <n-tag round :bordered="false" type="success" v-else-if="row.orderStatus === '03'">
              {{ filterOrderStatus(row.orderStatus) }}
            </n-tag>
            <n-tag round :bordered="false" v-else-if="row.orderStatus === '04'">
              {{ filterOrderStatus(row.orderStatus) }}
            </n-tag>
            <span v-else>{{ filterOrderStatus(row.orderStatus) }}</span>
          </template>
        </vxe-column>
        <vxe-column min-width="200" field="createTime" title="订单创建时间"></vxe-column>
        <vxe-column min-width="200" field="channelName" title="渠道来源"></vxe-column>
        <vxe-column min-width="200" field="appType" title="下单平台">
          <template #default="{row}">
            <span>{{ filterAppType(row.appType || '') }}</span>
          </template>
        </vxe-column>
        <vxe-column field="title" title="操作" fixed="right" min-width="80">
          <template #default="{ row }">
            <n-space>
              <n-button
                  strong
                  text
                  type="info"
                  @click="handleShowModal(row, 'view')"
                  >详情</n-button
                >
            </n-space>
          </template>
        </vxe-column>
        <template #empty>
          <icon-custom-empty-data class="text-320px text-primary" />
        </template>
      </vxe-table>
      </n-spin>
      <div v-if="pagination.itemCount !== 0" class="w-full flex justify-end mt-4">
        <n-pagination
          v-model:page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :item-count="pagination.itemCount"
          :page-sizes="PAGINATION_PAGE_SIZES"
          :on-update:page="handlePageUpdate"
          :on-update:page-size="handlePageSizeUpdate"
          show-size-picker
        >
        <template #prefix="{ itemCount, startIndex }">
          <div class="text-[#333]">共 <span class="text-primary">{{ pagination.itemCount }}</span> 条</div>
        </template>
      </n-pagination>
      </div>
    </n-card>

    <n-modal v-model:show="showModal" :mask-closable="false" :bordered="false">
      <n-card title="订单详情" class="w-600px rounded-8px shadow-sm">
        <template #header-extra>
          <Icon icon="ic:sharp-close" class="text-size-22px cursor-pointer" @click="showModal = false" />
        </template>
        <div>
          <n-descriptions label-style="min-width: 120px" size="small" :column="1" bordered label-placement="left">
            <n-descriptions-item label="订单状态">
              <n-tag round :bordered="false" type="warning" v-if="currentRow?.orderStatus === '00'">
                {{ filterOrderStatus(currentRow?.orderStatus) }}
              </n-tag>
              <n-tag round :bordered="false" type="success" v-else-if="currentRow?.orderStatus === '03'">
                {{ filterOrderStatus(currentRow?.orderStatus) }}
              </n-tag>
              <n-tag round :bordered="false" v-else-if="currentRow?.orderStatus === '04'">
                {{ filterOrderStatus(currentRow?.orderStatus) }}
              </n-tag>
              <span v-else>{{ filterOrderStatus(currentRow?.orderStatus) }}</span>
            </n-descriptions-item>
            <n-descriptions-item label="订单编号">
              {{ currentRow?.orderId }}
            </n-descriptions-item>
            <n-descriptions-item label="订单创建时间" >
              {{ currentRow?.createTime }}
            </n-descriptions-item>
            <n-descriptions-item label="手机号">
              {{ currentRow?.mobile }}
            </n-descriptions-item>
            <n-descriptions-item label="订单原始价格">
              ￥ {{ currentRow?.originalPrice }}
            </n-descriptions-item>
            <n-descriptions-item label="订单支付金额">
              ￥ {{ currentRow?.realPrice }}
            </n-descriptions-item>
            <n-descriptions-item label="订单支付时间">
              {{ currentRow?.payEndTime || '-' }}
            </n-descriptions-item>
            <n-descriptions-item label="支付方式">
              <span v-if="currentRow?.payMethod === '01'">微信小程序支付</span>
              <span v-if="currentRow?.payMethod === '02'">支付宝H5支付</span>
              <span v-if="currentRow?.payMethod === '03'">支付宝小程序支付</span>
            </n-descriptions-item>
            <n-descriptions-item label="会员期限">
              {{ currentRow?.productName }}
            </n-descriptions-item>
            <n-descriptions-item label="会员到期时间">
              {{ currentRow?.vipEndTime || '-' }}
            </n-descriptions-item>
            <n-descriptions-item label="渠道来源">
              {{ currentRow?.channelName || '-' }}
            </n-descriptions-item>
            <n-descriptions-item label="下单平台">
              <span>{{ filterAppType(currentRow.appType || '-') }}</span>
            </n-descriptions-item>
          </n-descriptions>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>
