<template>
  <div class="myStory">
    <van-list v-model="loading" :finished="Finished" finished-text="没有更多了" @load="onLoad">
      <ul class="list">
        <li v-for="(n, i) in list" :key="i">
          <router-link :to="{ path: '/StoryDetail', query: { id: n.id } }">
            <van-swipe-cell>
              <img class="left" :src="n.coverUrl ? n.coverUrl : require('@/assets/defCoure.jpg')" alt="" />
              <div class="right">
                <h3>
                  {{ n.title }}
                  <p class="like" @click.prevent="zanbtn(n.id, n.likeId)">
                    <img v-if="n.likeId > 0" src="@/assets/service/like_on.png" alt="" />
                    <img v-else src="@/assets/service/like_off.png" alt="" />
                    <span>{{ n.likeCount }}</span>
                  </p>
                </h3>
                <p class="time"><span>创建时间：</span>{{ n.intime.replace(/T/, ' ') }}</p>
              </div>
              <!-- <p class="fail" v-if="n.state == 4"><span>失败说明：</span>{{ n.remark }}</p> -->
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click.prevent="DeleteMyStory(n.id)" />
              </template>
            </van-swipe-cell>
          </router-link>
        </li>
      </ul>
    </van-list>
    <div class="release_btn_box">
      <van-button class="release_btn" round color="#3074FF" type="primary" @click="handleRelease">去发布</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: '',
      list: [],
      loading: false,
      Finished: false,
      dataIndex: 0,
    }
  },
  created() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    let StudentDetialInfo = localStorage.getItem('StudentDetialInfo')
    if (StudentDetialInfo) {
      this.StudentDetialInfo = JSON.parse(StudentDetialInfo)
    }
  },
  methods: {
    onLoad() {
      this.dataIndex++
      setTimeout(() => {
        this.GetMyStoryList(this.dataIndex)
      }, 1000)
    },
    GetMyStoryList(page) {
      this.yxAxios
        .get(`${this.yanxueUrl}/api/StudiesWap/GetMyStoryList?userId=${this.StudentDetialInfo.travelerNum}&pageIndex=${page}&pageSize=10`)
        .then((res) => {
          this.$toast.clear()
          console.log('我的游记列表：', res.data)
          if (res.data.data.items.length > 0) {
            this.list = this.list.concat(res.data.data.items)
          }
          this.loading = false
          if (res.data.data.items.length < 10) {
            this.Finished = true
          }
        })
    },
    DeleteMyStory(id) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认是否删除？',
        })
        .then(() => {
          this.$toast.loading({
            message: '请求中...',
          })
          this.yxAxios.get(`${this.yanxueUrl}/api/StudiesWap/DeleteMyStory?id=${id}`).then((res) => {
            this.$toast.clear()
            if (res.data.status == 1) {
              this.$toast.success('删除成功')
              this.dataIndex = 1
              this.list = []
              this.GetMyStoryList(1)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    zanbtn(id, likeId) {
      if (likeId > 0) {
        this.DeleteStoryLike(id)
      } else {
        this.AddStoryLike(id)
      }
    },
    AddStoryLike(id) {
      var that = this
      this.http
        .AddStoryLike({
          type: 1,
          storyId: id,
          userId: this.userInfo ? this.userInfo.centerNo : 0,
        })
        .then( (res) =>{
          if (res.status == 1) {
            let newList = this.list
            for (let i in newList) {
              if (newList[i].id == id) {
                console.log(111)
                newList[i].likeId = 1
                newList[i].likeCount++
              }
            }
            this.list = newList
          }
        })
    },
    DeleteStoryLike(id) {
      var that = this
      this.http
        .DeleteStoryLike({
          type: 1,
          id: id,
          userId: this.userInfo ? this.userInfo.centerNo : 0,
        })
        .then( (res)=> {
          if (res.status == 1) {
            let newList = this.list
            for (let i in newList) {
              if (newList[i].id == id) {
                newList[i].likeId = 0
                newList[i].likeCount--
              }
            }
            this.list = newList
          }
        })
    },
    handleRelease() {
      this.$router.push({ name: 'StoryRelease' })
    },
  },
}
</script>

<style lang="scss" scoped>
.myStory {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background-color: #f8f8f8;
  padding-bottom: 260px;
  box-sizing: border-box;
  .list {
    padding: 20px;
    box-sizing: border-box;
    li {
      padding: 30px 20px;
      box-sizing: border-box;
      margin-bottom: 20px;
      background-color: white;
      border-radius: 10px;
      a {
        color: #000000;
      }
      img.left {
        width: 27%;
        display: inline-block;
        border-radius: 5px;
        vertical-align: top;
        margin-right: 3%;
      }
      .right {
        width: 70%;
        display: inline-block;
        .like {
          display: inline-block;
          position: absolute;
          right: 0;
          img {
            width: 32px;
            margin-right: 10px;
          }
          span {
            font-size: 26px;
            margin-right: 10px;
            vertical-align: top;
          }
        }
      }
      div {
        h3 {
          font-size: 32px;
          margin: 0;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          position: relative;
          padding-right: 80px;
        }
        .time {
          font-size: 1.4rem;
          margin: 0;
          margin-top: 25px;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          span {
            color: #ccc;
          }
        }
      }
      .fail {
        border-top: 1px solid #ccc;
        font-size: 1.4rem;
        padding-top: 5px;
        span {
          color: #ccc;
        }
      }
    }
  }
  .release_btn_box {
    width: 100%;
    height: 260px;
    // background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    .release_btn {
      width: 662px;
      position: absolute;
      bottom: 100px;
      left: 44px;
      font-size: 32px;
    }
  }
}
</style>