<template>
  <!--圖片 - 3x1-->
  <div>
    <section class="tour2 section-block">
      <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 || item.ImageUrl"
        >
          <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="q-col-gutter-md q-mt-md"
        :class="{ row: $q.platform.is.desktop, '': $q.platform.is.mobile }"
        v-else-if="showType == 2"
      >
        <template v-for="(item, index) in plugData.Details">
          <div
            class="relative-position"
            :key="index"
            :class="{ 'col-4 column': $q.platform.is.desktop }"
            v-if="item.ImageUrl"
          >
            <div
              class="absolute-top-left q-pa-sm"
              style="background: linear-gradient(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-1"
                style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)"
              >
                <q-icon name="iconfont iconhongqi" size="16px" />
                <span class="q-ml-sm">{{ item.DayNum }}天行程</span>
              </div>
            </div>
            <q-img
              :src="item.ImageUrl"
              :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+'/0')"
              >
                <!-- -->
                {{ 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="急速確認"
                />
              </div>
            </div>
            <div class="q-mt-sm">
              <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>
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;
    }
  },
};
</script>

<style>
.tour2 {
}

.tour2 .block-title {
  font-size: 22px;
  font-weight: 600;
  padding: 0;
  margin: 0;
  line-height: unset;
}

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

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

.tour2 .pd-list .pd-box {
  padding: 0;
  margin: 0;
  margin-right: 20px;
  margin-bottom: 20px;
  flex-basis: calc(33.333% - 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;
}

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

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

.tour2 .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;
}

.tour2 .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;
}

.tour2 .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;
}

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

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

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

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

  .tour2 .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) {
  .tour2 .pd-list .pd-box {
    flex-basis: 100% !important;
    margin-right: 0 !important;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .q-img__content {background: linear-gradient(0deg, rgba(0,0,0,0.56), rgba(0,0,0,0));}
</style>