<!--
 * @Author: walker.liu
 * @Date: 2022-03-09 11:10:22
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <div class="chart-box-wrapper">
    <div class="header" v-if="title || $slots['title']">
      <div class="header-title">
        <span>{{ title }}</span>
        <t-button
          v-if="router.currentRoute.value.name !== 'tokenAnalysis' && hasHeader"
          class="go-ana-btn custom_button_back_border"
          size="small"
          @click="goAnalysis"
          >{{ $t('collection.goAna') }}</t-button
        >
      </div>
      <div class="left" v-if="hasHeader">
        <div class="sub-title">
          <slot name="header"></slot>
        </div>
      </div>
      <div class="left" v-else-if="$slots['title']">
        <slot name="title"></slot>
      </div>
      <div class="chart-switch">
        <slot name="chartSwitch"></slot>
      </div>
    </div>
    <div class="echart-container">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { filterChainObj } from '@/constants/UnifiedManagementChain';
const router = useRouter();
const props = defineProps({
  title: String,
  subTitle: String,
  r24h: String,
  token: String,
  tb: String,
  currentPath: String,
  name: String,
  // 是否需要header信息
  hasHeader: {
    type: Boolean,
    default: true,
  },
});
const goAnalysis = () => {
  // 临时存储
  window.sessionStorage.setItem('echart-box', props.name);
  let Obj = filterChainObj('value', props.currentPath);
  let params: any = {
    tb:
      props.tb[0] === 'd' ? props.tb.slice(1, props.tb.length) + '' : props.tb,
    path: Obj.name,
  };
  const routeUrl = router.resolve({
    path: `/analysis/${params.path}/${params.tb}`,
  });
  window.open(routeUrl.href);
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.chart-box-wrapper {
  margin-top: 2px;
  background-color: var(--td-bg-color-container);
  min-height: 346px;
  width: 100%;
  .header {
    color: @td-Search-info-color-1;
    border: 1px solid var(--td-Search-info-border-bottom-2);
    border-bottom: none;
    .header-title {
      height: 30px;
      border-bottom: 1px solid var(--td-Search-info-border-bottom-2);
      padding-left: 8px;
      .dja(space-between,center);
      span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .go-ana-btn {
        margin-right: 6px;
      }
    }
    .left {
      .da();
      flex-shrink: 0;
      padding-left: 8px;
      .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: var(--td-text-color-primary);
        line-height: 24px;
      }
      .sub-title {
        font-size: @font-size-s;
        color: var(--td-text-color-secondary);
        margin-top: 2px;
        height: 70px;
        :deep(.onefield) {
          color: rgb(84, 112, 198);
          .value {
            font-weight: bold;
          }
        }
        :deep(.twofield) {
          color: rgb(145, 204, 117);
          .value {
            font-weight: bold;
          }
        }
        :deep(.threefield) {
          color: rgb(250, 200, 88);
          .value {
            font-weight: bold;
          }
        }
      }
    }
    .chart-switch {
      .dja(right,center);
      :deep .dimension-wrapper {
        .t-radio-group {
          margin-right: 6px;
          .t-radio-button {
            font-size: @font-size-s;
            border-radius: 0;
            padding: 2px 8px;
          }
        }
      }
    }
  }
  .echart-container {
    border: 1px solid var(--td-Search-info-border-bottom-2);
    border-top: none;
  }
}
</style>
