<template>
  <div class="detail">
    <!-- 标题 -->
    <div class="detail-title">
      <h1>{{ detail.activity_name }}</h1>
    </div>
    <!-- 作者 -->
    <div class="detail-user" v-if="detail.initiator">
      <div class="detail-user__pic">
        <img :src="detail.initiator.avatar | avatar" />
      </div>
      <div class="detail-user__content">
        <p>{{ detail.initiator.nickname }}</p>
        <p>{{ datetimeText }}</p>
      </div>
      <div class="detail-user__tool" v-if="canJoin">
        <span
          class="join-button"
          @click="joinActivity"
          v-if="detail.button_show === 1"
          >报名</span
        >
        <span
          class="join-button"
          v-if="detail.button_show === 2"
          @click="cancelJoinActivity"
          >已报名</span
        >
      </div>
    </div>
    <!-- 封面 -->
    <div class="detail-pic" v-if="detail.activity_image">
      <img :src="detail.activity_image" />
    </div>
    <!-- 内容 -->
    <div class="detail-content" v-html="contentHtml"></div>
    <div class="detail-form" v-if="detail.activity_type === '10'">
      <div class="detail-form__item" v-if="detail.activity_time">
        <div class="detail-form__label">
          <span class="detail-form-icon detail-form-icon__clock"></span>
          时间：
        </div>
        <div class="detail-form__content">{{ detail.activity_time }}</div>
      </div>
      <div class="detail-form__item" v-if="detail.activity_address">
        <div class="detail-form__label">
          <span class="detail-form-icon detail-form-icon__address"></span>
          地点：
        </div>
        <div class="detail-form__content">{{ detail.activity_address }}</div>
      </div>
      <!-- <div class="detail-form__item" v-if="detail.participator_limit">
        <div class="detail-form__label">
          <span class="detail-form-icon detail-form-icon__peoples"></span>
          希望人数：
        </div>
        <div class="detail-form__content">
          {{ detail.participator_limit }}人
        </div>
      </div> -->
    </div>
    <!-- 评论 -->
    <div class="detail-comments" v-if="hasComment">
      <comment-list
        relatedType="1"
        :activityId="pid"
        :data="commentList"
        @update="getCommentList"
      ></comment-list>
    </div>
  </div>
</template>

<script>
import CommentList from '@/components/CommentList'
import * as api from '@/api/index'
import { format } from 'timeago.js'

export default {
  components: { CommentList },
  data() {
    return {
      detail: {
        activity_contents: ''
      },
      commentList: []
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    },
    datetimeText() {
      return format(this.detail.created_time, 'zh_CN')
    },
    isPass() {
      return this.detail.approve_status === '1'
    },
    isMyPublished() {
      return !!this.detail.is_mine
    },
    hasComment() {
      return this.detail.comment_switch === '1'
    },
    contentHtml() {
      const content = this.detail.activity_contents || ''
      return content.replace(/\r\n|\n/gi, '<br />')
    },
    canJoin() {
      // 1显示报名2显示取消3均不显示
      return (
        this.isPass &&
        !this.isMyPublished &&
        [1, 2].includes(this.detail.button_show)
      )
    }
  },
  methods: {
    // 详情
    getDetail() {
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      api
        .getActivity(this.pid)
        .then(response => {
          this.detail = response
          toast.clear()
        })
        .catch(toast.clear)
    },
    // 热门评论
    getCommentList() {
      api.getCommentList(this.pid).then(response => {
        this.commentList = response
      })
    },
    // 报名
    joinActivity() {
      api.joinActivity(this.pid).then(() => {
        this.getDetail()
      })
    },
    // 取消报名
    cancelJoinActivity() {
      api.cancelJoinActivity(this.pid).then(() => {
        this.getDetail()
      })
    }
  },
  beforeMount() {
    this.getDetail()
    this.getCommentList()
  }
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 10px 20px;
}
.detail-pic {
  margin-left: -20px;
  margin-right: -20px;
  margin-top: 20px;
  img {
    width: 100%;
  }
}
.detail-user {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.detail-user__pic {
  width: 40px;
  height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.detail-user__content {
  flex: 1;
  padding-left: 20px;
  p {
    font-size: 13px;
    color: #999;
  }
}
.join-button {
  display: inline-block;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(255, 201, 44, 1) 0%,
    rgba(255, 116, 42, 1) 100%
  );
  box-shadow: 0px 5px 20px 0px rgba(253, 3, 20, 0.3);
  border-radius: 20px;
  cursor: pointer;
}
.detail-title {
  h1 {
    font-size: 18px;
    color: #333;
    line-height: 26px;
  }
}
.detail-content {
  margin-top: 10px;
  font-size: 15px;
  color: #222;
  line-height: 30px;
  p {
    font-size: 14px;
    color: #222;
    line-height: 30px;
    text-indent: 2em;
  }
}
.detail-form__item {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  line-height: 20px;
}
.detail-form__label {
  display: flex;
}
.detail-form__content {
  flex: 1;
  overflow: hidden;
}
.detail-form-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.detail-form-icon__clock {
  background: url('~@/assets/img/icon_clock.png') no-repeat center;
  background-size: contain;
}
.detail-form-icon__address {
  background: url('~@/assets/img/icon_address.png') no-repeat center;
  background-size: contain;
}
.detail-form-icon__peoples {
  background: url('~@/assets/img/icon_peoples.png') no-repeat center;
  background-size: contain;
}
</style>
