<template>
  <div class="main">
    <!-- 封面 -->
    <div class="detail-pic" v-if="detail.activity_image">
      <img :src="detail.activity_image" />
    </div>
    <!-- 标题 -->
    <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-form" v-if="detail.activity_type === '10'">
      <div class="detail-form__item" v-if="detail.org_name">
        <div class="detail-form__label">组织：</div>
        <div class="detail-form__content">{{ detail.org_name }}</div>
      </div>
      <div class="detail-form__item" v-if="detail.activity_time">
        <div class="detail-form__label">时间：</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">地点：</div>
        <div class="detail-form__content">{{detail.activity_city}} · {{ detail.activity_address }}</div>
      </div>
      <div class="detail-form__item" v-if="detail.participator_limit">
        <div class="detail-form__label">人数：</div>
        <div class="detail-form__content">{{ detail.participator_limit }}人</div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="detail-content" v-html="contentHtml"></div>
    <!-- 评论 -->
    <div class="detail-comments" v-if="hasComment">
      <comment-list relatedType="1" :activityId="pid" :data="commentList" @update="getCommentList"></comment-list>
    </div>
    <div class="buttons" v-if="canJoin">
      <input
        type="button"
        class="button button-primary"
        value="报名"
        @click="joinActivity"
        v-if="detail.button_show === 1"
      />
      <input
        type="button"
        class="button button-default"
        value="已报名"
        v-if="detail.button_show === 2"
        @click="cancelJoinActivity"
      />
    </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'
      return false
    },
    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 {
  margin: 0 20px;
}
.detail-pic {
  margin-left: -15px;
  margin-right: -15px;
  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 {
  padding: 18px 0 6px;
  h1 {
    font-size: 17px;
    color: #313131;
    line-height: 2;
  }
}
.detail-content {
  margin-top: 12px;
  padding: 16px 0;
  font-size: 13px;
  color: #313131;
  line-height: 18px;
  border-top: 1px solid #c9c9c9;
  p {
    font-size: 13px;
    color: #313131;
    line-height: 18px;
  }
}
.detail-form__item {
  display: flex;
  font-size: 12px;
  line-height: 18px;
}
.detail-form__label {
  display: flex;
}
.detail-form__content {
  flex: 1;
  overflow: hidden;
}
.buttons {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 34px;
  text-align: center;
}
.button {
  display: inline-block;
  min-width: 200px;
  height: 40px;
  padding: 0 16px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  margin: 0 10px;
}
.button-default {
  background: #ccc;
}
.button-primary {
  background: #af1b40;
}
</style>
