<template>
  <div class="container">
    <div class="dataItem">
      <span class="label">服务时间</span>
      <span>{{ formatDay(data.actTime) }}</span>
    </div>
    
    <div class="dataItem">
      <span class="label">服务地点</span>
      <span>{{ data.place }}</span>
    </div>
    
    <div class="dataItem">
      <span class="label">服务内容</span>
      <span>{{ data.content }}</span>
    </div>
    
    <div class="dataItem">
      <span class="label">服务照片</span>
      <div>
        <img 
          class="serviceImg" 
          v-for="(url) in data.imgList" 
          :src="url" 
          :key="url"
        />
      </div>
    </div>
    
    <div class="dataItem">
      <span class="label">服务时长</span>
      <span>{{ data.hour }}小时</span>
    </div>
    
    <div class="dataItem">
      <span class="label">纪实时间</span>
      <span>{{ formatDate(data.uploadTime) }}</span>
    </div>
    
    <div class="dataItem">
      <span class="label">审核状态</span>
      <span>
        <span 
          class="status" 
          :style="{ backgroundColor: bgColorMap[data.status] }"
        >
          {{ statusMap[data.status] }}
        </span>
      </span>
    </div>
    
    <div class="footer">
      <p class="title">{{ titleMap[data.status] }}</p>
      <p class="score" v-if="data.status === 1">4分</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  data() {
    return {
      data: {},
      statusMap: ["审核中", "审核通过", "审核驳回"],
      bgColorMap: ["#1989fa", "#07c160", "#f6352c"],
      titleMap: [
        "正在审核中，请耐心等待",
        "感谢您的服务，请收下服务积分",
        "审核被驳回了哟",
      ],
    };
  },
  methods: {
    formatDate(value) {
      return value ? moment(value).format("YYYY-MM-DD HH:mm") : "--";
    },
    formatDay(value) {
      return value ? moment(value).format("YYYY-MM-DD") : "--";
    },
    fetchDetails() {
      const that = this;
      const payload = { id: this.$route.query.id };
      axios
        .get("/api/service/details", {
          params: payload,
        })
        .then(function (response) {
          const { error, data = {} } = response.data;
          if (error === 0) {
            that.data = data.details || {};
          }
        });
    },
  },
  mounted() {
    this.fetchDetails();
  },
};
</script>

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

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

.serviceImg {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 10px;
  margin-top: 10px;
}

.status {
  padding: 4px 12px;
  color: white;
  font-size: 12px;
  border-radius: 12px;
}

.footer {
  background: white;
  padding: 20px;
  text-align: center;
  margin-top: 10px;
}

.title {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.score {
  font-size: 32px;
  color: #ff5d23;
  font-weight: bold;
}
</style>
