<template>
  <!--圖片 - 4x1-->
  <div :class="{'q-mt-md':plugData.Title.split('|')[0]=='','q-mt-xl':plugData.Title.split('|')[0]!=''}">
    <section class="tour1 section-block" v-if="plugData">
      <h2 class="block-title">{{ plugData.Title.split("|")[0] }}</h2>
      <p class="title-teaser">{{ plugData.SubTitle }}</p>
      <ul class="pd-list" v-if="showType == 1">
        <li
          class="pd-box"
          v-for="(item, index) in plugData.Details"
          :key="index"
          v-if="item.TripImageUrl"
        >
          <a
            @click="OpenNewUrl(item.LinkUrl)"
            :title="item.TripTitle"
            class="pd-link"
          >
            <div
              class="pd-img"
              :style="{
                backgroundImage: `url('${
                  item.TripImageUrl && item.TripImageUrl != ''
                    ? item.TripImageUrl
                    : item.ImageUrl
                }')`,
              }"
            >
              <div class="pd-price">
                <div class="price">
                  {{ item.DayNum }}
                  <small class="unit">天</small> {{ item.Price }}
                  <small class="unit">元起</small>
                </div>
              </div>
            </div>
            <div class="pd-content">
              <h3 class="pd-title">{{ item.TripTitle }}</h3>
            </div>
          </a>
        </li>
      </ul>
      <div class="row q-col-gutter-md" style="item" v-else-if="showType == 2">
        <template v-for="(item, index) in plugData.Details">
          <div
            class="col-3 relative-position column"
            :key="index"
            v-if="item.TripImageUrl"
          >
            <div
              class="absolute-top-left q-pa-sm"
              style="
                background: linear-gradient(
                  to bottom,
                  rgba(0, 0, 0, 0.5),
                  rgba(0, 0, 0, 0)
                );
                top: 16px;
                left: 16px;
                right: 0;
                border-radius: 12px;
                z-index: 1;
              "
            >
              <div
                class="text-grey-4"
                style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)"
              >
                <q-icon name="iconfont icondingweixiao" size="16px" />
                <span class="q-ml-sm">日本, 多个城市</span>
              </div>
            </div>
            <q-img
              :src="item.TripImageUrl"
              :ratio="16 / 9"
              spinner-color="primary"
              spinner-size="20px"
              style="border-radius: 12px"
            />
            <div class="col">
              <div class="q-mt-md text-subtitle1 text-dark ellipsis-2-lines cursor-pointer" @click="OpenNewUrl(item.LinkUrl)">
                <!-- -->
                {{ item.TripTitle }}
              </div>
              <div class="row items-center q-col-gutter-sm q-mt-sm">
                <q-chip
                  style="background: rgba(193, 0, 21, 0.1)"
                  size="sm"
                  class="f12 rounded-borders text-negative"
                  label="急速確認"
                />
                <q-chip
                  style="background: rgba(193, 0, 21, 0.1)"
                  size="sm"
                  class="f12 rounded-borders text-negative"
                  label="七天前免費取消"
                />
              </div>
            </div>
            <div class="q-mt-sm">
              <div class="text-grey-5 f12" style="text-decoration: line-through;">CNY {{item.Price }}</div>
              <div class="text-subtitle2 text-weight-bolder text-dark">
                <span>CNY {{ item.Price  }}</span>
                <span class="text-grey-8 f12 q-ml-sm">起</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </section>
  </div>
</template>
<script>
import internal from "stream";

export default {
  props: ["plugData"],
  data() {
    return {
      showType: 1,
    };
  },
  mounted() {
    if(this.plugData){
      let t = this.plugData.Title.split("|");
      this.showType = t.length > 1 ? parseInt(t[1]) : 1;
    }
  },
  methods: {
    OpenNewUrl(url){
      window.location.href=url
    }
  },
};
</script>

<style>
.tour1 {
}

.tour1 .block-title {
  font-size: 22px;
  font-weight: 600;
  padding: 0;
  margin: 0;
}

.tour1 .title-teaser {
  margin-bottom: 10px;
  font-size: 16px;
  color: #999;
}

.tour1 .pd-list {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  margin: 0;
}

.tour1 .pd-list .pd-box {
  padding: 0;
  margin: 0;
  margin-right: 20px;
  margin-bottom: 20px;
  width: calc(25% - 15px);
  border-radius: 3px;
  background-clip: padding-box;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
  transition: -webkit--webkit-transform 0.2s ease,
    -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
    -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
    -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
  background-color: #fff;
  list-style: none;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.tour1 .pd-list .pd-box:last-child {
  margin-right: 0px;

}

a {
  text-decoration: none;
  color: var(--q-color-primary);
}

.tour1 .pd-box .pd-img {
  position: relative;
  width: 100%;
  padding-bottom: 66.237%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}

.tour1 .pd-box .pd-img .pd-price {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  border-bottom: 4px solid var(--q-color-primary);
  text-align: right;
}

.tour1 .pd-box .pd-img .pd-price .price {
  display: inline-block;
  padding: 4px 12px 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  background-color: var(--q-color-primary);
  -webkit-border-radius: 5px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px 0 0;
  -moz-background-clip: padding;
  border-radius: 5px 0 0;
  background-clip: padding-box;
}

.tour1 .pd-box .pd-img .pd-price .price small {
  padding: 0 4px;
  font-size: 14px;
}

.tour1 .pd-box .pd-content {
  padding: 15px 15px 20px;
}

.tour1 .pd-box .pd-title {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
}

@media only screen and (max-width: 1200px) {
  .tour1 .pd-list .pd-box {
    flex-basis: calc(50% - 10px) !important;
  }

  .tour1 .pd-list .pd-box:nth-child(even) {
    margin-right: 0 !important;
  }
}

@media only screen and (min-width: 768px) {
  .pd-box:hover {
    transform: translate(0, -4px) !important;
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
  }
}

@media only screen and (max-width: 425px) {
  .tour1 .pd-list .pd-box {
    flex-basis: 100% !important;
    margin-right: 0 !important;
  }
}
</style>
