<template>
  <div class="portfolio">
    <div class="container">

      <BigTitleComVue :bigTitle="titleInfo.title" :subTitle="titleInfo.subTitle" />
      <div class="clear" v-for="(t, index) in listData" :key="index">
        <LineTitleComVue :msg="t.title" />
<!--        <div class="title_wrap">
          <div class="line"></div>
          <div class="title">{{ t.title }}</div>
        </div> -->
        <div class="investments clear" style="margin-bottom: 0 !important;">
          <template v-for="(item, i) in t.children" :key="i">
            <div :style="`${item.link && 'cursor:pointer'}`" class="investment" @click="openWindow(item)">
              <div class="investment-avatar">
                <img :src="item.cover_image" alt="">
              </div>
              <p class="investment-name">
                {{ item.title }}
              </p>
            </div>
          </template>
        </div>
      </div>

      <div class="portfolio-text" v-html="desc.content">
      </div>
    </div>
  </div>
</template>

<script setup>
import BigTitleComVue from "../components/BigTitleCom.vue";
import LineTitleComVue from "../components/LineTitleCom.vue";
import {clickPortfolio, getPageApi, getPortfolioApi} from "../api/manage.js";
import {onMounted, ref} from "vue";
import useTitleInfo from "../utils/useTitleInfo.js";
const titles = ['DeFi', 'GameFi', 'SocialFi/ DID', 'Metaverse/ NFT', 'INFRASTRUCTURE', 'Venture Capital', 'CeFi', 'WALLET'];
const listData = ref([])
const titleInfo = useTitleInfo()
// 虚拟数据  virtual data
/*const datas = [
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'Zebec Protocol',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 1a.jpg',
    type: 0
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 2a.jpg',
    type: 1
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 2a.jpg',
    type: 1
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 2a.jpg',
    type: 1
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 2a.jpg',
    type: 1
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 2a.jpg',
    type: 1
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 2a.jpg',
    type: 1
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 3a.jpg',
    type: 2
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 3a.jpg',
    type: 2
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 3a.jpg',
    type: 2
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 3a.jpg',
    type: 2
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 3a.jpg',
    type: 2
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 3a.jpg',
    type: 2
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 3a.jpg',
    type: 2
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  }, {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 4a.jpg',
    type: 3
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 5a.jpg',
    type: 4
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 5a.jpg',
    type: 4
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 5a.jpg',
    type: 4
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 5a.jpg',
    type: 4
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 5a.jpg',
    type: 4
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 5a.jpg',
    type: 4
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 5a.jpg',
    type: 4
  },

  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 6a.jpg',
    type: 5
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 6a.jpg',
    type: 5
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 6a.jpg',
    type: 5
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 6a.jpg',
    type: 5
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 6a.jpg',
    type: 5
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 7a.jpg',
    type: 6
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 7a.jpg',
    type: 6
  },
  {
    name: 'EverFinance',
    img: '/images/Portfolio/Portfolio 8a.jpg',
    type: 7
  },
];*/

const desc = ref({})
const getData = ()=>{
  getPortfolioApi().then(res=>{
    if (res.data) {
      listData.value = res.data;
      console.log(res.data)
    }
  })

  getPageApi({title: 'Portfolio'}).then(({data})=>{
    if (data) {
      desc.value = data
    }
  })
}

const openWindow = (record)=>{
  if (record.link) {
    clickPortfolio({portfolio_id: record.id}).then()
    window.open(record.link)
  }
}
onMounted(()=>{
  getData()
})
</script>

<style lang="scss" scoped>
.portfolio {


  .title_wrap {
    position: relative;
    margin:20px 0;
    .line {
      width: 100%;
      height: 2px;
      background-color: rgba(0, 0, 0, 0.1);
    }
    .title {
      padding:0 40px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-family: 'Cinzel';
      font-style: normal;
      font-weight: 400;
      font-size: 22px;
      line-height: 24px;
      text-align: center;
      color: rgba(0, 0, 0, 0.25);
      background-color: #f5f5f5;

      @media screen and (min-width:1440Px) and (max-width: 100vw) {
        font-size: 24px !important;
      }

      @media screen and (max-width:376Px) and (min-width: 0Px) {
        font-size: 24px !important;
        padding:0 12px !important;
      }
    }
  }



  .investments {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -14px 30px;

    .investment {
      width: calc(100% / 6);
      padding: 14px;
      text-align: center;

      .investment-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .investment-name {
        margin: 0;
        padding-top: 14px;
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 400;
        font-size: 14Px;
        line-height: 16px;
        text-align: center;
        color: rgba(0, 0, 0, 0.5);
        word-break: break-all;
      }
    }

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      margin-bottom: 40px !important;

      .investment {
        width: calc(100% / 8);
        padding: 14px;
      }

      .investment-avatar {
        width: 61px !important;
        height: 61px !important;
        margin: 0 auto !important;
      }

      .investment-name {
        font-size: 16Px !important;
      }
    }

    @media screen and (min-width:431Px) and (max-width: 724Px) {
      .investment {
        width: calc(100% / 4) !important;
        margin: 12px 0 26px !important;
      }

      .investment-avatar {
        width: 64Px !important;
        height: 64Px !important;
        margin: 0 auto;
      }
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {
      .investment {
        width: calc(100% / 4);
        margin: 12px 0 26px !important;
      }

      .investment-avatar {
        width: 64px !important;
        height: 64px !important;
        margin: 0 auto;
      }

      .investment-name {
        font-size: 12Px !important;
      }
    }
  }

  .portfolio-text {
    margin: 24px 0 60px;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;

    color: rgba(0, 0, 0, 0.5);

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      margin-top: 20px !important;
      font-size: 16Px !important;
      line-height: 16px !important;
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {
      font-size: 12Px !important;
      line-height: 18px !important;
      margin-bottom: 30px;
    }
  }
}
</style>
