<template>
  <div class="baseDetail">
    <div class="videoBox">
      <van-swipe class="my-swipe" indicator-color="white" v-if="detailData.coverList && detailData.coverList.length > 0">
        <van-swipe-item v-for="n in detailData.coverList" :key="n.id">
          <video
            v-if="n.cover_url.indexOf('.mp4') > -1"
            id="video"
            :src="n.cover_url"
            poster=""
            controls="controls"
            windowlessvideo="true"
            playsinline="true"
            webkit-playsinline="true"
            x5-playsinline="true"
            x-webkit-airplay="allow"
            width="100%"
            height="260px"
            type="video/mp4"
          ></video>
          <img v-if="n.cover_url.indexOf('.mp4') == -1" :src="n.cover_url" />
        </van-swipe-item>
      </van-swipe>
      <img v-else src="../assets/def.png" alt="" />
    </div>
    <div class="content">
      <div class="title">
        <h3>{{ detailData.baseName }}</h3>
        <div class="rightCorse">
          <p>
            <b>{{ detailData.baseScore == 0 ? '0.0' : detailData.baseScore }}</b
            ><b>分</b>
          </p>
          <p><van-rate v-model="detailData.baseScore" readonly allow-half void-icon="star" void-color="#eee" /></p>
        </div>
      </div>
      <div class="labels oh">
        <div class="fl">
          <template>
            <span v-for="(n, i) in detailData.baseLabels" :key="i">{{ n }}</span>
          </template>
        </div>
        <div class="fr">
          <span>{{ detailData.evaluationCount }}条评论</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="popularity">
        <van-icon name="medal" />
        <span>基地人气榜第{{ detailData.rank }}名</span>
        <van-icon name="arrow" />
      </div>
      <div class="area">
        <van-icon name="location" />
        <span>{{ getNull(detailData.province) + getNull(detailData.city) + getNull(detailData.area) + getNull(detailData.address) }}</span>
        <van-icon name="arrow" />
      </div>
      <div class="phone">
        <van-icon name="phone" />
        <template>
          <span v-for="(n, i) in detailData.mobiles" :key="i"
            ><a :href="'tel:' + n">{{ n }}</a></span
          >
        </template>
      </div>
      <hr />
      <van-tabs v-model="tabActive" @click="tabClick">
        <van-tab title="基地介绍" name="jdjs"></van-tab>
        <van-tab title="课程一览" name="kcyl"></van-tab>
        <van-tab title="当地故事" name="ddgs"></van-tab>
      </van-tabs>
      <h3 class="positionTitle" id="jdjs"><b>基地介绍</b><u></u></h3>
      <div class="cont" v-html="detailData.detail"></div>
      <h3 class="positionTitle" id="kcyl"><b>课程一览</b><u></u></h3>
      <ul class="classList">
        <li v-for="(n, i) in detailData.courseList" :key="i" @click="goCourseDetail(n.id)">
          <img :src="n.coverUrl" alt="" />
          <h3>{{ n.course_name }}</h3>
          <p>{{ n.course_info }}</p>
        </li>
      </ul>
      <h3 class="positionTitle" id="ddgs"><b>当地故事</b><u></u></h3>
      <div class="gushi">
        <div class="gslabel">
          <span>全部</span>
          <span>最新</span>
          <span>优质故事</span>
        </div>
        <ul>
          <li v-for="(n, i) in storyList" :key="i">
            <img :src="n.coverUrl" alt="" />
            <h3>{{ n.title }}</h3>
            <div>
              <img :src="n.faceUrl ? n.faceUrl : require('../assets/boy.png')" alt="" />
              <span class="name">{{ n.name }}</span>
              <div class="zan">
                <van-icon name="good-job-o" />
                <span>{{ n.likeCount }}</span>
              </div>
            </div>
          </li>
          <p v-if="storyList.length == storyCount" class="noMove">没有更多了</p>
          <van-empty
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无故事"
            v-if="storyList.length == 0"
          />
        </ul>
      </div>
    </div>
    <div class="Collection oh" v-if="isWeb">
      <div class="box">
        <div class="icon">
          <p><van-icon name="service-o" /></p>
          <p>电话咨询</p>
        </div>
      </div>
      <div class="box">
        <span @click="addCollect"
          ><van-icon
            :style="detailData.isCollect == 0 ? 'color:#fff;' : 'color:red;'"
            :name="detailData.isCollect == 0 ? 'like-o' : 'like'"
          /><b>{{ detailData.isCollect == 0 ? '加入收藏' : '已收藏' }}</b></span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: '',
      id: '',
      starsValue: 3.5,
      tabActive: 0,
      detailData: '',
      storyCount: '',
      storyList: [],
      storyPage: 1,
      isWeb: true,
    }
  },
  created() {
    if (window.innerWidth > 900) {
      this.isWeb = false
    }
  },
  mounted() {
    localStorage.setItem('prePage', 'BaseDetail')
    var id = this.$route.query.id
    if (id) {
      this.id = id
    }
      this.GetStudyBaseDetail()
  },

  methods: {

    goCourseDetail(id) {
      this.$router.push({ path: '/CourseDetail', query: { id: id } })
    },
    handleScroll() {
      var that = this //变量scrollTop是滚动条滚动时，距离顶部的距离
      //window.onscroll = function(){
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        if (that.storyList.length < that.storyCount) {
          storyPage++
          that.GetStoryList(storyPage, detailData.city)
        } //写后台加载数据的函数 //console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
      } // }
    },
    addCollect() {
      if (this.detailData.isCollect == 0) {
        var that = this
        this.$toast.loading({
          message: '请求中...',
        })
        this.http
          .AddMyCollect({
            baseId: this.detailData.id,
            userId: this.userInfo.centerNo,
          })
          .then(function (res) {
            that.$toast.clear()
            if (res.status == 1) {
              that.$toast.success('收藏成功')
              that.detailData.isCollect = 1
            }
          })
      }
    },
    tabClick(name, title) {
      // 找到锚点
      let anchorElement = document.getElementById(name)
      // 如果对应id的锚点存在，就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView()
      }
    },
    GetStudyBaseDetail(id) {
      var that = this
      this.http
        .GetStudyBaseDetail({
          id: this.id,
          userId: this.userInfo.centerNo,
          cs: this.projectCity,
        })
        .then(function (res) {
          if (res.status == 1) {
            var mobiles = res.data.mobiles
            if (mobiles) {
              mobiles = mobiles.split(',')
              res.data.mobiles = mobiles
            } else {
              res.data.mobiles = []
            }
            var baseLabels = res.data.baseLabels
            if (baseLabels) {
              baseLabels = baseLabels.split(',')
              res.data.baseLabels = baseLabels
            } else {
              res.data.baseLabels = []
            }
            that.detailData = res.data
            that.GetStoryList(1, res.data.city)
          }
        })
    },
    GetStoryList(page, city) {
      var that = this
      this.http
        .GetStoryList({
          pageIndex: page,
          city: city,
          pageSize: 6,
        })
        .then(function (res) {
          if (res.status == 1) {
            that.storyCount = res.data.count
            that.storyList = that.storyList.concat(res.data.items)
          }
        })
    },
    getNull(t) {
      return t ? t : ''
    },
  },
}
</script>

<style lang="stylus" scoped>
.videoBox{
	img{
		width 100%
	}
}
.noMove{
	text-align center
	padding 20px 0
	color #ccc
}
.content{
	padding 40px
	box-sizing border-box
	.title{
		padding-right 160px
		box-sizing border-box
		position relative
		h3{
			font-size 2rem
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin 0
			min-height 90px
		}
		.rightCorse{
			position absolute
			text-align center
			right 0
			top 0
			p{
				margin 0
			}
			p:first-child{
				color #0EDBA1
				font-size 1.8rem
				b{
					display inline-block
					vertical-align middle
				}
				b:first-child{
					font-size 2.4rem
				}
			}
			p:last-child{
				font-size 1.2rem !important
			}

		}
	}
	.labels{
		margin-top 20px
		.fl{
			span{
				display inline-block
				margin-right 10px
				background-color #D0F8ED
				border-radius 6px
				padding 6px 10px
				color #00C08A
			}
		}
		.fr{
			color #0EDBA1
			padding-right 10px
		}
	}
	.popularity{
		margin-top 20px
		padding 10px 40px
		background-color #FBF7F1
		box-sizing border-box
		position relative
		color #B78E4E
		font-size 1.4rem
		border-radius 6px
		i{
			position absolute
			top 16px
		}
		i:first-child{
			left 10px
		}
		i:last-child{
			right 10px
		}
	}
	.area{
		margin-top 20px
		padding 10px 40px
		box-sizing border-box
		position relative
		font-size 1.4rem
		i{
			position absolute
			top 16px
		}
		i:first-child{
			left 10px
			color #06CB67
		}
		i:last-child{
			right 10px
		}
	}
	.phone{
		margin-top 20px
		padding 10px 40px
		box-sizing border-box
		position relative
		font-size 1.4rem
		min-height 40px
		span{
			margin-right 20px
			a{
				color #000000
			}
		}
		i{
			position absolute
			top 16px
		}
		i:first-child{
			left 10px
			color #41A8FF
		}
	}
	hr{
		height 20px
		background-color #EEEEEE
		border none
	}
	.cont{
		padding 40px 0
		font-size 1.4rem
		color #222222
		width 100%
		img {
			width 100% !important
		}
	}
	.classList{
		li{
			margin-top 40px
			padding-left 290px
			position relative
			min-height 270px
			img{
				width 270px
				height 270px
				position absolute
				left 0
				top 0
				border-radius 10px
			}
			h3{
				font-size 1.8rem
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin 0
			}
			p{
				margin 0
				margin-top 10px
				font-size 1.4rem
				color #919191
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 25;
				overflow: hidden;
			}
		}
	}
	.gushi{
		.gslabel{
			margin-top 40px
			span{
				display inline-block
				margin-right 20px
				padding 6px 10px
				background-color #D2FCED
				font-size 1.2rem
				border-radius 6px
			}
		}
		ul{
			overflow hidden
			li{
				float left
				width 50%
				margin-top 40px
				box-sizing border-box
				img{
					width 100%
					border-radius 20px
				}
				h3{
					font-size 1.6rem
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin 0
				}
				div{
					position relative
					padding 10px 0
					img{
						width 40px
						height 40px
						border-radius 50%
						display inline-block
						vertical-align middle
						margin-right 10px
					}
					span.name{
						display inline-block
						vertical-align middle
						color #7E7F81
						font-size 1.2rem
					}
					div.zan{
						position absolute
						right 20px
						bottom 6px
						font-size 1.2rem
						color #7E7F81
						i{
							font-size 1.4rem
							vertical-align top
						}
						span{
							display inline-block
							vertical-align top
						}
					}
				}
			}
			li:nth-child(2n){
				padding-left 20px
			}
			li:nth-child(2n+1){
				padding-right 20px
			}
		}
	}
	.positionTitle{
		margin 0
		margin-top 60px
		font-size 2rem
		position relative
		b{
			position relative
			z-index 100
		}
		u{
			width 180px
			height 16px
			border-radius 100px
			background-image linear-gradient(to right,#3FCC95,#ffffff)
			position absolute
			bottom 0
			left 0
		}
	}
}
.Collection{
	background-color white
	position fixed
	bottom 0
	left 0
	width 100%
	padding 20px 0
	z-index 500
	.box:last-child{
		width 69%
	}
	.box{
		display inline-block
		vertical-align middle
		width 30%
		text-align center
		color #666666
		.icon{
			display inline-block
			width 49%
			text-align center
			font-size 1.2rem
			p{
				margin 0
			}
			i{
				font-size 2.4rem
				color #000000
				font-weight bold
			}
		}
		.icon.active{
			color #0CE39D
			i{
				color #0CE39D
			}
		}
		span{
			display inline-block
			padding 20px 40px
			width 80%
			border-radius 100px
			color white
			font-size 2rem
			background:linear-gradient(307deg,rgba(51,233,172,1) 0%,rgba(6,203,103,1) 100%);
			b{
				display inline-block
				vertical-align middle
				margin-left 20px
				color white
			}
			i{
				vertical-align middle
				font-size 2.2rem
				font-weight bold
			}
		}
	}
}
</style>