<template>
  <scroll-view class="panel-scroll" scroll-y>
    <view v-if="!items.length" class="empty-wrap">
      <text class="empty-title">暂无诊断结果</text>
      <text class="empty-desc">请在「幸福相遇」中完成录音，并点击「分析录音」</text>
    </view>
    <view v-for="(row, idx) in items" :key="row.id" class="diag-card">
      <view class="diag-head">
        <text class="diag-label">诊断 {{ items.length - idx }}</text>
        <text class="diag-time">{{ formatDate(row.createdAt) }}</text>
      </view>
      <text class="diag-body">{{ row.analysisText }}</text>
    </view>
  </scroll-view>
</template>

<script>
const KEY = 'xixi_recordings';

export default {
  name: 'XixiDiagnosis',
  props: {
    refreshTick: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      items: [],
    };
  },
  watch: {
    refreshTick() {
      this.load();
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      try {
        const list = uni.getStorageSync(KEY);
        const arr = Array.isArray(list) ? list : [];
        this.items = arr.filter((r) => r && r.analysisText);
      } catch (e) {
        this.items = [];
      }
    },
    formatDate(ts) {
      const d = new Date(ts);
      const p = (n) => (n < 10 ? '0' + n : '' + n);
      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
    },
  },
};
</script>

<style scoped>
.panel-scroll {
  height: 100%;
  box-sizing: border-box;
  padding: 24rpx 28rpx 32rpx;
}
.empty-wrap {
  padding: 80rpx 32rpx;
  text-align: center;
}
.empty-title {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}
.empty-desc {
  font-size: 26rpx;
  color: #888;
  line-height: 1.6;
}
.diag-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(233, 30, 140, 0.08);
  border-left: 8rpx solid #ff6b9d;
}
.diag-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.diag-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #e91e8c;
}
.diag-time {
  font-size: 24rpx;
  color: #999;
}
.diag-body {
  font-size: 28rpx;
  color: #444;
  line-height: 1.65;
  white-space: pre-wrap;
}
</style>
