<style>
  .wl-section-block {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .section-tour {
    margin-bottom: 30px !important;
    padding: 30px 30px 0;
    border: 1px solid #e5e5e5;
    background-color: #fff;
  }

  .section-tour .isHiden4 {
    height: 450px;
    overflow: hidden;
  }

  .toggle_down:before {
    content: "";
    width: 100%;
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 2;
    height: 100px;
    background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  }

</style>
<template>
  <div>
    <section class="section-tour wl-section-block">
      <div class="todayTitle">行程特色</div>
      <div class="featureBox">
        <template v-if="showType==3">
          <div class="feature-inner" v-html="htmlData" :class="{'isHiden4':isShow}"></div>
        </template>
        <template v-if="showType>=4">
          <div class="feature-inner" v-html="htmlData" :class="{'isHiden4':isShow}"></div>
        </template>
        <div class="collapse_toggle" v-if="!isShow">
          <i class="iconfont iconarrow-top" @click="isShow=true"></i>
        </div>
        <div class="collapse_toggle toggle_down" v-else>
          <i class="iconfont iconarrowdown" @click="isShow=false"></i>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import { reactive, toRefs, defineComponent } from 'vue';
  import { useI18n } from 'vue-i18n'
  import { GetHtml } from 'src/utils/tools'
  export default defineComponent({
    components: {  },
    props: ['dataList'],
    setup(props) {
      const { t } = useI18n()
      const data= reactive({
        TripConfig: {},
        isShow: false,
        showType:-1,
        dataList: props.dataList,
        htmlData: ''
      })
      const methods = {
        
      }
      if (localStorage.baseifo) {
        data.TripConfig = JSON.parse(localStorage.getItem('baseifo'));
      }
      if (data.TripConfig.TripConfig.TripFeatureIsOpen == 1) {
        data.isShow = false
      } else {
        data.isShow = true;
      }
      data.showType= data.dataList.feature.featureType;
      if(data.dataList.feature.featureContent==3){
        data.htmlData = GetHtml(data.dataList.feature.featureContent)
      }
      if(data.dataList.feature.featureContent>=4){
        data.htmlData = GetHtml(data.dataList.feature.featureHtml)
      }
      return {
        ...toRefs(data),
        ...methods,
      }
    }
  })

</script>
