<template>
  <div class='Goods'>
    <!-- 图片盒子 -->
    <div class="title">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item>
          <img class="bacImg" v-lazy="require(`@/assets/img/goods/title.png`)" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="bacImg" v-lazy="require(`@/assets/img/goods/title.png`)" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="bacImg" v-lazy="require(`@/assets/img/goods/title.png`)" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="title_rr">
        <div>
          <img src="../../assets/img/goods/inco1.png" alt="">
          <p>130</p>
        </div>
        <div>
          <img src="../../assets/img/goods/inco2.png" alt="">
          <p>130</p>
        </div>
        <div @click="$router.push('/goods/share')">
          <img src="../../assets/img/goods/inco3.png" alt="">
          <p>130</p>
        </div>
      </div>
      <div class="title_txt">
        <h4>中江塔·Zhongjiang Tower</h4>
        <p>芜湖“江上芙蓉”</p>
      </div>
    </div>
    <!-- 介绍盒子1 -->
    <div class="txtBox">
      <div class="txtName">中江塔</div>
      <p>&emsp;&emsp;芜湖的地标性建筑之一，也是芜湖一张响亮的城市名片。中江塔始建于明万历四十六年(1618年)，至清康熙八年(1669年)建成，前后长达六十年,因此其宝塔融合了明、清建筑风格于一身。</p>
    </div>
    <!-- 中间的8个模块 -->
    <div class="skipBtnBox">
      <div class="skipRow" v-for="item in skipData" :key="item.id" @click="toPage(item.path)">
        <img :src="require(`@/assets/img/goods/skip${item.id}.png`)" alt="">
        <p>{{ item.name }}</p>
      </div>
    </div>

    <!-- 介绍盒子2 -->
    <div class="txtBox">
      <div class="txt2Row">
        <div class="txt2RowLL">保护级别</div>
        <div class="txt2RowRR">不可移动革命文物，优秀历史建筑</div>
      </div>
      <div class="txt2Row">
        <div class="txt2RowLL">建筑地址</div>
        <div class="txt2RowRR">滨江北路芜湖滨江公园内</div>
      </div>
      <div class="txt2Row">
        <div class="txt2RowLL">开放时间</div>
        <div class="txt2RowRR">周一至周五09：00-21：00</div>
      </div>
      <div class="txt2Row">
        <div class="txt2RowLL">门票信息</div>
        <div class="txt2RowRR">免费</div>
      </div>
    </div>

    <!-- 视频介绍 -->
    <div class="txtNameMain">视频介绍</div>
    <div class="videoBox">
      <div class="videoShade" v-show="!videoPlay" @click="videoPlayFu"></div>
      <video src="../../assets/media/loop.mp4" controls></video>
    </div>

    <!-- 景点介绍 -->
    <div class="txtNameMain">景点介绍</div>
    <div class="IntroduceBox">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item @click="lookImg">
          <img class="bacImg" v-lazy="require(`@/assets/img/goods/title.png`)" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="bacImg" v-lazy="require(`@/assets/img/goods/title.png`)" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img class="bacImg" v-lazy="require(`@/assets/img/goods/title.png`)" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="IntroduceTxt">
      <p>&emsp;&emsp;中江塔巍然耸立于青弋江与长江交汇处的江堤上，半依闹市半偎江，古人誉之为“江上芙蓉”。</p>
      <p>
        &emsp;&emsp;中江塔始建于明万历四十六年（1618年），清代康熙八年（1669年）续建落成。楼阁式砖木结构风水宝塔，八角五层，每边长4.1米。塔高43.7米，其中塔刹高10.16米。每层四窗，错置相间，每窗左右各设一灯龛。塔内结构一至二层为壁内折上式，石梯盘绕。三至五层为空筒式，木梯依壁。门窗塔壁，精雕细刻。墙面各边均嵌有砖雕，尤以1-2层圆形欹柱两侧的砖雕雀替较为突出。1987年经省考古研究所组织维修，恢复了塔的出檐部分。八个角用转角斗拱支承老戗出戗，出檐深远。八个面补间斗拱用两朵支承檐桁出挑，椽子和飞子上钉望板，上覆鸳鸯瓦。修葺后的中江塔巍然壮观，登临塔顶，万千景象，尽收眼底。中江塔堪称为芜湖地域位置的标志。
      </p>
      <p>&emsp;&emsp;中江塔雄视双江，影映二水，晨曦夕照，塔影长长，朝映浩浩大江，夕移清清弋水，波光塔影，美不胜收。入夜，月华皎皎，渔火点点，月升影移，波荡影晃，伴之波涛声，更令人陶然悠然。</p>
    </div>

    <div class="noTxt">没有更多了......</div>

  </div>
</template>

<script>
import { Toast } from 'vant'

import { ImagePreview } from 'vant';
export default {
  name: 'Goods',
  components: {},
  data() {
    return {
      skipData: [
        { id: 1, name: '语音导览', path: '/goods/audio' },
        { id: 2, name: 'VR场景', path: '/goods/kankan' },
        { id: 3, name: '鸟瞰全景', path: '/goods/vr' },
        { id: 4, name: '文献资料', path: '' },
        // { id: 4, name: '景点导航', path: '/goods/map' },
        // { id: 5, name: '美食', path: '' },
        // { id: 6, name: '酒店住宿', path: '' },
        // { id: 7, name: '预约', path: '' },
        // { id: 8, name: '游玩指引', path: '/goods/play' },
      ],
      videoPlay: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    toPage(path){
      if(!path) return Toast('敬请期待!');
      this.$router.push(item.path)
    },

    videoPlayFu() {
      this.videoPlay = true
      let dom = document.querySelector('video')
      dom.play()
    },
    lookImg() {
      ImagePreview({
        images: [
          'https://img01.yzcdn.cn/vant/apple-1.jpg',
        ],
        showIndex: false
      });
    }
  },
  created() {
    window.document.title = '中江塔'
  },
  mounted() {

  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.Goods {
  padding: 10px 15px 30px;
  width: 100%;
  height: calc(100% - 80px);
  overflow-y: auto;

  .txtNameMain {
    margin-top: 30px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    padding-left: 38px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 0px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #ecb1b8;
    }
  }

  .my-swipe {
    width: 100%;
    height: 100%;
  }

  .my-swipe .van-swipe-item {
    border-radius: 8px;

  }

  .bacImg {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  /deep/.van-swipe__indicators {
    bottom: 5px;
  }

  /deep/.van-swipe__indicator {
    opacity: .6;
  }

  /deep/.van-swipe__indicator--active {
    opacity: 1;
  }

  .title {
    width: 100%;
    height: 200px;
    position: relative;

  }

  .title_rr {
    position: absolute;
    top: 20px;
    right: 0;
    width: 50px;

    &>div {
      color: #fff;
      text-align: center;
      margin-bottom: 14px;

      &>img {
        width: 20px;
      }

      &>p {
        font-size: 14px;
      }
    }
  }

  .title_txt {
    position: absolute;
    bottom: 10px;
    left: 15px;
    color: #fff;

    &>h4 {
      font-size: 16px;
    }

    &>p {
      margin-top: 5px;
      font-size: 14px;
    }
  }

  .txtBox {
    margin: 10px 0 15px;
    width: 100%;
    min-height: 160px;
    max-height: 200px;
    overflow-y: auto;
    background-image: url('../../assets/img/goods/txtBac.png');
    background-size: 100% 100%;
    padding: 20px 8px 10px;

    .txtName {
      font-size: 16px;
      font-weight: 700;
      height: 20px;
      line-height: 20px;
      padding-left: 30px;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ecb1b8;
      }
    }

    &>P {
      padding: 0 15px;
      color: #252525;
      font-size: 14px;
      line-height: 22px;
      margin-top: 15px;
    }
  }

  .skipBtnBox {
    margin: 20px 0 0;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;

    .skipRow {
      width: 25%;
      text-align: center;
      margin-bottom: 24px;

      &>img {
        width: 40px;
      }

      &>p {
        color: #535353;
        font-size: 14px;
      }
    }
  }

  .txtBox {
    .txt2Row {
      padding: 0 15px;
      display: flex;
      margin-bottom: 8px;

      .txt2RowLL {
        width: 80px;
        font-size: 14px;
        font-weight: 700;
        color: #535353;
      }

      .txt2RowRR {
        font-size: 14px;
        color: #2D2D2D;
        width: calc(100% - 80px);
      }
    }
  }

  .videoBox {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    height: 180px;

    .videoShade {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background: url('../../assets/img/goods/videoPlay.png') center no-repeat;
      // background-color: rgba(33,81,144,.8);
      background-size: 50px 50px;
    }

    video {
      width: 100%;
      height: 100%;
    }
  }

  .IntroduceBox {
    width: 100%;
    height: 200px;
  }

  .IntroduceTxt {
    margin: 24px 0 15px;
    padding: 0 5px;
    font-size: 14px;
    color: #535353;
    line-height: 24px;

    &>p {
      margin-bottom: 20px;
    }
  }

  .noTxt{
    text-align: center;
    font-size: 14px;
    color: #C3C3C3;
  }
}
</style>