<template>
  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
    <div class="flex justify-between">
      <div class="flex space-x-4">
        <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
        <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
      </div>
    </div>
    <div class="h-full border-0 border-t-1 border-solid border-gray-300 pt-4">
      <a-spin :spinning="loading" :indicator="indicator">
        <a-table :dataSource="data.list" :columns="columns" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <a v-if="record.name !== '' " :href="record.link" target="_blank">{{record.name}}</a>
              <span v-else>正在抓取信息</span>
            </template>
            <template v-else-if="column.key === 'updatedAt'">
              <span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
            <template v-else-if="column.key === 'image'">
              <a-image
                  :width="100"
                  :src="record.image"
              />
            </template>
            <template v-else-if="column.key === 'cnyPrice'">
              <a-popover >
                <template #content>
                  <div class="whitespace-pre">{{record.calMark}}</div>
                </template>
                <span class="cursor-pointer">{{parseFloat(record.cnyPrice).toFixed(2)}}</span>
              </a-popover>
            </template>
          </template>
        </a-table>
      </a-spin>
    </div>
    <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" :total="data.total" show-less-items @change="list"/>
  </div>
</template>
<script setup>

import {h, onMounted, reactive, ref} from "vue";
import {ListProducts} from "@/api/product.js";
import moment from "moment/moment.js";
import {LoadingOutlined} from "@ant-design/icons-vue";

onMounted(()=>{
  list()
})
const query = reactive({
  page: 1,
  size:6
})

const loading = ref(false)

const data = ref({
  total: 0,
  list:[]
})

const list = ()=>{
  loading.value = true
  ListProducts(query).then(res=>{
    data.value = res
  }).catch(err => {
    console.log(err)
  }).finally(()=>{
    loading.value = false
  })
}

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width:300,
  },
  {
    title: '货号',
    dataIndex: 'pid',
    key: 'pid',
  },
  {
    title: '图片',
    dataIndex: 'image',
    key: 'image',
  },
  {
    title: '价格(美元)',
    dataIndex: 'usPrice',
    key: 'usPrice',
  },
  {
    title: '成本(CNY)',
    dataIndex: 'cnyPrice',
    key: 'cnyPrice',
  },
  {
    title: '得物(CNY)',
    dataIndex: 'dwPrice',
    key: 'dwPrice',
  },
  {
    title: '收益率',
    dataIndex: 'rate',
    key: 'rate',
  },
  {
    title: '抓取时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
  },
  // {
  //   title: '操作',
  //   key: 'opt',
  // },
]

const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '32px',
  },
  spin: true,
});

</script>



<style scoped>

</style>