<template>
  <div class="card" v-if="props.goodsType">
    <div class="card-header">
      <div class="card-title">
        <span>{{ props.goodsType.title }}</span>
      </div>
      <div class="cart-other">
        <a href="{{ props.goodsType.otherAll }}">发现全部</a>
      </div>
    </div>
    <div class="card-des">
      <span>
      {{ props.goodsType.promotionalSlogans }}
      </span>
    </div>
    <div class="card-list">
      <template v-for="(item,index) in props.goodsType.goodsList">
        <GoodsInfoComponent v-show="isShow||index<12" :goodsInfo="item"/>
      </template>
      <div class="card-show" v-if="props.goodsType.goodsList.length>12">
        <a @click="show()">{{ isShow ? "收起" : "查看更多" }}</a>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {GoodsType} from "../entity/Entity.ts"
import GoodsInfoComponent from "./GoodsInfoComponent.vue";
import {ref} from "vue";

let isShow = ref(false)

function show() {
  isShow.value = !isShow.value
}

//获取父级组件传入的数据内容
const props = defineProps({
  goodsType: {
    type: GoodsType,
    default: () => null
  }
})

</script>
<style scoped lang="scss">
.card {
  width: 1180px;
  margin: auto;
  padding: 0;
  //border: 1px solid #ccc;
  text-align: left;

  .card-header {
    margin: 20px 0 0 5px;
    display: flex;
    line-height: 32px;

    .card-title {
      text-align: left;
      display: inline-block;
      padding: 0;
      width: auto;
      margin: 0;
      font-weight: bold;
      font-size: 24px;
    }

    .cart-other {
      /*//向右对其*/
      flex: 1;
      margin: 0;
      width: auto;

      text-align: right;
      vertical-align: middle;
      align-items: center;
      font-size: 12px;

      a {
        padding: 5px 15px;
        color: white;
        background: #1475fa;
      }
    }

  }

  .card-des {
    margin: 8px 0 0 5px;
    color: #666666;
    font-size: 14px;
  }

  .card-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 0 0 0;
    margin-top: 15px;
    overflow: hidden;
    //overflow-y: auto;
    div {
      margin-right: 30px;
      display: inline-block;
    }

    div:nth-child(6n) {
      margin-right: 0;
    }

    div:nth-child(6n+1) {
      margin-left: 5px;
    }
  }
  .card-show{
    text-align: center;
    width: 100%;
    cursor: pointer;
  }
}


</style>