<template>
  <view
    class="scenic_warp"
    :class="showNotice == false ? 'scenic_warp' : 'scenic_warp active'"
  >
    <!-- 轮播图 -->
    <view class="mmd_scol">
      <view v-if="!showPic" class="video-box">
        <!-- :poster="info.videopath" 视频封面 -->
        <video
          id="myVideo"
          :src="videoSrc"
          @error="videoErrorCallback"
          :controls="false"
        ></video>
      </view>
      <view class="uni-margin-wrap" v-if="showPic">
        <swiper
          class="swiper_jqu"
          :indicator-dots="indicatorDots_sce"
          :autoplay="autoplay_sce"
          :interval="interval_sce"
          :duration="duration_sce"
        >
          <swiper-item v-for="(item, index) in pic_list" :key="index">
            <view class="">
              <image :src="item" mode="aspectFill" class="swiper_tup br_radius"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="picVdeo">
        <view
          :class="['tab-btn', showPic == false ? 'curr' : '']"
          @click="showPic = false"
          >视频</view
        >
        <view :class="['tab-btn', showPic == true ? 'curr' : '']" @click="showPic = true"
          >图片</view
        >
      </view>
      <view class="glass-container"></view>
    </view>

    <view class="info-card">
      <view class="cur-input">
        <view class="senice-name-box">
          <view class="senice-name">
            {{ info.sname }}
          </view>
          <view class="dl_1">
            <text class="sp-blue">{{ info.slevel }}</text>
          </view>
        </view>
        <view class="pub-right" @click="goJianJie"
          >简介攻略<uni-icons type="right" size="13"></uni-icons
        ></view>
      </view>
      <view class="senice-charac" v-if="info.charac != null">
        <view class="border sp-default" v-for="(item, index) in info.charac"
          >{{ item }}
        </view>
      </view>
      <view class="secdt_adr dly_flex">
        <text class="w_adr">开放时间</text>
        <text class="cot_adr">{{ info.businesstime }}</text>
      </view>
      <view class="dly_flex_c secdt_tck mt_1">
        <view class="sec_name_unit">
          <text class="cot_adr" style="margin-right: 20rpx">{{ info.saddress }}</text>
        </view>
        <view class="agn_right sec_whe_unit"
          ><button class="btn_com btn_daoh" @click="daohang">导航</button></view
        >
      </view>
    </view>
    <!-- 门票 -->
    <view class="ticket-list-box mode_com mt_1">
      <view
        class="m-ticket-sort"
        v-for="items in ticketList"
        v-show="items.ticketList.length > 0"
      >
        <view class="m-sort-name">{{ items.sortName }}</view>
        <view class="ticket-item" v-for="item in items.ticketList">
          <view class="ticket-name">
            <span>{{ item.ticketname }}</span>
            <!-- <span class="ticket-type"></span> -->
          </view>
          <!-- <view class="ticket-tag"></view> -->
          <view class="ticket-tips">
            <view class="left">
              查看购买须知<uni-icons color="#FF7F00" type="right" size="12"></uni-icons>
            </view>
            <view class="ticket-price"
              >{{ item.settlementPrice | money }} <span class="m-danwei">元</span></view
            >
          </view>
          <view class="btn-box">
            <view class="m-btn" hover-class="m-btn-hover" @click="bookIt(item)"
              >立即预定</view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 攻略 -->
    <view class="mode_com mt_1 gl" v-if="wanleList.length > 0 && wanleList != undefined">
      <text class="tit_com">附近玩乐</text>
      <text v-if="wanleList.length == 0 || wanleList == undefined" class="mssj_adr"
        >暂无数据</text
      >
      <view class="category-content">
        <view class="product-item" v-for="(p_item, p_index) in wanleList">
          <image class="product-img" :src="p_item.thumb"></image>
          <view class="m-content">
            <text class="product-title1">{{ p_item.cname }}</text>
            <text class="product-title m-blue border blue-border">{{
              p_item.slevel
            }}</text>
            <text class="product-title">{{ p_item.address }}</text>
          </view>
        </view>
      </view>
    </view>
    <f-login></f-login>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import uniRate from "@/components/uni-rate/uni-rate2.vue";
import uParse from "@/components/gaoyia-parse/parse.vue";
import aes from "@/common/aes.js";
export default {
  components: {
    uniRate,
    uParse,
    uniIcons,
  },
  onLoad(options) {
    var that = this;
    this.$util.getNetworkType(
      function (res) {
        if (res.networkType === "none") {
          uni.showToast({
            title: that.$param.netMsg,
            icon: "none",
            duration: 2000,
          });
          that.netType = false;
        }
      },
      function () {
        uni.showToast({
          title: that.$param.netMsg,
          icon: "none",
          duration: 2000,
        });
        that.netType = false;
      }
    );
    if (!that.netType) {
      return;
    }
    this.$util.hideLoadingByTime();
    let oMeta;

    if (typeof document !== "undefined") {
      oMeta = document.createElement("meta");
      oMeta.httpEquiv = "Cache-Control";
      oMeta.content = "no-cache, no-store, must-revalidate";
      document.getElementsByTagName("head")[0].appendChild(oMeta);
    } else {
      // 微信小程序环境下的替代逻辑
      // 例如使用微信小程序的 API
      console.log("Running in WeChat Mini Program environment");
    }

    that.$util.saveOperatorLog(that, "SCENIC", options.guid);
    //正常进入详情

    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    this.guid = options.guid;
    if (options.list != "" && options.list != null) {
      const arr = JSON.parse(options.list).filter((item) => item.cid != this.guid);
      if (arr.length <= 2) {
        this.wanleList = arr;
      } else {
        this.wanleList = arr.slice(0, 2);
      }
    }
    this.detailInfo(options.guid);
    this.getIsShow();
    // #ifdef H5

    if (this.$wechat.isWechat()) {
      this.isZb = false;
    }
    // #endif
  },
  onUnload() {},
  onShow() {
    this.param.page = 1;
  },
  onReady() {
    // setTimeout(function() {
    // 	uni.hideLoading();
    // }, 500);
    this.videoContext = uni.createVideoContext("myVideo");
  },
  data() {
    return {
      showPic: true,
      videoContext: "",
      wanleList: [],

      guid: "",
      indicatorDots_sce: false,
      zhankai: 0,
      shouqi: 1,
      open: 0,
      stop: 1,
      autoplay_sce: true,
      interval_sce: 4000,
      duration_sce: 500,
      pic_url: this.$config.ROOTPATH,
      rootPaht: this.$config.ROOTPATH,
      comments: [],
      pic_list: [],
      videoSrc: "",
      info: {},
      weather: {},
      listDatas: [],
      ticketList: [],
      ticketSortList: [],
      param: {
        page: 1,
        noData: !1,
        loading: !1,
        finished: !1,
      },
      peoplesnum: {},
      logo: "",
      soundlength: 0,
      AudioContext: uni.createInnerAudioContext(),
      isShow: true,
      weatherImgUrl: "",
      flag: true,
      total: "00:00",
      current: "--",
      seektime: 0,
      audioTime: 0,
      isZb: true,
      isShowBuy: "YES",

      // // 门票
      showNotice: false,
      markers: [],
      notice: "",
      ticketSellprice: "",
      ticketPrice: "",
      suitid: "",
      isspecial: "",
      isToDingDanType: false,
      tapDate: "",
      showSever: false,
      score: "", //评论分数 数据初始化
      showContact: false,
      sid: "",
      scenicDetail: {},
      isShowLink_st: "YES",
      isShowFlow: false,
      flowImg: "",
      flowState: "",
      flowStyle: "agn_center liu_txt amt_30",
      netType: true,
      scenicList: [],
    };
  },
  watch: {
    showPic: {
      handler: function (value) {
        if (value == true) {
          this.videoContext.stop();
        }
        console.log(this.videoContext);
      },
      deep: true,
    },
  },
  computed: {
    ...mapState(["PrimaryColor", "userInfo"]),
    freeSpecsButtonBackground() {
      return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
    },
  },
  methods: {
    bookIt(val) {
      this.judgeLogin((resa) => {
        const obj = {
          mobile: this.userInfo.phone,
          ticketId: val.id,
          tenantId: this.info.controlInfo.cyjcScenicId,
        };
        const tenantId = this.info.controlInfo.cyjcScenicId;
        console.log(
          this.info.controlInfo.cyjcScenicId,
          "this.info.controlInfo.cyjcScenicId"
        );
        if (val.buyticketlimit == 1) {
          const ticket = encodeURIComponent(JSON.stringify(val));
          uni.navigateTo({
            url:
              "/subPageC/bookTicket/bookTicket?ticket=" + ticket + "&tentId=" + tenantId,
          });
        } else {
          this.$Request
            .get(this.$config.isQuota, obj, null, null, false, false)
            .then((res) => {
              console.log(res, "是否有余票");
              if (res.data > 0) {
                const ticket = encodeURIComponent(JSON.stringify(val));
                uni.navigateTo({
                  url:
                    "/subPageC/bookTicket/bookTicket?ticket=" +
                    ticket +
                    "&maxNum=" +
                    res.data +
                    "&tentId=" +
                    tenantId,
                });
              } else {
                uni.showToast({
                  title: "超过购买上限",
                  icon: "none",
                });
              }
            });
        }
      });
    },
    //门票分类
    getTicketSortList(val) {
      this.$Request
        .get(this.$config.getTicketSortList, { tenantId: val }, null, null, false, false)
        .then((res) => {
          console.log(res, "门票分类");
          this.ticketSortList = res.data;
          this.getTicketList(val);
        });
    },
    //门票列表
    getTicketList(val) {
      this.$Request
        .get(
          this.$config.getTicketList,
          {
            tenantId: val,
          },
          null,
          null,
          false,
          false
        )
        .then((res) => {
          console.log(res, "门票");
          this.ticketList = res.data;
        });
    },
    //攻略简介
    goJianJie() {
      const obj = {
        playtime: this.info.playtime,
        smobile: this.info.smobile,
        tips: this.info.tips,
        sdescribe: this.info.sdescribe,
      };
      const str = JSON.stringify(obj);
      uni.navigateTo({
        url: "/subPageA/scenic/gonglve/gonglve?data=" + encodeURIComponent(str),
      });
    },

    getIsShow: function () {
      this.$Request.post(this.$config.getYbsjSysParam, {}).then((res) => {
        var d = res.data;
        this.isShowBuy = d.is_show_buy;
      });
    },
    detailInfo: function (guid) {
      /* var that = this;
        var data = {
          key: this.$param.userkey+'_scenic_' + guid
        };
        this.$Request.post(this.$config.getRedisData, data).then(res => {
          console.log("Redis景区")
          console.log(res);
          if(res.status == 200){
            //所有的数据
            var initData = res.data;
          }else{ */
      this.getScDetail(guid);
      /* 	}
        }); */
    },
    getScDetail: function (guid) {
      var data = {
        guid: guid,
        userkey: this.$param.userkey,
      };
      this.$Request.post(this.$config.scenicDetial, data).then((res) => {
        this.info = res.data;
        // this.tickeTlist = res.data.ticketlist;
        this.logo = this.$config.ROOTPATH + res.data.slogo;
        var pic_list = res.data.imgList;
        var videolist = res.data.videolist;

        if (pic_list != null) {
          for (var i = 0; i < pic_list.length; i++) {
            pic_list[i] = "" + this.pic_url + pic_list[i];
          }
        }

        if (videolist != null) {
          this.videoSrc = this.pic_url + videolist[0];
        }

        if (res.data.videopath != "" && res.data.videopath != null) {
          this.info.videopath = this.pic_url + res.data.videopath.split("#")[1];
        }

        this.pic_list = pic_list;
        if (
          res.data.controlInfo.cyjcScenicUuid != "" &&
          res.data.controlInfo.cyjcScenicUuid != null
        ) {
          //this.comment(res.data.controlInfo.cyjcScenicUuid);
          if (res.data.controlInfo.isPeopleFlow == "YES") {
            this.isShowFlow = true;
          }
        } else {
          this.isShow = false;
        }

        if (res.data.charac != null && res.data.charac != "") {
          if (res.data.charac.includes(",")) {
            this.info.charac = res.data.charac.split(",");
          } else {
            this.info.charac = [res.data.charac];
          }
        } else {
          this.info.charac = null;
        }
        this.getDuration(this.info.soundpath, res.data.sfunc);

        this.getTicketList(this.info.controlInfo.cyjcScenicId);
        uni.hideLoading();
      });
    },

    getDuration: function (soundpath, dur) {
      if (soundpath == "" || soundpath == null) {
        this.total = "--";
      } else {
        this.total = this.$util.secsToStr(Number(dur));
        this.AudioContext.autoplay = false;
        this.AudioContext.src = this.$config.ROOTPATH + soundpath;
        /* this.AudioContext.duration=Number(dur); */
      }
    },
    daohang() {
      uni.openLocation({
        latitude: Number(this.info.lat),
        longitude: Number(this.info.lng),
        name: this.info.sname,
        address: this.info.saddress,
        complete: function (result) {
          console.log(result);
        },
      });
      // #ifdef H5

      if (this.$wechat.isWechat()) {
        var mapParam = {
          latitude: this.info.lat,
          longitude: this.info.lng,
          scale: 18,
          name: this.info.sname,
          address: this.info.saddress,
        };
        this.$util.openLocation(mapParam);
        return;
      }
      window.location.href =
        "https://uri.amap.com/navigation?from=" +
        this.$param.clng +
        "," +
        this.$param.clat +
        ",我的位置&to=" +
        this.info.lng +
        "," +
        this.info.lat +
        "," +
        this.info.saddress +
        "&mode=walk&src=sjz_uniapp&callnative=1";
      // #endif
    },
    tel: function (tels) {
      uni.makePhoneCall({
        phoneNumber: tels, //仅为示例
      });
    },
    /**
     * 拨打客服电话 函数
     */
    getTel: function () {
      uni.makePhoneCall({
        phoneNumber: "0311-83886677",
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "/static/css/common.css";
@import "/subPageA/food/fooddetial/fooddetial.css";
@import "/subPageA/ceshiLive/destination.css";
@import url("/pages/index/index.css");
@import url("/subPageA/ceshiLive/scenicdetail.css");
@import url("/subPageA/scenic/scenicdetial/scenicdetial.css");

body {
  background: #f6f7fb;
}

.liu_hui {
  color: #cbcbcb !important;
}

.liu_green {
  color: #07b800 !important;
}

.liu_red {
  color: #ef0a0a !important;
}

.slider_sec {
  width: 450rpx;
  height: 100%;
}

.slider_sec slider {
  width: 95%;
  margin-left: 2%;
  margin-right: 0;
  margin-top: 10rpx;
  margin-bottom: 0;
}

/* 景区门票 */
.active {
  overflow: hidden;
  /* height: 100vh !important; */
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.scenic_warp {
  position: relative;

  .cur-input {
    color: #333;
  }

  .dl_1 {
    color: #333;
  }

  /* This was made with GlassGenerator.netlify.app */

  .glass-container {
    width: 100%;
    height: 100rpx;
    position: absolute;
    bottom: -70rpx;
    left: 0;
    z-index: 1;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 0px;
    backdrop-filter: blur(20px);
    background-image: linear-gradient(to bottom, transparent, #f5f5f5);
    border: 0px rgba(255, 255, 255, 0.4) solid;
    border-bottom: 0px rgba(40, 40, 40, 0.35) solid;
    border-right: 0px rgba(40, 40, 40, 0.35) solid;
  }

  .mmd_scol {
    position: relative;

    .picVdeo {
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 24rpx;
      display: flex;
      width: fit-content;
      position: absolute;
      bottom: 150rpx;
      left: 50rpx;
      z-index: 9;

      .tab-btn {
        transition: all ease-in-out 0.3s;
        width: fit-content;
        padding: 5rpx 20rpx;
        color: #fff;
        background-color: transparent;
        font-size: 24rpx;
      }

      .tab-btn.curr {
        background-color: #fff;
        border-radius: 24rpx;
        color: #333;
      }
    }
  }

  .video-box {
    width: 100%;
    height: 540rpx;

    ::v-deep #myVideo {
      width: 100%;
      height: 100%;

      .uni-video-cover-duration {
        display: none;
      }
    }
  }

  .info-card {
    position: relative;
    z-index: 9;
    top: -80rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 0 24rpx;
    padding: 40rpx 25rpx;

    .cur-input {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .senice-name-box {
        display: flex;
        align-items: center;
        justify-content: start;

        .senice-name {
          font-family: Source Han Sans SC;
          font-weight: bold;
          font-size: 44rpx;
          color: #1b1b1b;
          margin-right: 20rpx;
        }
      }
    }

    .secdt_adr {
      margin-top: 12rpx;

      .w_adr {
        width: fit-content;
        margin-right: 20rpx;
        color: #1b1b1b;
      }
    }

    .secdt_tck {
      margin-top: 27rpx;
      background-color: #fff;
      padding: 0;
      justify-content: space-between;
      align-items: center;

      .agn_right {
        width: fit-content;

        .btn_daoh {
          background: #f8f9fd;
          border-radius: 28rpx;
          color: #333;
          position: relative;
          padding-left: 40rpx;
        }

        .btn_daoh::before {
          content: "";
          width: 20rpx;
          height: 20rpx;
          position: absolute;
          left: 10rpx;
          top: 50%;
          transform: translateY(-50%);
          background-image: url("../../animg/daohang_ico.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }
      }
    }
  }

  .uni-margin-wrap {
    .swiper_jqu {
      height: 540rpx;

      .swiper_tup {
        height: 540rpx;
        border-radius: 0;
      }
    }
  }
}

.uni-margin-wrap {
  width: 100%;
}

/* 景区列表 图片背景色块填充*/
.category-content .product-item:nth-child(4n) .product-img {
  background-color: #f2dedc !important;
}

.category-content .product-item:nth-child(4n + 1) .product-img {
  background-color: #e6f2dc !important;
}

.category-content .product-item:nth-child(4n + 2) .product-img {
  background-color: #dcf0f2 !important;
}

.category-content .product-item:nth-child(4n + 3) .product-img {
  background-color: #e9dcf2 !important;
}

.category-content {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  padding-top: 30rpx;
  margin: 0 20rpx;

  justify-content: space-between;

  .product-item {
    width: 100%;
    display: flex;
    justify-content: start;

    margin-bottom: 30rpx;

    .product-img {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 10rpx;
      border-radius: 14rpx;
    }

    .m-content {
      margin-left: 15rpx;
      display: flex;
      flex-direction: column;

      .product-title1 {
        font-size: 32rpx;
        padding-bottom: 12rpx;
        padding-top: 10rpx;
      }

      .product-title {
        width: fit-content;
        font-size: 24rpx;
        padding: 3rpx 10rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}

.gl {
  margin-top: -50rpx;
  background-color: #fff;
}

.senice-charac {
  display: flex;
  flex-wrap: wrap;

  .border {
    margin-right: 10rpx;
  }
}

.ticket-list-box {
  margin-top: -80rpx;
  padding-top: 40rpx;
  padding: 50rpx 0;

  .m-ticket-sort {
    padding: 0 25rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    padding-bottom: 30rpx;

    .m-sort-name {
      font-family: Source Han Sans SC;
      font-weight: bold;
      font-size: 40rpx;
      color: #1b1b1b;
      margin-bottom: 35rpx;
      padding: 50rpx 20rpx 0;
    }

    .ticket-item {
      background: #f8f9fd;
      border-radius: 20rpx;
      padding: 40rpx;
      margin-bottom: 25rpx;

      .ticket-name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #1b1b1b;

        .ticket-type {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #666666;
          padding: 3rpx 5rpx;
          border-radius: 8rpx;
          border: 1px solid #e9e9e9;
        }
      }

      .ticket-tag {
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #0983ff;
        margin-bottom: 20rpx;
      }

      .ticket-tips {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;

        .left {
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ff7f00;
        }

        .ticket-price {
          font-family: Source Han Sans SC;
          font-weight: bold;
          font-size: 38rpx;
          color: #ff404c;

          .m-danwei {
            font-size: 32rpx;
          }
        }
      }

      .btn-box {
        display: flex;
        justify-content: flex-end;

        .m-btn {
          width: 160rpx;
          height: 64rpx;
          background: linear-gradient(-90deg, #0983ff, #57abff);
          border-radius: 32rpx;
          text-align: center;
          line-height: 64rpx;
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #ffffff;
        }

        .m-btn-hover {
          background: linear-gradient(-90deg, #57abff, #0983ff);
        }
      }
    }
  }
}
</style>
