<!--
 * @Author: walker.liu
 * @Date: 2022-04-09 14:54:44
 * @Copyright（C）:  2019-2020 ZP Inc.   All rights reserved.
-->
<template>
  <div class="social-info-wrapper">
    <template v-for="item in all_href_and_icon.list" :key="item">
      <a
        class="social-item"
        target="_blank"
        :class="{ active: item.url == '' }"
        @click="gohref(item.title, item.url)"
      >
        <img
          placement="top"
          class="social-img"
          :src="item.img"
          :alt="item.alt"
        />
      </a>
    </template>
  </div>
</template>
<script setup lang="ts">
import { sortImg } from '@/utils/tool';
import { filterChainObj } from '@/constants/UnifiedManagementChain';
const props = defineProps({
  token: String,
  currentPath: String,
  chat: Object as any,
});
// 当前链
const chain = useChain();
// 当前链的所有数据--这里先取出默认的
const ChainObj = ref(
  filterChainObj(
    'value',
    props.currentPath ? props.currentPath : chain.value,
    true
  )
);
// 默认的交易平台,跟随配置项
const all_href_and_icon = reactive({
  list: [
    // 官方浏览器
    {
      img: ChainObj.value.url.website.img,
      url: ChainObj.value.url.website.link,
      title: ChainObj.value.url.website.title,
      alt: 'website',
    },
    // 交易平台
    {
      img: ChainObj.value.url.Transaction.img,
      url: ChainObj.value.url.Transaction.link,
      title: ChainObj.value.url.Transaction.title,
      alt: 'Trading platform',
    },
    {
      img: '/images/svg/rightDetail/tg.svg',
      url: '',
      title: 'teleg',
      alt: 'Telegram',
    },
    {
      img: '/images/svg/rightDetail/twitter.svg',
      url: '',
      title: 'twitter',
      alt: 'twitter',
    },
    {
      img: '/images/svg/rightDetail/discord.svg',
      url: '',
      title: 'discord',
      alt: 'discord',
    },
    {
      img: '/images/svg/rightDetail/google.svg',
      url: '',
      title: 'web',
      alt: 'web',
    },
  ],
});
const gohref = (title: string, url: string) => {
  // 考虑到不同链的website-Transaction的token拼接位置可能不一致，所以使用title标记，后续要改的话单个改就行
  if (title === 'website') {
    if (ChainObj.value.url.website.need_token) {
      // 需要拼接token在跳转
      window.open(`${url}${props.token}`);
      return;
    } else {
      // 无需拼接的
      window.open(url);
      return;
    }
  } else if (title === 'Transaction') {
    // 交易平台
    if (ChainObj.value.url.Transaction.need_token) {
      // 需要拼接token在跳转
      window.open(`${url}${props.token}`);
      return;
    } else {
      // 无需拼接的
      window.open(url);
      return;
    }
  } else {
    //其他链接，即twitter,tg,discord,web
    window.open(url);
  }
};

// url变化
watch(
  () => props.chat,
  (v) => {
    if (Object.keys(v).length > 0) {
      // 拿到链接
      let index = all_href_and_icon.list.findIndex(
        (item) => item.title === 'twitter'
      );
      all_href_and_icon.list[index]['url'] = v.twitter;
      index = all_href_and_icon.list.findIndex(
        (item) => item.title === 'discord'
      );
      all_href_and_icon.list[index]['url'] = v.discord;
      index = all_href_and_icon.list.findIndex((item) => item.title === 'web');
      all_href_and_icon.list[index]['url'] = v.web;
      index = all_href_and_icon.list.findIndex(
        (item) => item.title === 'teleg'
      );
      all_href_and_icon.list[index]['url'] = v.telegram;
    }
    // sortAllHref();
  }
);
// 做个排序，有链接的放前面
const sortAllHref = async () => {
  all_href_and_icon.list = await sortImg(toRaw(all_href_and_icon.list));
};

// home链改变时，修改对应的图标和链接
watch(
  () => chain.value,
  (v) => {
    if (v) {
      // 重新查对应的链数据
      ChainObj.value = filterChainObj('value', v, true);
      changeLink(v);
    }
  }
);
// 更换交易平台及官方浏览器
const changeLink = (chain: string) => {
  // 筛出当前链浏览器图标的位置
  let websiteIndex = all_href_and_icon.list.findIndex(
    (item: any) => item.title === 'website'
  );
  // 筛出当前链交易平台图标的位置
  let TransactionIndex = all_href_and_icon.list.findIndex(
    (item: any) => item.title === 'Transaction'
  );
  // 更换图标和链接
  // 官方浏览器
  all_href_and_icon.list[websiteIndex].img = ChainObj.value.url.website.img;
  all_href_and_icon.list[websiteIndex].url = ChainObj.value.url.website.link;
  // 交易平台
  all_href_and_icon.list[TransactionIndex].img =
    ChainObj.value.url.Transaction.img;
  all_href_and_icon.list[TransactionIndex].url =
    ChainObj.value.url.Transaction.link;
};
</script>
<style lang="less">
@import '@/style/flex.less';
.social-info-wrapper {
  width: 100%;
  height: 40px;
  border: 1px solid var(--td-component-border);
  border-top: none;
  .dja(space-between,center);
  padding: 4px 12px;
  box-sizing: border-box;
  background-color: var(--td-bg-color-container);
  .social-item {
    width: 22px;
    height: 22px;
    cursor: pointer;
    .da();
    &:not(:last-of-type) {
      margin-right: 6px;
    }
    .social-img {
      display: block;
      width: 26px;
      height: 26px;
      border-radius: 50%;
    }
  }
  .active {
    pointer-events: none;
    // 鼠标禁用属性
    // cursor: not-allowed;
    img {
      filter: grayscale(90%);
    }
  }
}
</style>
