<template>
  <div class="token-pool-wrapper narrow-scrollbar">
    <div>
      <div v-if="poolInfo.length > 0" class="pool-token-info">
        <div class="pool-token-header">
          <div class="Mating-pool">
            <span>{{ $t('tokenInfo.pair') }}</span>
          </div>
          <div class="Mating-AMM">
            <span>AMM</span>
          </div>
          <div class="Currency-amount">
            <span>{{ $t('tokenInfo.poolCoinNum') }}</span>
          </div>
          <div class="total-turnover">
            <span>{{ $t('tokenInfo.total') }}</span>
          </div>
        </div>
        <div
          class="pool-token-line"
          v-for="(item, index) in poolInfo"
          :key="item"
          @click="switchPool(item, index)"
        >
          <div
            class="dot-box custom_button_back_border"
            :style="{ display: monitoring(index) }"
          ></div>
          <div class="pair-info">
            <div class="pair-info-cl">
              <span>{{ item.pair1 }}/<br /></span>
              <span>{{ item.pair2 }}</span>
            </div>
          </div>
          <div class="swap-info">
            {{ item.swap }}
          </div>
          <div class="balance-info">
            <span>{{ item.total?.ub ?? '--' }}</span>
          </div>
          <div class="liquidity-info">
            {{ item.total?.vn ?? '--' }}
          </div>
        </div>
      </div>
      <div v-else>
        <tr class="empty">
          <td colspan="3">
            <table-empty top="22px" :msg="$t('tooltip.NoList')"></table-empty>
          </td>
        </tr>
      </div>
      <t-loading
        v-show="isLoading"
        :text="$t('Search.Loading')"
        size="small"
      ></t-loading>
    </div>
  </div>
</template>
<script setup lang="ts">
import TableEmpty from '@/components/TableEmpty.vue';
import request from '@/utils/request';
import { parseNumberToK, parseCoinAmount } from '@/utils/tool';
import { WebS } from '@/utils/TokenTrans';
// import { goDetailK } from '@/utils/router/routerGo';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
const route = useRoute();
const props = defineProps({
  poolToken: {
    type: String,
    default: () => {},
  },
  currentPath: String,
  tb: String,
  mt: String,
});
const emit = defineEmits(['update:address']);
// 当前链
const chain = useChain();
const poolInfo = ref([]);
watch(
  () => props.poolToken,
  (v) => {
    if (v) {
      poolInfo.value = [];
      getPoolToken();
    }
  }
);
const currentPoolValue = ref();
const currentPoolAddress = ref('');
onMounted(() => {
  getPoolToken();
});
// 监听当前流动池
const monitoring = (index) => {
  if (currentPoolValue.value === index) {
    return '';
  } else {
    return 'none';
  }
};

const isLoading = ref(false);
const getPoolToken = async () => {
  isLoading.value = true;
  const res: any = await request.get(
    `/v1${
      route.name !== 'tokenIndex' ? props.currentPath : chain.value
    }/getRightPondInfo`,
    {
      params: {
        tag: props.poolToken,
      },
    }
  );
  try {
    if (res.list.length > 0) {
      // 拆分字段内容
      res.list.forEach((item, index) => {
        if (props.tb.toLowerCase().substr(1) === item.address.toLowerCase()) {
          currentPoolValue.value = index;
        }
        let pairs = item.pair.split('/');
        let pair1 = pairs[0];
        let pair2 = pairs[1];
        item.pair1 = pair1;
        item.pair2 = pair2;
        // item.pair_balance = item.pair_balance.toLocaleString();
        if (item.total?.ub) {
          item.total.ub = '$' + parseNumberToK(item.total.ub);
        }
        if (item.total?.vn) {
          if (item.total?.vn.toString().indexOf('e') !== -1) {
            item.total.vn = parseCoinAmount(item.total?.vn);
          } else {
            item.total.vn = '$' + Math.round(item.total?.vn);
          }
        }
        if (item.swap === '') {
          item.swap = 'None';
        }
      });
      poolInfo.value = res.list;
      // 判断是哪个池子
      let index = res.list.findIndex((item: any, index: number) => {
        let tb =
          props.tb[0] === 'd' ? props.tb.slice(1, props.tb.length) : props.tb;
        return WebS(item.address) === WebS(tb);
      });
      currentPoolValue.value = index;
    } else {
      isLoading.value = false;
    }
    isLoading.value = false;
  } catch (e) {
    console.log(e);
    isLoading.value = false;
  }
};
// 切换流动池
const switchPool = (item, index) => {
  // currentPoolValue.value = index;
  // currentPoolAddress.value = item.address;

  // emit('update:address', currentPoolAddress.value);
  if (currentPoolValue.value === index) {
    return;
  }
  let Obj = filterChainObj('value', chain.value);
  // 打开新的流动池
  let params = {
    path: Obj.name,
    tb: item.address,
  };
  // goDetailK(params);
};
</script>
<style lang="less">
@import '@/style/variables.less';
@import '@/style/flex.less';
.token-pool-wrapper {
  margin-top: 12px;
  font-size: 12px;
  height: 208px;
  overflow: auto;
  .pool-token-info {
    width: 100%;
    .pool-token-header {
      padding: 0 6px;
      height: 30px;
      display: flex;
      margin-bottom: 8px;
      font-size: @font-size-s;
      white-space: nowrap;
      border-bottom: 1px solid var(--td-component-border);
      .Mating-pool {
        width: 28%;
        padding-left: 10px;
      }
      .Mating-AMM {
        width: 20%;
        text-align: center;
      }
      .Currency-amount {
        text-align: center;
        width: 28%;
      }
      .total-turnover {
        width: 28%;
        text-align: end;
      }
    }
    .pool-token-line {
      display: flex;
      margin-bottom: 8px;
      font-size: @font-size-s;
      padding: 0 6px;
      position: relative;
      .dot-box {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        top: 0;
      }
      &:hover {
        background: @td-search-brand-color-1;
        cursor: pointer;
        transition: all 0.3s;
      }
      .pair-info {
        width: 28%;
        line-height: 16px;
        .da();
        .pair-info-cl {
          width: 60%;
          padding-left: 12px;
          :nth-child(2) {
            color: @td--main-btn-color-1;
          }
        }
      }
      .swap-info {
        width: 24%;
        .dja();
        span {
          display: block;
        }
      }
      .balance-info {
        width: 28%;
        .dja();
        span {
          display: block;
        }
        :nth-child(1) {
          color: @td-right-detail-font-color-1;
        }
      }
      .liquidity-info {
        width: 28%;
        color: @td-right-detail-font-color-1;
        padding-right: 3px;
        .dja(flex-end,center);
        span {
          display: block;
        }
      }
    }
  }
  .t-loading {
    .dj();
    margin-top: -44px;
  }
  .empty {
    .dj();
  }
}
</style>
