<template>

  <div class="home-connect">
    <!--    头部类型-->
    <div class="home-connect-top-row">
      <div class="home-top-body">
        <div class="top-row-item row-first">精品推荐</div>
        <!--        设置自定义宽度-->
        <div class="top-row-item" v-for="item in topRow" :key="item.name" :style="topRowStyle">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>

    <div class="home-connect-row">
      <div class="row-bottom">
        <!--    侧边类型-->
        <div class="row-left">
          <div class="row-left-down">

          </div>
          <div v-for="index in 9">
            <AdvertisingLeftButton :adver="new AdverLeft('测试', '1')"></AdvertisingLeftButton>
          </div>
        </div>
        <!--    广告图展示-->
        <div class="row-right">
          <AdverisingRight :data="new AdverRightData(
              3,
              ['../assets/adver.jpg','../assets/adver.jpg','../assets/adver.jpg'],['','','']
          )"/>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import AdvertisingLeftButton from "../components/AdvertisingLeftButton.vue";
import {AdverLeft} from "../entity/AdverLeft.ts";
import AdverisingRight from "../components/AdverisingRight.vue";
import {AdverRightData} from "../entity/AdverRightData.ts";

class TopRow {
  public name: string
  public url: string

  constructor(name: string, url: string) {
    this.name = name;
    this.url = url;
  }
}

let topRow = ref([new TopRow('海外账号', '3'),
  new TopRow('海外礼品卡', '6'),
  new TopRow('手游直充', '9'),
  new TopRow('steam专区', '9'),
  new TopRow('视频会员', '9')
])
//编写一个css样式熟悉
let topRowStyle = ref(getTopRowWidth())

function getTopRowWidth() {
  let topRowLen = topRow.value.length
  let width = (1170 - 268 - (topRowLen) * 5) / topRow.value.length
  return {
    width: width + 'px'
  }
}

function clickTopRow(url: string) {
  console.log(url)
  alert(url)
}


</script>

<style scoped lang="scss">


.home-connect {
  .home-connect-top-row {
    width: 100%;
    background: black;

    .home-top-body {
      width: 1170px;
      margin: 0 auto;
      display: flex;

      .row-first {
        width: 268px;
        background: #111;
      }

      .top-row-item {
        line-height: 40px;
        height: 40px;
        margin-left: 5px;
        flex-grow: 1;
        color: white;
        cursor: pointer;
        min-width: 80px;

        &:hover {
          background: #333;
        }

        &:first-child {
          margin-left: 0;
        }

        &:first-child:hover {
          background: #111;
        }
      }
    }
  }


  .home-connect-row {
    display: inline-block;
    //background: black;
    width: 1170px;
    margin: 0 auto 50px auto;

    .row-bottom {
      border: #dcdcdc solid;
      border-width: 0px 1px 1px 1px;
      display: flex;

      height: 450px;

      .row-left {
        display: inline-block;
        width: 268px;
        height: 100%;
        background: white;

        .row-left-down {
          height: 10px;
          width: 21px;
          background: #111;
          margin: 0 auto;
          clip-path: polygon(0 0, 21px 0px, 10px 10px);
        }
      }

      .row-right {
        display: inline-block;
        //width: 865px;
        height: 100%;
        margin-left: 5px;
      }
    }
  }
}
</style>