7 (100%)    → 綠色
0 (0%)      → 紅色
5 (50%)     → 橙色

columns: [
  {
    title: '安裝包列表數(shù)',
    dataIndex: 'appListCount',
    scopedSlots: { customRender: 'percentage' } // 使用自定義 slot
  }
]

methods: {
  getPercentageColor(value) {
    if (value.includes('(100%)')) return 'green';
    if (value.includes('(0%)')) return 'red';
    return 'orange';
  }
}

getPercentageColor(value) {
  if (typeof value !== 'string') return 'orange'; // 非字符串默認(rèn)橙色
  
  // 使用正則匹配，兼容可能的空格或格式變化
  if (/\(\s*100\s*%\)/.test(value)) return 'green';
  if (/\(\s*0\s*%\)/.test(value)) return 'red';
  
  return 'orange';
}

<template slot="percentage" slot-scope="text">
  <span :style="{ color: getPercentageColor(text) }">{{ text }}</span>
</template>

<template>
  <a-modal
    title="抓取記錄"
    :visible="visible"
    width="90%"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <a-table
      rowKey="id"
      :columns="columns"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      bordered
    >
      <!-- 狀態(tài)列 -->
      <template slot="graspingStatus" slot-scope="text">
        <a-tag :color="getStatusColor(text)">
          {{ getStatusText(text) }}
        </a-tag>
      </template>

      <!-- 時(shí)間格式化 -->
      <template slot="time" slot-scope="text">
        {{ formatDateTime(text) }}
      </template>

      <!-- 百分比列顏色控制 -->
      <template slot="percentage" slot-scope="text">
        <span :style="{ color: getPercentageColor(text) }">{{ text }}</span>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import dayjs from 'dayjs';
import { getGraspingRecords } from '@/api/ad-api/media';

export default {
  name: 'GraspingRecordModal',
  data() {
    return {
      loading: false,
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: total => `共 ${total} 條記錄`
      },
      columns: [
        { title: '任務(wù)ID', dataIndex: 'graspingTaskId' },
        { title: '總?cè)罩緮?shù)', dataIndex: 'totalCount' },
        { 
          title: '狀態(tài)', 
          dataIndex: 'graspingStatus',
          scopedSlots: { customRender: 'graspingStatus' }
        },
        { 
          title: '抓取時(shí)間', 
          dataIndex: 'graspingTime',
          scopedSlots: { customRender: 'time' }
        },
        { 
          title: '設(shè)備ID數(shù)', 
          dataIndex: 'deviceIdCount',
          scopedSlots: { customRender: 'percentage' }
        },
        // 其他列...
      ]
    };
  },
  props: {
    visible: { type: Boolean, default: false },
    mediaAdId: { type: [Number, String], required: true }
  },
  watch: {
    visible(val) {
      if (val) {
        this.pagination.current = 1;
        this.fetchData();
      } else {
        this.data = [];
        this.pagination.total = 0;
      }
    }
  },
  methods: {
    // 格式化時(shí)間
    formatDateTime(timeStr) {
      return timeStr ? dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss') : '-';
    },

    // 狀態(tài)文本
    getStatusText(status) {
      const map = { 0: '失敗', 1: '成功', 2: '部分成功' };
      return map[status] || '未知';
    },

    // 狀態(tài)顏色
    getStatusColor(status) {
      const map = { 0: 'red', 1: 'green', 2: 'orange' };
      return map[status] || 'default';
    },

    // 動(dòng)態(tài)計(jì)算百分比顏色
    getPercentageColor(value) {
      if (typeof value !== 'string') return 'orange';
      if (/\(\s*100\s*%\)/.test(value)) return 'green';
      if (/\(\s*0\s*%\)/.test(value)) return 'red';
      return 'orange';
    },

    // 分頁(yè)變化
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.fetchData();
    },

    // 獲取數(shù)據(jù)
    async fetchData() {
      this.loading = true;
      try {
        const { data: res } = await getGraspingRecords({
          mediaAdId: this.mediaAdId,
          page: this.pagination.current,
          pageSize: this.pagination.pageSize
        });

        if (res.code === '000000') {
          this.data = res.data.aaData || [];
          this.pagination.total = res.data.iTotalRecords || 0;
        } else {
          throw new Error(res.msg || '獲取數(shù)據(jù)失敗');
        }
      } catch (error) {
        console.error('獲取抓取記錄失敗:', error);
        this.$message.error(error.message);
        this.data = [];
        this.pagination.total = 0;
      } finally {
        this.loading = false;
      }
    },

    // 關(guān)閉模態(tài)框
    handleCancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
/* 可自定義樣式 */
</style>

getPercentageColor(value) {
  if (typeof value !== 'string') return 'orange';
  if (/(\(\s*100\s*%\)|100%)/.test(value)) return 'green';
  if (/(\(\s*0\s*%\)|0%)/.test(value)) return 'red';
  return 'orange';
}

<template slot="percentage" slot-scope="text">
  <span :class="getPercentageClass(text)">{{ text }}</span>
</template>

<style>
.green-text { color: green; }
.red-text { color: red; }
.orange-text { color: orange; }
</style>

getPercentageClass(value) {
  if (typeof value !== 'string') return 'orange-text';
  if (/\(\s*100\s*%\)/.test(value)) return 'green-text';
  if (/\(\s*0\s*%\)/.test(value)) return 'red-text';
  return 'orange-text';
}