<template>
  <div class="coll-tab">
    <t-table
      row-key="index"
      :data="list"
      :columns="columns"
      hover
      :loading="loading"
      @row-click="handleRowClick"
      max-height="calc(100vh - 64px)"
    >
      <template #r24h="{ row }">
        <div>
          <span :style="{ color: ListenColor(row.r24h) }">
            {{ row.r24h }}
          </span>
          <span class="delete-btn" @click.stop="deleteToken(row.tb)">
            <DeleteIcon />
          </span>
        </div>
      </template>
    </t-table>
  </div>
</template>

<script lang="ts" setup>
import { getCollectionList, deleteCollection } from '@/utils/cache';
import request from '@/utils/request';
import { parseCoinAmount, parsePercent } from '@/utils/tool';
import { DeleteIcon } from 'tdesign-icons-vue-next';
import { useI18n } from 'vue-i18n';
// import { goDetailK } from '@/utils/router/routerGo';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
const i18n = useI18n();
const list = ref([]);
const loading = ref(false);
// 表格初始值，就代表数据需要更新
const TableDefault = ref(1);
// 收藏表格是否更新
const CollectionCl = CollectionChange();
// 通知表格收藏图表取消收藏
const CollectionDe = CollectionDelete();
// 当前链
const chain = useChain();
const getList = () => {
  loading.value = true;
  let collections = getCollectionList();
  if (collections === false || collections.length == 0) {
    list.value = [];
    loading.value = false;
    return;
  }
  let tags = collections.map((item) => item.hash);
  request.post('/v1/coinnav/favorites', tags).then((res: any) => {
    let tmp = (res || []).filter((item) => item);
    tmp.forEach((item, index) => {
      item.up = parseCoinAmount(item.up);
      if (item.r24h.toString()[0] !== '-') {
        item.r24h = '+' + parsePercent(item.r24h);
      } else {
        item.r24h = parsePercent(item.r24h);
      }
      item.index = index;
      item.tb = collections[index].hash;
      item.symbol = collections[index].symbol;
      item.path = collections[index].path;
    });
    list.value = tmp;
    loading.value = false;
  });
};
watch(
  () => CollectionCl.value.isOpen,
  (v) => {
    if (v) {
      if (TableDefault.value !== CollectionCl.value.value) {
        getList();
        TableDefault.value = CollectionCl.value.value;
      } else if (CollectionCl.value.value === 1) {
        // 代表第一次请求
        getList();
        TableDefault.value = 0;
        CollectionCl.value.value = 0;
      }
    }
  },
  {
    immediate: true,
  }
);
const deleteToken = (tb) => {
  deleteCollection(tb);
  getList();
  // 通知右侧详情，取消收藏
  CollectionDe.value += 1;
};
const ListenColor = computed((value) => {
  return function (value) {
    if (value[0] === '-') {
      return '#f85260';
    } else {
      return '#23ab94';
    }
  };
});
const columns = computed(() => {
  return [
    {
      title: i18n.t('collection.name'),
      colKey: 'tn',
    },
    {
      title: i18n.t('collection.price'),
      colKey: 'up',
    },
    {
      title: i18n.t('collection.r24h'),
      colKey: 'r24h',
      slot: 'r24h',
      width: '108px',
    },
  ];
});

const handleRowClick = (item) => {
  let Obj = filterChainObj('value', chain.value, true);
  let params: any = {
    path: Obj.name,
    tb:
      item.row.tb[0] === 'd'
        ? item.row.tb.slice(1, item.row.tb.length)
        : item.row.tb,
  };
  // goDetailK(params);
};
</script>

<style scoped lang="less">
.coll-tab {
  height: 100%;
  :deep .t-table {
    .t-table--full-height {
      height: auto;
    }
    .t-table__content {
      overflow: visible;
    }
    th,
    td {
      padding: 10px 12px;
    }
    tr {
      cursor: pointer;
    }
    .up {
      color: #23ab94;
    }
    .down {
      color: #f85260;
    }
    .delete-btn {
      float: right;
      width: 22px;
      text-align: right;
    }
  }
}
</style>
