<!--功能介绍-->
<template>
  <div class="function-intorduction" v-if="flag">
    <div class="application-scenarios-and-case-son">
      <!-- {{ dataFrom.attrType }} -->
      <div class="title">
        <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
      </div>
      <div class="tab">
        <div
          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
          :key="itemSonTitle.name"
          @click="tabSwitch(itemSonTitle.name)"
          class="tab-son"
          :class="
            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
          "
        >
          <a-tooltip>
            <template #title>{{ itemSonTitle.name }}</template>
            <div
              class="tab-top"
              :class="
                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
              "
            >
              {{ itemSonTitle.name }}
            </div>
          </a-tooltip>
          <div
            class="tab-bottom"
            v-if="tabInitialize() == itemSonTitle.name"
          ></div>
        </div>
      </div>
      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
        <div class="content" v-if="tabindex == itemSonTitle.name">
          <div class="content-left">
            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
            <a-image
              :width="635"
              :height="340"
              :src="itemSonTitle.img"
              v-if="itemSonTitle.img"
            ></a-image>
          </div>
          <div class="content-right">
            <div class="content-right-scene">
              <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
              <a-tooltip>
                <template #title>{{ itemSonTitle.desc }}</template>
                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
              </a-tooltip>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
  import { ref, defineProps, watch } from 'vue'
  const flag = ref(true)
  let dataFrom = ref([])
  // tab切换方法
  let tabindex = ref('场景说明一')
  //数据初始化
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '功能介绍'
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      obj.attrValue = JSON.parse(obj.attrValue)
      dataFrom.value = obj
      tabindex.value = dataFrom.value.attrValue[0].name
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
        if (!obj) {
          flag.value = false
        } else {
          obj.attrValue = JSON.parse(obj.attrValue)
          dataFrom.value = obj
          tabindex.value = dataFrom.value.attrValue[0].name
        }
      }
    }
  )
  //滚动条样式
  function tabIndexClass(index, title, content) {
    if (title == '功能介绍' && index == 0 && content.length > 6) {
      return 'tab-son-class'
    }
  }
  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
  function tabInitialize() {
    return tabindex.value
  }
  //tab切换点击事件
  function tabSwitch(name) {
    tabindex.value = name
    return tabindex.value
  }
</script>

<style lang="less" scoped>
  .function-intorduction {
    width: 100%;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: unset;
    .application-scenarios-and-case-son {
      padding-top: 0.8rem;
      padding-bottom: 0.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: unset;
      .tab {
        max-width: 13rem;
        overflow-x: auto;
        display: flex;
        justify-content: center;
        color: #808080;
        border-bottom: 0.01rem #e4e6f5 solid;
        margin-top: 0.45rem;
        margin-bottom: 0.4rem;
        cursor: pointer;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        .tab-son {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 1rem;
          text-align: center;
          .tab-top {
            min-width: 1.2rem;
            font-size: 0.24rem;
            line-height: 0.24rem;
            margin-bottom: 0.2rem;
            max-width: 2rem;
            height: 0.24rem;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          .tab-top-down {
            min-width: 1.2rem;
            color: #526aff;
            margin-bottom: 0.16rem;
          }
          .tab-bottom {
            height: 0.04rem;
            width: 0.6rem;
            background: #526aff;
          }
        }
        .tab-son-class {
          margin-left: 4.3rem;
          margin-bottom: 0.02rem;
        }
        .tab-son-class-two {
          margin-left: 2.3rem;
          margin-bottom: 0.02rem;
        }
        .tab-son:last-child {
          margin-right: 0rem;
        }
      }
      .tab::-webkit-scrollbar-thumb {
        background: rgba(82, 106, 255, 0.4);
      }
      .content {
        display: flex;
        position: relative;
        width: 100%;
        min-width: 13rem;
        height: 3.4rem;
        .content-left {
          position: absolute;
          left: 0;
          min-width: 6.2rem;
          :deep(.ant-image-img) {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          // text-align: center;
          .content-top {
            text-align: left;
          }
        }
        .content-right {
          width: 6.2rem;
          height: 3.4rem;
          position: absolute;
          right: 0;
          display: flex;
          justify-content: center;
        }
        .content-right-scene,
        .content-right-case {
          width: 6.2rem;
          height: 3.4rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .content-left-scene,
        .content-left-case {
          height: 3.4rem;
          width: 6.35rem;
          border-radius: 0.1rem;
          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
          background-position: center;
          background-size: 6.35rem 3.4rem;
        }
        .content-top {
          font-size: 0.22rem;
          line-height: 0.22rem;
          color: #000000;
          margin-bottom: 0.35rem;
        }
        .content-bottom {
          font-size: 0.18rem;
          color: #999999;
          line-height: 0.26rem;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 6;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
    .application-scenarios-and-case-son:first-child {
      padding-top: 1rem;
    }
  }
</style>
