<template>
  <div class="foot">
    <div>
      <van-tabs v-model="tabValue" title-active-color="#000">
        <van-tab title="我的预约">
          <ul class="myWishList">
            <li v-for="n in WishList" :key="n.id">
              <h3>
                <img src="../assets/hoom.png" alt="" /> <b>{{ n.baseName }}</b>
              </h3>
              <van-swipe-cell v-for="(k, j) in n.courseList" :key="k.id">
                <div class="item">
                  <img :src="k.coverUrl ? k.coverUrl : require('@/assets/defCoure.jpg')" alt="" />
                  <h5>{{ k.course_name }}</h5>
                  <div class="spans">
                    <template v-for="(z, x) in k.course_labels ? k.course_labels.split(',') : []">
                      <span v-if="z" :key="j + '' + x">{{ z }}</span>
                    </template>
                  </div>
                  <p>“{{ k.course_info }}”</p>
                </div>
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" @click="DeleteMyWish(k.id)" />
                </template>
              </van-swipe-cell>
            </li>
          </ul>
          <van-empty
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无预约记录"
            v-if="WishList.length == 0"
          />
        </van-tab>
        <van-tab title="我的课程">
          <div class="myClassBox">
            <ul class="myClassList">
              <li v-for="(n, i) in CourseList" :key="i">
                <h1>
                  <span>{{ n.city }}</span>
                  <van-icon name="arrow" />
                </h1>
                <p class="subTitle">我在{{ n.city }}的研学之旅</p>
                <div v-for="k in n.baseList" :key="k.id">
                  <h3>
                    <img src="../assets/hoom.png" alt="" /> <b>{{ k.baseName }}</b>
                  </h3>
                  <!-- <van-swipe-cell> -->
                  <div class="item" v-for="z in k.courseList" :key="z.id">
                    <img class="icon" src="../assets/yidaka.png" alt="" />
                    <img :src="z.coverUrl ? z.coverUrl : require('@/assets/defCoure.jpg')" alt="" />
                    <h5>{{ z.course_name }}</h5>
                    <p>{{ z.intime.replace(/T/, ' ') }}</p>
                    <div>
                      <span v-if="z.isStory == 0" @click="ReleaseStory(z)">发布故事</span>
                      <span v-if="z.isStory == 1" class="over">已发布故事</span>
                      <span v-if="z.isEvaluation == 1" @click="goEvaluateDetail(z.id)">查看评价</span>
                      <span v-if="z.isEvaluation == 0" @click="ReleaseEvaluate(z)">评价</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <van-empty
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无课程记录"
            v-if="CourseList.length == 0"
          />
        </van-tab>
        <van-tab title="我的故事">
          <ul class="storyList" v-if="StoryList.length > 0">
            <li v-for="(n, i) in StoryList" :key="i">
              <div class="item">
                <van-icon @click="operation(n.id)" class="more" name="more-o" />
                <img :src="n.coverUrl" alt="" />
                <div class="box">
                  <h3>越剧小镇：戏剧之魅与生活之美</h3>
                  <p>2020年05月26日</p>
                </div>
                <div class="zan">
                  <van-icon name="good-job-o" />
                  <span>{{ 123 }}</span>
                </div>
              </div>
            </li>
          </ul>
          <van-empty
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无故事记录"
            v-if="StoryList.length == 0"
          />
        </van-tab>
      </van-tabs>
      <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" @select="onSelect" close-on-click-action />
    </div>
    <BottomNav :BottomNav="navActive"></BottomNav>
    <div :is="background"></div>
  </div>
</template>

<script>
import BottomNav from '../components/BottomNav.vue'
import Background from '../components/Background.vue'
export default {
  components: {
    BottomNav,
    Background,
  },
  data() {
    return {
      userInfo: '',
      navActive: 4,
      tabValue: 0,
      show: false,
      actions: [{ name: '删除故事', color: 'red' }, { name: '分享故事' }],
      background: '',
      WishList: [],
      CourseList: [],
      StoryList: [],
      StoryId: '',
    }
  },
  mounted() {
    localStorage.setItem('prePage', 'BaseDetail')
    var id = this.$route.query.tabId
    if (id) {
      this.tabValue = id
      localStorage.setItem('prePageQuery', JSON.stringify({ id: this.$route.query.id }))
    }
    let openid = localStorage.getItem('openId')
    let schoolNamesChoose = localStorage.getItem('schoolNamesChoose')
    if (schoolNamesChoose) {
      this.schoolNamesChoose = JSON.parse(schoolNamesChoose)
    }
    this.headImgUrl = localStorage.getItem('headImgUrl')
    this.nicknameUser = localStorage.getItem('nicknameUser')

    this.unionId = localStorage.getItem('unionId')
    this.getUserInfo()
  },
  methods: {
    initPage() {
      this.GetMyWishList()
      this.GetMyCourseList()
      this.GetMyStoryList()
    },
    operation(id) {
      this.show = true
      this.StoryId = id
    },
    onSelect(item) {
      this.show = false
      var that = this
      if (item.name == '删除故事') {
        this.$dialog
          .confirm({
            title: '提示',
            message: '是否删除该故事？',
          })
          .then(() => {
            that.DeleteMyStory(that.StoryId)
          })
          .catch(() => {
            // on cancel
          })
      }
      //Toast(item.name);
    },
    backgroundShow(text) {
      this.background = text
    },
    GetMyWishList() {
      var that = this
      this.$toast.loading({
        message: '请求中...',
      })
      this.http
        .GetMyWishList({
          userId: this.userInfo.centerNo,
          cs: this.projectCity,
        })
        .then(function (res) {
          that.$toast.clear()
          if (res.data.length > 0) {
            var baseLabels = res.data.course_labels
            if (baseLabels) {
              res.data.course_labels = baseLabels.split(',')
            } else {
              res.data.course_labels = []
            }
            that.WishList = res.data
          }
        })
    },
    DeleteMyWish(id) {
      var that = this
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除该心愿？',
        })
        .then(() => {
          this.$toast.loading({
            message: '请求中...',
          })
          this.http
            .DeleteMyWish({
              id: id,
            })
            .then(function (res) {
              that.$toast.clear()
              if (res.status == 1) {
                that.$toast.success('删除成功')
                that.GetMyWishList()
              }
            })
        })
        .catch(() => {
          // on cancel
        })
    },
    GetMyCourseList() {
      var that = this
      this.http
        .GetMyCourseList({
          userId: this.userInfo.centerNo,
          cs: this.projectCity,
        })
        .then(function (res) {
          if (res.data.length > 0) {
            that.CourseList = res.data
          }
        })
    },
    GetMyStoryList() {
      var that = this
      this.http
        .GetMyStoryList({
          userId: this.userInfo.centerNo,
          pageSize: 999,
          pageIndex: 1,
          cs: this.projectCity,
        })
        .then(function (res) {
          if (res.data.items.length > 0) {
            that.StoryList = res.data.items
          }
        })
    },
    DeleteMyStory(id) {
      var that = this
      this.$toast.loading({
        message: '请求中...',
      })
      this.http
        .DeleteMyStory({
          id: id,
        })
        .then(function (res) {
          that.$toast.clear()
          if (res.status == 1) {
            that.$toast.success('删除成功')
            that.GetMyStoryList()
          }
        })
    },
    ReleaseStory(data) {
      localStorage.setItem('YXNowCourse', JSON.stringify(data))
      this.$router.push({
        path: '/ReleaseStory',
      })
    },
    ReleaseEvaluate(data) {
      localStorage.setItem('YXNowCourse', JSON.stringify(data))
      this.$router.push({
        path: '/ReleaseEvaluate',
      })
    },
    goEvaluateDetail(id) {
      this.$router.push({
        path: '/EvaluateDetail',
        query: {
          id: id,
        },
      })
    },
    // 获取用户信息
    getUserInfo() {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      })
      this.yxAxios
        .get(`${this.baseUrl}/prod/api/wx/wx1305e88d2bc74073/getUserInfo?unionId=${localStorage.getItem('unionId')}`)
        .then((res) => {
          this.$toast.clear()
          if (res.data.code == 200) {
            let userInfo = res.data.data
            this.userInfo = userInfo
            this.initPage()
            localStorage.setItem('userInfo', JSON.stringify(userInfo))

            if (res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
              localStorage.setItem('schoolNames', JSON.stringify(res.data.data.schoolNames))
              this.$store.commit('changeSchool', res.data.data.schoolNames)
              if (!localStorage.getItem('schoolNamesChoose')) {
                localStorage.setItem('schoolNamesChoose', JSON.stringify(res.data.data.schoolNames[0]))
                this.schoolNamesChoose = res.data.data.schoolNames[0]
              }
            } else {
              localStorage.setItem('schoolNames', [])
              this.$store.commit('changeSchool', [])
            }
          }
        })
    },
  },
  filters: {},
}
</script>
<style lang="stylus" scoped>
.foot {
  .noLogin {
    padding: 100px 0;
    text-align: center;
  }

  background-color: #FBFBFB;
  padding-bottom: 120px;

  .myWishList {
    padding: 0 40px;

    li {
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      margin-top: 20px;

      h3 {
        font-size: 1.6rem;
        margin: 0;

        img {
          width: 40px;
          display: inline-block;
          vertical-align: middle;
        }

        b {
          display: inline-block;
          vertical-align: middle;
        }
      }

      .item.over {
        background: url('../assets/yitiyan.png') no-repeat right bottom;
        background-size: 16%;
      }

      .item {
        min-height: 200px;
        padding-left: 212px;
        position: relative;
        margin-top: 30px;

        img {
          width: 192px;
          height: 192px;
          object-fit: cover;
          position: absolute;
          left: 0px;
          top: 0;
          border-radius: 10px;
        }

        h5 {
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin: 0;
          font-size: 1.6rem;
        }

        .spans {
          padding: 10px 0;

          span {
            display: inline-block;
            padding: 4px 10px;
            background-color: #D0F8ED;
            color: #00C08A;
            font-size: 1rem;
            margin-right: 6px;
            border-radius: 6px;
          }
        }

        p {
          color: #BE9A80;
          font-size: 1.4rem;
          margin: 0;
        }
      }
    }
  }

  .myClassBox {
    padding-left: 40px;

    ul {
      border-left: 4px dashed #ccc;

      li {
        position: relative;
        margin-top: 40px;
        padding-left: 40px;
        box-sizing: border-box;
        padding-top: 60px;

        h1 {
          margin: 0;

          span {
            display: inline-block;
            vertical-align: middle;
            font-size: 2.2rem;
            color: #222222;
            margin-right: 20px;
          }

          i {
            vertical-align: middle;
          }
        }

        .subTitle {
          color: #222222;
          font-size: 1.2rem;
          opacity: 0.6;
        }

        h3 {
          font-size: 1.6rem;
          margin: 0;

          img {
            width: 40px;
            display: inline-block;
            vertical-align: middle;
          }

          b {
            display: inline-block;
            vertical-align: middle;
          }
        }

        .item {
          padding-left: 112px;
          position: relative;
          margin-top: 30px;

          img {
            width: 192px;
            height: 192px;
            object-fit: cover;
            position: absolute;
            left: 0px;
            top: 0;
            border-radius: 10px;
          }

          h5 {
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            margin: 0;
            font-size: 1.6rem;
          }

          p {
            color: #7E7F81;
            font-size: 1.2rem;
          }

          div {
            padding-bottom: 20px;

            span {
              display: inline-block;
              text-align: center;
              line-height: 60px;
              width: 140px;
              height: 60px;
              color: white;
              font-size: 1.3rem;
              background-image: linear-gradient(to right, #06CB67, #33E9AC);
              border-radius: 6px;
              margin-right: 20px;
            }

            .over {
              background-image: initial;
              background-color: #CCCCCC;
            }
          }

          img.icon {
            width: 80px;
            height: initial;
            position: absolute;
            top: -20px;
            left: 160px;
            z-index: 100;
          }
        }
      }

      li::after {
        content: '';
        border-radius: 100px;
        border: 4px solid #ccc;
        width: 10px;
        height: 10px;
        display: inline-block;
        position: absolute;
        left: -12px;
        top: 80px;
        background-color: white;
      }

      li::before {
        content: '';
        border-left: 4px solid #ccc;
        height: 60px;
        position: absolute;
        left: -4px;
        top: 20px;
      }
    }
  }

  .storyList {
    padding: 40px;
    box-sizing: border-box;
    overflow: hidden;

    li {
      float: left;
      width: 50%;
      box-sizing: border-box;

      .item {
        position: relative;

        .more {
          position: absolute;
          right: 10px;
          top: 10px;
          font-size: 2rem;
          color: white;
        }

        img {
          width: 100%;
          border-radius: 10px;
          object-fit: cover;
        }

        .box {
          position: absolute;
          top: 60px;
          left: 0;
          width: 100%;
          padding: 0 20px;
          box-sizing: border-box;

          h3 {
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 0;
            font-size: 1.4rem;
            color: white;
          }

          p {
            color: white;
            font-size: 1.2rem;
            margin: 0;
          }
        }

        .zan {
          position: absolute;
          bottom: 20px;
          right: 20px;
          color: white;
          background-color: rgba(0, 0, 0, 0.5);
          padding: 6px 10px;
          border-radius: 100px;

          span, i {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }

    li:nth-child(2n) {
      padding-left: 20px;
    }

    li:nth-child(2n+1) {
      padding-right: 20px;
    }
  }
}

.delete-button {
  height: 100%;
}
</style>