import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import { StarFilledIcon } from 'tdesign-icons-vue-next';
import CopySvg from '/public/images/svg/rightDetail/copy.svg';
import useCopy from '@/hooks/useCopy';
import { parseCoinAmount } from '@/utils/tool';
import * as Cache from '@/utils/cache';
import './index.less';
import CollectionSvg2 from '/public/images/svg/rightDetail/colection2.svg';
import CollectionSvg3 from '/public/images/svg/rightDetail/collection-yes.svg';
export default defineComponent({
  props: {
    tokenInfo: Object as any,
    numR24h: String,
    r24h: String,
    isInCollection: Boolean,
    tb: String,
    currentPath: String,
  },
  emits: ['update:isInCollection'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const { doCopy } = useCopy();
    const collectData = () => {
      const { tokenInfo, isInCollection, tb, currentPath } = props;
      if (isInCollection) {
        Cache.deleteCollection(tb);
        emit('update:isInCollection', false);
      } else {
        Cache.setCollection({
          hash: tb,
          symbol: tokenInfo.symbol,
          path: currentPath,
        });
        emit('update:isInCollection', true);
      }
      // // 通知select中的收藏数据更新
      // CollectionCl.value.value += 1;
    };
    const r24hColor = () => {
      if (props.r24h) {
        if (props.r24h[0] === '-') {
          return '#f85260';
        } else {
          return '#23ab94';
        }
      }
    };
    const getPrice = () => {
      const { tokenInfo } = props;
      if ('up' in tokenInfo) {
        let up = parseCoinAmount(tokenInfo.up);
        if (up.indexOf('{') !== -1) {
          up = up.slice(0, up.length - 2);
        }
        return up;
      } else {
        return '';
      }
    };
    return () => (
      <div class="header-token-box">
        <div class="header-token-info">
          <div class="filled-star-box">
            <span>
              {props.isInCollection ? (
                <CollectionSvg3 class="filled-star" onClick={collectData} />
              ) : (
                <CollectionSvg2
                  onClick={collectData}
                  class="filled-star-on"
                ></CollectionSvg2>
              )}
            </span>
          </div>
          <div class="pro-tokeninfo-header">
            <div class="left-token-name">
              <div class="token-name-child">
                <img src="/images/img/default-avatar.png" alt="swap" />
                <span class="title">{props.tokenInfo.symbol}</span>
              </div>
              <div class="address-info">
                <span class="address-info-item">
                  <span>{t('TableList.token')}</span>
                  <span class="address">：{props.tokenInfo.tokenSub}</span>
                  <span onClick={doCopy.bind(this, props.tokenInfo.token)}>
                    <CopySvg></CopySvg>
                  </span>
                </span>
              </div>
              <div class="address-info">
                <span class="address-info-item">
                  <span>{t('TableList.pool')}</span>
                  <span class="address">：{props.tokenInfo.tbnameSub}</span>
                  <span onClick={doCopy.bind(this, props.tokenInfo.n_tb)}>
                    <CopySvg></CopySvg>
                  </span>
                </span>
              </div>
            </div>
            <div class="token-price-cl">
              <div class="left-info">
                <div class="price">
                  <div
                    class="price-box"
                    style={{
                      color: r24hColor(),
                    }}
                  >
                    {/* <span>{getPrice()}</span> */}
                    {getPrice()}
                  </div>
                  <div
                    class="r24h-cl"
                    style={{
                      color: r24hColor(),
                    }}
                  >
                    {props.numR24h}
                    {`(${props.r24h})`}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
