<template>
  <div>
    <div style="display: flex;margin-bottom: 20px;">
      <a-input-search v-model:value="value" placeholder="请输入订单号" style="width: 200px" @search="onSearchOrd" />
    </div>

    <a-table :columns="columns" :data-source="list" @change="tableChange" :pagination="pagination"
      :scroll="{ y: 'calc(100vh - 300px)' }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'amount'">
          <div v-if="record.amount">
            <div>{{ record.amount / 100 }}</div>
          </div>

        </template>
        <template v-if="column.key === 'nickname'">
          <div v-if="record.nickname">
            <div>{{ record.nickname }}</div>
          </div>
          <div v-else>
            ~
          </div>
        </template>
        <template v-if="column.key === 'creator'">
          <div v-if="record.creator">
            <div>{{ record.creator }}</div>
          </div>
          <div v-else>
            ~
          </div>
        </template>
        <template v-if="column.key === 'headimgurl'">
          <div v-if="record.headimgurl">
            <a-image :width="50" :src="record.headimgurl" />
          </div>
          <div v-else>
            ~
          </div>
        </template>
        <template v-if="column.key === 'status'">
          <div v-if="record.status === 0" style="color: rgb(245, 108, 108);">
            未支付
          </div>
          <div v-else style="color: rgb(12, 191, 33);">
            已支付
          </div>
        </template>
        <template v-if="column.key === 'paytype'">
          <div v-if="record.paytype === 1">
            微信
          </div>
          <div v-else-if="record.paytype === 2">
            支付宝
          </div>
          <div v-else>
            未知
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, defineExpose } from 'vue';
import { onFindPayInfo, onFindPayOrderid } from '@/api/index'
import { getUid } from '@/utils/userInfo'
const columns = [
   {
    title: '订单号',
    dataIndex: 'merchantorderid',
    key: 'merchantorderid',
  },
  {
    title: '商品名',
    dataIndex: 'subject',
    key: 'subject',
  },
  {
    title: '金额(元)',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
      title: '订单时间',
      dataIndex: 'updatetime',
      key: 'updatetime',
    },
  {
      title: '头像',
      dataIndex: 'headimgurl',
      key: 'headimgurl',
    },
  {
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname',
  },
  {
    title: '手机号',
    dataIndex: 'creator',
    key: 'creator',
  },
  
  {
    title: '支付渠道',
    dataIndex: 'paytype',
    key: 'paytype',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  
  
];
let list = ref<any>([])
let value = ref<any>('')
const pagination = ref({
  current_page: 1,
  total: 0,
  defaultPageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['5', '10', '15', '20'],
})
const onSearch = async () => {
  // value.value  = '' 搜索会报错
  if (value.value !== '') {
    const uid = getUid()
    const prarms: any = {
      page: pagination.value.current_page,
      size: pagination.value.defaultPageSize,
      uid
    }
    const data: any = await onFindPayInfo(prarms)
    if (data.state === 1) {
      list.value = data.data.payorder
      pagination.value.total = data.data.count

    }
  } else {
    const uid = getUid()
    const prarms: any = {
      page: pagination.value.current_page,
      size: pagination.value.defaultPageSize,
      uid
    }
    const data: any = await onFindPayInfo(prarms)
    if (data.state === 1) {
      list.value = data.data.payorder
      pagination.value.total = data.data.count

    }
  }
}
const onSearchOrd = async () => {
  const uid = getUid()
  const prarms = {
    orderid: value.value,
    uid
  }
  const data: any = await onFindPayOrderid(prarms)
  if (data.state === 1) {
    list.value = [data.data]
    pagination.value.total = data.data.count

  }
}
const tableChange = async (e: any) => {
  const uid = getUid()
  const prarms: any = {
    page: e.current,
    size: e.pageSize,
    uid
  }
  const data: any = await onFindPayInfo(prarms)
  if (data.state === 1) {
    list.value = data.data.payorder
    pagination.value.total = data.data.count
  }
}
onMounted(async () => {
  onSearch()
})
defineExpose({
  columns,
  pagination,
  tableChange
})
</script>