<style>
  .Style2_main {
    position: relative;
    margin-top: -10px;
    padding: 40px 0;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 3;
  }

  .Style2_main .wl-section-block {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
  }

  .Style2_main .wl-section-block>* {
    flex: 1;
  }

  .Style2_main .tour-intro {
    padding:0 30px;
  }

  .Style2_main .tour_Nmae {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
  }

  .Style2_main .drop-wrap {
    position: relative;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: middle;
  }

  .drop-wrap a,
  .print_box {
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
    font-size: 14px;
    color: #006be2;
    padding: 4px 8px;
    transition: .15s ease-in;
  }

  .Style2_main .tour-detail-list {
    padding: 0 0 20px;
    font-size: 16px;
    color: #999;
    list-style: none;
  }

  .Style2_main .tour-detail-list li {
    line-height: 2;
  }

  .Style2_main .tour-cover2 img {
    width: 100%;
    height: auto;
  }

  @media only screen and (max-width: 768px) {
    .Style2_main .wl-section-block {
      padding: 0;
      display: block;
    }

    .Style2_main {
      padding: 0;
    }
  }

</style>
<template>
  <div class="Style2_main">
    <div class="wl-section-block">
      <div class="tour-cover2" v-if="imgCover.length>0">
        <div class="q-pa-md">
          <q-carousel
            animated
            v-model="slide"
            navigation
            height="400px"
            infinite
            autoplay
            transition-prev="slide-right"
            transition-next="slide-left"
          >
          <q-carousel-slide v-for="(x, i) in imgCover" :name="i" :key="i" :img-src="x.Url" />
          </q-carousel>
        </div>
      </div>
      <div class="tour-intro">
        <div class="tour_Nmae">{{dataList.title}}</div>
        <div class="drop-wrap">
          <a>分享</a>
          <a class="print_box" @click="window.print()">打印</a>
        </div>
        <ul class="tour-detail-list">
          <li>行程編號：
            <template v-if="dataList.currentPriceInfo&&dataList.currentPriceInfo.tcnum">
              {{dataList.currentPriceInfo.tcnum.toUpperCase()}}
            </template></li>
          <li>旅遊地點：{{dataList.countryName}}</li>
          <li>旅遊天數：{{dataList.dayNum}}天</li>
          <li>出團日期：
            <template v-if="dataList.currentPriceInfo&&dataList.currentPriceInfo.startDate">
              {{dataList.currentPriceInfo.startDate}}
            </template>
          </li>
          <li style="margin-top:30px;">
            <q-btn v-if="dataList.currentPriceInfo&&dataList.currentPriceInfo.tcnum" style="width:115px;" type="a" label="立即预定" color="primary" @click="buyNow()" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import { reactive, toRefs, defineComponent  } from 'vue';
  import { useI18n } from 'vue-i18n'
  export default defineComponent({
    components: {  },
    props: ['dataList'],
    setup(props, context) {
      const { t } = useI18n()
      const data= reactive({
        slide: 1,
        imgCover: [],
        dataList: props.dataList
      })
      const methods = {
        buyNow(){
          context.emit('showDialog')
        }
      }
      data.imgCover = JSON.parse(data.dataList.imgCover);
      return {
        ...toRefs(data),
        ...methods,
      }
    }
  })

</script>
