<template>
  <div class="storyDetail" v-if="detailData">
    <div class="content">
      <h3 class="title">{{ detailData.title }}</h3>
      <div class="info">
        <div class="name">
          <p>{{ detailData.name }}</p>
          <p>{{ detailData.intime.substring(0, 10) }}</p>
        </div>
        <p class="like" @click.prevent="zanbtn(detailData.id, detailData.likeId)">
          <img v-if="detailData.likeId > 0" src="@/assets/service/like_on.png" alt="" />
          <img v-else src="@/assets/service/like_off.png" alt="" />
          <span>{{ detailData.likeCount }}</span>
        </p>
      </div>
      <div class="cont">
        {{ detailData.content }}
        <img :src="n.imgUrl" v-for="n in detailData.imgList" :key="n.id" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      userInfo: '',
      detailData: '',
      plList: [],
      plCont: '',
      storyId: '',
    }
  },
  created() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    console.log(this.userInfo)
    var id = (this.storyId = this.$route.query.id)
    this.GetStory(id)
  },
  methods: {
    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 newDetailData = this.detailData
            newDetailData.likeId = 1
            newDetailData.likeCount++
            this.detailData = newDetailData
          }
        })
    },
    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 newDetailData = this.detailData
            newDetailData.likeId = 0
            newDetailData.likeCount--
            this.detailData = newDetailData
          }
        })
    },

    GetStory(id) {
      var that = this
      this.http
        .GetStory({
          id: id,
          userId: this.userInfo ? this.userInfo.centerNo : 0,
        })
        .then(function (res) {
          if (res.status == 1) {
            that.detailData = res.data
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.storyDetail {
  .content {
    padding: 40px;
    box-sizing: border-box;
    .title {
      font-size: 2.4rem;
    }
    .info {
      .name {
        display: inline-block;
        vertical-align: middle;
        color: #9d9d9d;
        font-size: 30px;
        p {
          margin: 10px 0;
        }
        p:first-child {
          color: #494949;
          margin: 0;
        }
      }
      .like {
        display: inline-block;
        position: absolute;
        right: 0;
        img {
          width: 32px;
          margin-right: 10px;
        }
        span {
          font-size: 26px;
          margin-right: 10px;
          vertical-align: top;
        }
      }
    }
    .cont {
      padding: 40px 0;
      font-size: 1.4rem;
      img {
        width: 100%;
        margin-top: 20px;
      }
    }
  }
}
</style>