buddhism/pages/memorial/compositons/statusBar.vue

<template>
  <view class="status-bar">
    <view class="status-content">
      <view class="status-info">
        <view class="status-item">
          <text class="status-label">牌位状态:</text>
          <text class="status-value" :class="statusClass">{{ statusText }}</text>
        </view>
        <view class="status-item">
          <text class="status-label">剩余时长:</text>
          <text class="status-value">{{ remainingTime }}</text>
        </view>
      </view>
      <view class="detail-link" @click="viewDetails" v-if="showDetailLink">
        <text>查看详情></text>
      </view>
    </view>
  </view>
</template>

<script>
  import { getMemorialDetail } from '@/api/memorial/index.js'

  export default {
    name: 'StatusBar',
    props: {
      // 单元ID
      unitId: {
        type: String,
        default: '',
      },
      // 是否显示查看详情链接
      showDetailLink: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        unitData: null,
        loading: false,
      }
    },
    computed: {
      // 状态文本
      statusText() {
        if (!this.unitData) return '--'
        const stateMap = {
          1: '已点亮',
          2: '待续供',
        }
        return stateMap[this.unitData.state] || '--'
      },
      // 状态样式类
      statusClass() {
        if (!this.unitData) return ''
        return this.unitData.state === '1' ? 'status-active' : 'status-pending'
      },
      // 剩余时长
      remainingTime() {
        if (!this.unitData || !this.unitData.extinguishTime) return '--'

        const now = new Date()
        const extinguishTime = new Date(this.unitData.extinguishTime)
        const diffTime = extinguishTime - now

        if (diffTime <= 0) return '--'

        const days = Math.floor(diffTime / (1000 * 60 * 60 * 24))
        const hours = Math.floor((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

        if (days > 0) {
          return `${days}天${hours}小时`
        } else {
          return `${hours}小时`
        }
      },
    },
    watch: {
      // 监听单元ID变化，自动查询数据
      unitId: {
        handler(newId) {
          if (newId) {
            this.loadUnitData(newId)
          } else {
            this.unitData = null
          }
        },
        immediate: true,
      },
    },
    methods: {
      // 加载单元数据
      async loadUnitData(id) {
        this.loading = true
        try {
          const response = await getMemorialDetail(id)
          console.log('单元详情数据:', response)

          if (response && response.code === 200) {
            this.unitData = response.data
          } else {
            console.error('获取单元详情失败:', response)
            uni.showToast({
              title: '获取单元详情失败',
              icon: 'none',
            })
          }
        } catch (error) {
          console.error('加载单元详情失败:', error)
          uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none',
          })
        } finally {
          this.loading = false
        }
      },

      // 查看详情
      viewDetails() {
        if (!this.unitData) return

        this.$emit('view-details', this.unitData)
      },

      // 获取当前数据
      getCurrentData() {
        return this.unitData
      },
    },
  }
</script>

<style lang="scss" scoped>
  .status-bar {
    padding-left: 48rpx;
    width: 750rpx;
    height: 84rpx;
    background-color: #fff1dd;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    //border: #020101 1rpx solid;
  }

  .status-content {
    display: flex;
    align-items: center;
    //border: #1ed5bf 1rpx solid;
    width: 658rpx;
  }

  .status-info {
    flex: 1;
    display: flex;
    //border: #01ff0f 1rpx solid;
    gap: 20rpx;
  }

  .status-item {
    display: flex;
    align-items: center;
    //border: red 1rpx solid;
  }

  .status-label {
    margin-right: 20rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #ad9b91;
    line-height: 32rpx;
    text-align: right;
  }

  .status-value {
    font-weight: 400;
    font-size: 24rpx;
    color: #ad9b91;
    line-height: 32rpx;
    text-align: right;

    &.status-active {
      color: #a24242; // 红色 - 已点亮
    }

    &.status-pending {
      color: #4c382e; // 黑色 - 待续供
    }
  }

  .detail-link {
    cursor: pointer;
    padding: 0 16rpx;
    border-radius: 8rpx;
    transition: all 0.3s ease;
    //border: red 1rpx solid;
    font-weight: 400;
    font-size: 24rpx;
    color: #ad9b91;
    line-height: 32rpx;
    text-align: left;

    &:hover {
      background-color: #fff1dd;
    }
  }
</style>