<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>
  </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: 'subject',
    key: 'subject',
  },
   {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
  },

  {
    title: '订单号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
    key: 'nickname',
  },
  {
    title: '手机号',
    dataIndex: 'creator',
    key: 'creator',
  },
  {
    title: '头像',
    dataIndex: 'headimgurl',
    key: 'headimgurl',
  },
   {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '订单时间',
    dataIndex: 'updatetime',
    key: 'updatetime',
  },
];
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>