<script lang="ts" setup>
/**
 * @Name: DataTable.vue
 * @Description: 历史详情Table
 * @Author: Cheney
 */

import * as api from '../api';
import { HistoricalColumns } from '/@/views/product-manage/Columns';
import { usePagination } from '/@/utils/usePagination';
import { useTableData } from '/@/utils/useTableData';
import ChangeValue from './ChangeValue.vue';


const props = defineProps({
  asin: String,
  country: String
});
const { asin, country } = props;

const { tableOptions, handlePageChange } = usePagination(fetchList);

const gridRef = ref();
const gridOptions: any = reactive({
  id: 'historical-detail-table',
  keepSource: true,
  size: 'small',
  border: false,
  round: true,
  stripe: true,
  currentRowHighLight: true,
  height: 800,
  customConfig: {
    storage: true
  },
  rowConfig: {
    isHover: true
  },
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    total: tableOptions.value.total,
    page: tableOptions.value.page,
    limit: tableOptions.value.limit
  },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...'
  },
  columns: '',
  data: ''
});

const tagMap: any = {
  price: { label: '价格', color: 'primary' },
  discount: { label: '折扣', color: 'primary' },
  coupon: { label: '优惠券', color: 'primary' },
  imgs: { label: '图片', color: 'warning' },
  title: { label: '标题', color: 'warning' },
  bullet_point: { label: '五点信息', color: 'warning' },
  all_score: { label: '综合评分', color: 'warning' },
  badge: { label: '限时处理', color: 'danger' },
  variants: { label: '变体', color: 'danger' },
  score: { label: '子asin评分', color: 'success' },
  reviews: { label: '子asin评论数', color: 'success' }
};

onMounted(() => {
  setTimeout(() => {
    
  fetchList();
  }, 300)
})

async function fetchList() {
  gridOptions.data = [];
  gridOptions.columns = [];

  const query = {
    asin,
    country_code: country
  };

  await useTableData(api.getTableData, query, gridOptions);
  if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(HistoricalColumns);
  gridOptions.showHeader = Boolean(gridOptions.data?.length);
}
</script>

<template>
  <el-card class="border-none my-5">
    <vxe-grid ref="gridRef"
              v-bind="gridOptions">
      <template #top>
        <div class="mb-2"></div>
      </template>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <!-- 分页 -->
      <template #pager>
        <vxe-pager
            v-model:currentPage="gridOptions.pagerConfig.page"
            v-model:pageSize="gridOptions.pagerConfig.limit"
            :total="gridOptions.pagerConfig.total"
            class="mt-1.5"
            @page-change="handlePageChange"
        />
      </template>
      <!-- 自定义列插槽 -->
      <template #create_datetime="{row}">
        {{ row.create_datetime || '--' }}
      </template>
      <template #field="{ row }">
        <el-tag v-if="tagMap[row.field]" :type="tagMap[row.field].color" effect="plain">
          {{ tagMap[row.field].label }}
        </el-tag>
      </template>
      <template #old_val="{row}">
        <ChangeValue :field="row.field" :value="row.old_val" />
      </template>
      <template #new_val="{row}">
        <ChangeValue :field="row.field" :value="row.new_val" />
      </template>
    </vxe-grid>
  </el-card>

</template>

<style scoped>
.toolbar-btn {
  width: 34px;
  height: 34px;
  font-size: 18px
}

</style>
