<template>
  <div>
    <TitleGroup>
      <template slot="title">{{ data.productInfoEtitle }}</template>
      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
    </TitleGroup>
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :name="`${i.productInfoDetailId}`" :label="i.productInfoDetailTitle"
                     v-for="(i,k) in data.hwProductInfoDetailList">
          <transition name="fade">
            <div v-if="activeName === `${i.productInfoDetailId}`" style="position:relative;">
              <div class="content">
                <div class="contentInfo">
                  {{ i.productInfoDetailDesc }}
                </div>
                <div class="list">
                  <div class="item" v-for=" i in info">
                    <div class="image">
                      <el-image
                        style="width: 100%; height: 100%;"
                        :src="i.productInfoDetailPic"
                        fit="contain"></el-image>
                    </div>
                    <div class="info">
                      {{ i.productInfoDetailDesc }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import TitleGroup from "@/components/TitleGroup";
import banner from '@/assets/image/banner.png'
import {getProductCenterProductDetailInfo} from "@/api/productCenter";

export default {
  name: 'HighFrequencyRFID',
  props: ['data'],
  components: {
    TitleGroup
  },
  data() {
    return {
      banner,
      info: [],
      activeName: '1'
    }
  },
  mounted() {
    this.activeName = `${this.data.hwProductInfoDetailList[0].productInfoDetailId}`
    getProductCenterProductDetailInfo({parentId: this.data.hwProductInfoDetailList[0].productInfoDetailId}).then(v => {
      this.info = v.data
    })
  },
  methods: {
    handleClick(e) {
      getProductCenterProductDetailInfo({parentId: e.name}).then(v => {
        this.info = v.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.tabs {
  text-align: left;
  margin-top: 2.3vw;

  /deep/ .el-tabs__header {
    margin: 0 20vw 15px;
  }

  /deep/ .el-tabs__content {
    padding: 0 20vw;
    background-color: fade(@standard-color, 10);
  }

  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }

  /deep/ .el-tabs__item {
    letter-spacing: 3px;
    padding: 0 2vw;
    height: 2.9vw;
    font-size: 1.6vw;
  }

  /deep/ .el-tabs__item {
    line-height: 2.9vw;
  }

  /deep/ .el-tabs__item.is-active {
    font-weight: 600;
    color: @standard-color;
  }

  /deep/ .el-tabs__active-bar {
    height: 4px;
    background-color: @standard-color;
  }

  .content {
    padding: 2.2vw 0;

    .contentInfo {
      text-indent: 2em;
      font-size: 1.1vw;
      line-height: 1.9vw;
      letter-spacing: 2.6px;
    }

    .list {
      width: 100%;
      margin-top: 1.7vw;

      .item {
        margin-right: 2.6%;
        width: 23%;
        height: 16vw;
        display: inline-block;
        box-shadow: 0 0 3px #0002;
        margin-bottom: 1.4vw;
        vertical-align: top;

        .image {
          width: 100%;
          height: 50%;
        }

        .info {
          width: calc(100% - 2.2vw);
          height: calc(50% - 2.1vw);
          padding: 1.1vw;
          font-size: 0.85vw;
          line-height: 1.2vw;
          letter-spacing: 0.6px;
          color: #0006;
        }

        &:nth-child(4n) {
          margin-right: 0%;
        }
      }
    }
  }

}

.fade-enter-active {
  animation: fadeInRight;
  animation-duration: 0.5s;
}

.fade-leave-active {
  animation: fadeOutLeft;
  animation-duration: 0.5s;
}
</style>
