<template>
  <div class="page">
    <Nav :title="detail.name"></Nav>
    <div class="content-wrap">
      <div class="content">
        <div class="circle-base-info">
          <img :src="detail.coverImage" class="banner" />
          <div class="circle-name">
            <h3>{{ detail.name }}</h3>
            <span>{{
              detail.riskLevel ? RISK_LEVEL[detail.riskLevel].label : ""
            }}</span>
          </div>
          <div class="tg-info">
            <div class="flex">
              <img
                class="photo"
                :src="detail.advisor.avatar"
                alt=""
                srcset=""
              />
              <label>{{ detail.advisor.showName }}</label>
            </div>
            <span class="user-name">{{ store.state.userInfo.userName }}</span>
          </div>
        </div>
        <div class="introduce">
          <h4>交易圈简介</h4>
          <p>{{ detail.remark }}</p>
        </div>
        <div class="introduce">
          <h4>使用人群</h4>
          <p>{{ detail.applicableUser }}</p>
        </div>
      </div>
      <div class="tip">
        风险提示：投资顾问提供的观点和投资建议仅供参考，不作为客户投资决策依据。客户需独立做出投资决策，风险自担。市场有风险，投资须谨慎。
      </div>
    </div>
    <div class="footer">
      <!-- <div class="buy-list">
        <ul>
          <li>
            <img
              src="https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800"
            />
          </li>
          <li>
            <img
              src="https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800"
            />
          </li>
          <li>
            <img
              src="https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800"
            />
          </li>
        </ul>
        <p><span>谁谁</span>正在火热抢购中</p>
      </div> -->
      <button @click="toPaymentUrl">立即开通</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import { useRoute } from "vue-router"
import { getCircleDetail } from "@/api/circle"
import Nav from "@/components/NavBar.vue"
import { RISK_LEVEL } from "@/utils/contant"
import { useStore } from "vuex"

// const router = useRouter();
const route = useRoute()
const store = useStore()

const detail = ref({
  advisor: {},
})
const queryCircleDetail = async () => {
  const ret = await getCircleDetail({ id: route.query.id })
  if (ret && ret.code === 0) {
    detail.value = ret.data
  }
}
queryCircleDetail()

const toPaymentUrl = () => {
  location.href = window.config.getCarProductLink({
    token: store.state.userInfo.token,
    refreshToken: store.state.userInfo.refreshToken,
    activityId: detail.value.paymentUrl,
  })
}
</script>
<style lang="scss" scoped>
.page {
  height: 100%;
}
.content-wrap {
  height: calc(100% - 180px);
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  .content {
    min-height: calc(100% - 148px);
  }
}
.circle-base-info {
  padding: 32px 0;
  margin: 0 32px;
  border-bottom: 1px solid rgba(245, 245, 245, 0.7);
  .banner {
    height: 422px;
    width: 100%;
  }
  .circle-name {
    display: flex;
    justify-content: space-between;
    line-height: 96px;
    h3 {
      font-size: 32px;
    }
    span {
      font-size: 24px;
    }
  }
  .tg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .flex {
      display: flex;
      align-items: center;
    }
    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    label {
      font-size: 28px;
      margin-left: 8px;
    }
    span {
      font-size: 28px;
    }
    .user-name {
      color: #2e78fa;
    }
  }
}
.introduce {
  text-align: left;
  padding: 0 32px;
  margin-bottom: 20px;
  h4 {
    font-size: 32px;
    padding: 24px 0;
  }
  p {
    font-size: 28px;
    line-height: 40px;
  }
}
.tip {
  padding: 20px 32px 20px 32px;
  background: #f5f6fa;
  font-size: 24px;
  color: #9aa4b6;
  line-height: 36px;
}
.footer {
  box-shadow: 0px -4px 15px #eff2f1;
  background: #fff;
  .buy-list {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #999;
    padding: 20px 0;
    ul {
      display: flex;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  button {
    width: 100%;
    height: 88px;
    background-image: linear-gradient(270deg, #2e78fa 0%, #45acff 100%);
    font-weight: 500;
    font-size: 32px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
