<template>
  <div class="container">
    <div class="head">
      <p class="title">{{ data.title }}</p>
      <div class="status">
        <van-tag :color="getActStatusColor(data)" round style="margin-right: 10px">
          {{ data.canApply ? '进行中' : '已结束' }}
        </van-tag>
        <van-tag :color="getActApplyColor(data)" round>
          {{ applyStatusMap[data.applyStatus] }}
        </van-tag>
      </div>
    </div>
    
    <div class="dataItem">
      <span class="label">活动时间</span>
      <p>{{ formatDate(data.startTime) }} - {{ formatDate(data.endTime) }}</p>
    </div>
    
    <div class="dataItem">
      <span class="label">活动地点</span>
      <p>{{ data.palce }}</p>
    </div>
    
    <div class="dataItem">
      <span class="label">活动简介</span>
      <p>{{ data.content }}</p>
    </div>
    
    <div class="dataItem">
      <span class="label">活动来源</span>
      <p>{{ data.publisher }}</p>
    </div>
    
    <div class="dataItem">
      <span class="label">服务时长</span>
      <p>{{ data.hour }}小时</p>
    </div>
    
    <div class="dataItem">
      <span class="label">招募人数</span>
      <p>{{ data.total }}人</p>
    </div>
    
    <button 
      class="fBtn" 
      v-if="[2, 3].indexOf(data.applyStatus) === -1"
      @click="applyClick"
    >
      {{ data.applyStatus === 1 ? '撤销申请' : '立即报名' }}
    </button>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import { showSuccessToast, showFailToast } from "vant";

export default {
  data() {
    return {
      data: {},
      applyStatusMap: ["", "审核中", "审核通过", "审核拒绝"],
    };
  },
  methods: {
    formatDate(value) {
      return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
    },
    getActStatusColor(data) {
      return data.canApply ? "#07C160" : "#ff976a";
    },
    getActApplyColor(data) {
      const list = ["", "#1989fa", "#07c160", "#f6352c"];
      return list[data.applyStatus];
    },
    fetchDetails() {
      const that = this;
      const payload = { id: this.$route.query.id };
      axios
        .get("/api/actDetails/details", {
          params: payload,
        })
        .then(function (response) {
          const { error, data = {} } = response.data;
          if (error === 0) {
            that.data = data.details || {};
          }
        });
    },
    applyClick() {
      const that = this;
      const payload = {
        isApplay: this.data.applyStatus !== 1,
        id: this.$route.query.id,
      };

      axios.post("/api/actDetails/apply", payload).then(function (response) {
        const { error, msg } = response.data;
        if (error === 0) {
          showSuccessToast("操作成功");
          that.fetchDetails();
        } else {
          showFailToast(msg || "网络错误，请稍后重试");
        }
      });
    },
  },
  mounted() {
    this.fetchDetails();
  },
};
</script>

<style scoped>
.head {
  background: white;
  padding: 20px;
  margin-bottom: 10px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.status {
  display: flex;
  gap: 10px;
}

.dataItem {
  background: white;
  padding: 15px 20px;
  margin-bottom: 1px;
}

.label {
  display: block;
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.dataItem p {
  color: #333;
  line-height: 1.6;
}

.fBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding: 15px;
  background: #ff5d23;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
</style>
