<template>
  <div class="home">
    <div class="tieshi" v-if="tieshi">
      <van-icon @click="tieshi = false" name="clear" />
      <router-link to="/Tips">
        <img src="../assets/ts_icon.png" alt="" />
      </router-link>
    </div>
    <div class="swipe">
      <img class="logo" src="../assets/logo.png" alt="logo" />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="swipeImgs">
        <van-swipe-item v-for="(image, index) in swipeImgs" :key="index">
          <img :src="image.imgUrl" @click="goBannerDetail(index)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <van-search v-model="searchValue" placeholder="搜索馆关键字、活动、研学旅行" shape="round" @search="onSearch()" />
      <div class="type_box">
        <div @click="handleCourseMore()">
          <img src="@/assets/service/homeicon1.png" alt="" />
          <p>研学课程</p>
        </div>
        <div @click="handleBaseMore()">
          <img src="@/assets/service/homeicon2.png" alt="" />
          <p>研学基地</p>
        </div>
        <div @click="handleHot()">
          <img src="@/assets/service/homeicon3.png" alt="" />
          <p>热门榜单</p>
        </div>
        <div @click="handleNewMore()">
          <img src="@/assets/service/homeicon4.png" alt="" />
          <p>官方资讯</p>
        </div>
        <div @click="handleTeacher()">
          <img src="@/assets/service/homeicon5.png" alt="" />
          <p>研学导师</p>
        </div>
      </div>
      <div class="infomation_box">
        <img class="news" src="@/assets/service/news.png" @click="handleNewMore()" alt="" />
        <div class="line"></div>
        <van-swipe vertical class="new-swipe" :autoplay="5000" :show-indicators="false">
          <van-swipe-item v-for="(item, index) in NewList" :key="index">
            <p class="new_item" @click="handleNewDetail(item)">{{ item.title }}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 精选课程 -->
      <div class="qxy_box">
        <div class="qyx_title">
          <div class="title">精选课程</div>
          <div @click="handleCourseMore()">
            <span class="more">更多</span>
            <van-icon class="more_icon" name="arrow" />
          </div>
        </div>
        <CourseList v-if="!loadingCourse" :list="CustomerCourseList"></CourseList>
        <van-empty v-else :image="require('@/assets/empty.png')" description="加载中..." />
      </div>
      <!-- 研学基地 -->
      <div class="qxy_box">
        <div class="qyx_title">
          <div class="title">研选基地</div>
          <div @click="handleBaseMore()">
            <span class="more">更多</span>
            <van-icon class="more_icon" name="arrow" />
          </div>
        </div>
        <van-tabs v-model="provinceActive" :ellipsis="false" ref="tabs" color="#4092FF" @change="provinceTabChange">
          <van-tab :title="item.label" v-for="(item, index) in provinceTabList" :key="index"> </van-tab>
        </van-tabs>
        <BaseList v-if="!loadingBase" :list="BaseList"></BaseList>
        <van-empty v-else :image="require('@/assets/empty.png')" description="加载中..." />
      </div>
      <!-- 研学游记 -->
      <div class="qxy_box">
        <div class="qyx_title">
          <div class="title">研学游记</div>
          <div @click="handleStoryMore()">
            <span class="more">更多</span>
            <van-icon class="more_icon" name="arrow" />
          </div>
        </div>
        <StoryList v-if="!loadingStory" :list="StoryList"></StoryList>
        <van-empty v-else :image="require('@/assets/empty.png')" description="加载中..." />
      </div>
      <Tabbar active="service"></Tabbar>
      <div :is="background"></div>
    </div>
  </div>
</template>

<script>
import CourseList from '@/views/Service/component/c_CourseList.vue'
import BaseList from '@/views/Service/component/c_BaseList.vue'
import StoryList from '@/views/GrowUp/c_StoryList.vue'
import Tabbar from '@/components/c_Tabbar.vue'
import Background from '../components/Background.vue'
import AllLoveGo from '../components/AllLoveGo.vue'
import './home.scss'
export default {
  components: {
    CourseList,
    BaseList,
    StoryList,
    Tabbar,
    Background,
    AllLoveGo,
  },
  data() {
    return {
      tieshi: true,
      navActive: 1,
      swipeImgs: '',
      StudyBaseList: '',
      AreaList: [],
      areaActive: 0,
      recommendList: [],
      recommendPage: 1,
      recommendCount: 0,
      CourseTypeList: '',
      tabActive: 0,
      tabBodyList: [],
      tabBodyPage: 1,
      tabBodyCount: 0,
      background: '',
      selectCity: false,
      cityList: [],

      userInfo: '',
      searchValue: '',
      loadingCourse: true,
      loadingBase: true,
      loadingStory: true,
      NewList: [], //资讯列表
      CustomerCourseList: [], //精选活动
      BaseList: [], //基地列表
      StoryList: [], //游记列表
      provinceTabList: [
        { label: '推荐', text: '', value: 0, id: '' },
        { label: '越城', text: '越城区', value: 2, id: '' },
        { label: '柯桥', text: '柯桥区', value: 1, id: '' },
        { label: '上虞', text: '上虞区', value: 4, id: '' },
        { label: '诸暨', text: '诸暨区', value: 3, id: '' },
        { label: '嵊州', text: '嵊州区', value: 5, id: '' },
        { label: '新昌', text: '新昌区', value: 5, id: '' },
      ],
      provinceActive: 0,
    }
  },
  mounted() {
    sessionStorage.setItem('prePage', 'Home')
    let openId = sessionStorage.getItem('openId')
    if (process.env.NODE_ENV === 'production' && this.common.isWeiXin()) {
      if (!openId) {
        this.$router.push({ name: 'Authorize' })
        return
      }
      this.unionId = sessionStorage.getItem('unionId')
      this.getUserInfo()
    } else {
      this.unionId = this.TestUnionId
      this.$nextTick(() => {
        this.getUserInfo()
      })
    }
    this.GetNewList()
    this.GetBannerList()
    this.getCustomerCourseList() //精选活动
    this.GetBaseList()
  },
  methods: {
    // 获取资讯
    GetNewList() {
      this.yxAxios.post(`${this.proxyUrl}/manage/info/content/listWithNoContent`, { pageNum: 1, pageSize: 5 }).then((res) => {
        let NewList = res.data.rows
        console.log('资讯列表：', NewList)

        this.NewList = NewList
      })
    },
    // 精选课程
    getCustomerCourseList() {
      this.yxAxios
        .post(`${this.yanxueUrl}/api/SchoolManage/SchoolCourseListV2`, {
          labelIdList: [],
          ageType: 0, //适应对象
          days: 0, //线路天数
          isSelfSupport: '', //是否支持定制
          provinceName: '', //省份
          cityName: '', //城市
          // areaName: areaName, //区
          startPrice: -1,
          endPrice: -1,
          stype: 1,
          pageIndex: 1,
          pageSize: 4,
        })
        .then((res) => {
          let CustomerCourseList = res.data.data.data
          console.log('精选课程:', CustomerCourseList)
          for (let i in CustomerCourseList) {
            CustomerCourseList[i].course_labels = CustomerCourseList[i].course_labels?.split(',')
            if (CustomerCourseList[i].startDate) {
              CustomerCourseList[i].week = this.formatWeek(this.Moment(CustomerCourseList[i].startDate).format('d'))
              CustomerCourseList[i].startDate = this.Moment(CustomerCourseList[i].startDate).format('YYYY.M.D')
              CustomerCourseList[i].endDate = this.Moment(CustomerCourseList[i].endDate).format('YYYY.M.D')
            }
          }
          this.CustomerCourseList = CustomerCourseList
          this.loadingCourse = false
        })
    },
    // 获取研学基地
    GetBaseList() {
      this.yxAxios
        .post(`${this.yanxueUrl}/api/SchoolManage/SchoolStudyBaseList`, {
          provinceName: '浙江省',
          cityName: '绍兴市',
          areaName: this.provinceTabList[this.provinceActive].text,
          levelName: '',
          type: 0,
          StartPeopleCount: '-1',
          EndPeopleCount: '-1',
          stype: 0,
          pageIndex: 1,
          pageSize: 6,
        })
        .then((res) => {
          let BaseList = res.data.data.data
          console.log('基地列表：', BaseList)

          for (let i in BaseList) {
            BaseList[i].baseLabel = BaseList[i].baseLabel?.split(',')
          }
          this.BaseList = BaseList
          this.loadingBase = false
        })
    },

    // 改变地区
    provinceTabChange() {
      this.BaseList = []
      this.GetBaseList()
    },
    // 获取研学游记
    GetStoryList() {
      this.yxAxios.get(`${this.yanxueUrl}/api/StudiesWap/GetMyStoryList?pageIndex=1&pageSize=6`).then((res) => {
        let StoryList = res.data.data.items
        console.log('游记列表：', StoryList)

        this.StoryList = StoryList
        this.loadingStory = false
      })
    },

    handleNewDetail(item) {
      if (item.linkUrl) {
        this.yxAxios.post(`${this.proxyUrl}/manage/info/content/addReadNum`, { id: item.id }).then((res) => {
          if (res.data.code == 200) {
            location.href = item.linkUrl
          } else {
            this.$toast.fail(res.data.message)
          }
        })
      } else {
        this.$router.push({ name: 'ArticleDetail', query: { id: item.id } })
      }
    },
    // 点击研学导师
    handleTeacher() {
      this.$router.push({ name: 'Teacher' })
    },
    // 热门榜单
    handleHot() {
      this.$router.push({ name: 'RankingList' })
    },
    // 点击资讯更多
    handleNewMore() {
      this.$router.push({ name: 'Article' })
    },
    // 点击精选课程更多
    handleCourseMore() {
      this.$router.push({ name: 'SelectionCourse' })
    },
    // 点击研学基地更多
    handleBaseMore() {
      this.$router.push({ name: 'SelectionBase' })
    },
    // 点击研学游记更多
    handleStoryMore() {
      this.$router.push({ name: 'StoryList' })
    },
    goBannerDetail(index) {
      var t = this.swipeImgs[index].type
      if (t == 1) {
        window.location.href = this.swipeImgs[index].linkUrl
      } else {
        this.$router.push({
          path: '/BannerDetail',
          query: { id: this.swipeImgs[index].id },
        })
      }
    },

    GetBannerList() {
      var that = this
      this.http
        .GetBannerList({
          city: this.projectCity,
        })
        .then(function (res) {
          if (res.status == 1) {
            that.swipeImgs = res.data
          }
        })
    },
    onSearch() {
      if (this.searchValue != '') {
        this.$router.push({ name: 'SearchResult', query: { search: this.searchValue } })
      } else {
        this.$toast('请输入搜索内容')
      }
    },
    // 获取用户信息
    getUserInfo() {
      let userInfo = sessionStorage.getItem('userInfo')
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)

        this.showData = true
        this.GetStoryList()
      } else {
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true,
        })
        this.yxAxios.get(`${this.proxyUrl}/api/wx/wx1305e88d2bc74073/getUserInfo?unionId=${this.unionId}`).then((res) => {
          this.$toast.clear()
          if (res.data.data) {
            this.showData = true
            this.userInfo = res.data.data
            this.GetStoryList()
            sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
          } else {
            console.log('getUserInfo失败')
            this.showData = true
          }
        })
      }
    },
    formatWeek(week) {
      return week == 1
        ? '周一'
        : week == 2
        ? '周二'
        : week == 3
        ? '周三'
        : week == 4
        ? '周四'
        : week == 5
        ? '周五'
        : week == 6
        ? '周六'
        : week == 0
        ? '周日'
        : ''
    },
  },
}
</script>
<style lang="stylus" scoped>
.bottomText {
  text-align: center;
  font-size: 1.2rem;
  color: #ccc;

  p {
    margin: 0;
  }
}

.home {
.tieshi{
			position: fixed;
			right: 20px;
			bottom: 25%;
			z-index: 1000;
			padding: 20px 20px 0 0;
			i{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 3.6rem;
				z-index: 100;
				color: #c2c2c2;
			}
			img{
				width :160px;
			}
		}
  .swipe {
    position: relative;

    .logo {
      width: 25%;
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 100;
    }

    .scan {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 100;
      color: white;
      font-size: 2.6rem;

      .tishi {
        position: absolute;
        left: -90px;
        bottom: -30px;
        width: 112px;
      }
    }

    img {
      width: 100%;
    }
  }


}
</style>