<template>
  <div class="other-box-cl">
    <t-tooltip :content="content" placement="top" show-arrow>
      <NuxtLink :to="getDetailLink" target="_blank" @click="StopBubbly">
        <t-button class="kline-btn" theme="primary" ghost>
          <template #icon>
            <slot name="svg"> </slot>
          </template>
        </t-button>
      </NuxtLink>
    </t-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { filterChainObj } from '@/constants/UnifiedManagementChain';
const props = defineProps({
  tb: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '',
  },
  content: {
    type: String,
    default: '',
  },
});
// 筛选链下标
// 当前链
const chain = useChain();
const filterchain = () => {
  return filterChainObj('value', chain.value);
};
const getDetailLink = computed(() => {
  const { tb, type } = props;
  let tbname = '';
  if (tb[0] == 'd') {
    tbname = tb.slice(1, tb.length) + '';
  } else {
    tbname = tb;
  }
  let Obj = filterchain();
  let path = Obj.name;
  if (type == 'detail') {
    return `/${path}/${tbname}`;
  } else {
    return `/analysis/${path}/${tbname}`;
  }
});
// 阻止a标签冒泡
const StopBubbly = (e: any) => {
  e.stopPropagation();
};
</script>

<style lang="less" scoped>
.other-box-cl {
  .kline-btn {
    border-radius: 8px;
    border: 2px solid var(--new-border-5);
    width: 50px;
    height: 38px;
    padding: 0;
    :deep(.k-link) {
      fill: var(--td--main-btn-color-1);
      transition: 0.3s fill;
    }
    :deep(.to-analysis) {
      fill: var(--td--main-btn-color-1);
      stroke: var(--td--main-btn-color-1);
    }
    &:hover {
      background: var(--td--main-btn-color-1);
      :deep(.k-link) {
        fill: white !important;
      }
      :deep(.to-analysis) {
        fill: white !important;
        stroke: white !important;
      }
    }
  }
}
</style>
