<template>
  <uni-popup ref="answerPopup" type="bottom" :maskClick="false" :safe-area="true">
    <view class="answer-popup-container">
      <view class="answer-popup">
        <!-- 关闭按钮 -->
        <view class="close-btn" @tap="handleClose">×</view>
        
        <!-- 结果标题和图标 -->
        <view class="result-header">
          <text class="result-title">{{ isCorrect ? '你太棒了，回答正确！' : '快来补课吧,回答错误哦!' }}</text>
          <view class="result-icon">
            <image v-if="isCorrect" :src="`${$baseUrl}canEat/thumbs-up.png`" mode="aspectFit"></image>
            <image v-else :src="`${$baseUrl}canEat/sad-face.png`" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 奖励信息 -->
        <view v-if="rewardInfo && isCorrect" class="reward-info">
          已获得{{ rewardInfo }}积分
        </view>
        <!-- 错误状态下也保留相同高度的空间 -->
        <view v-else class="empty-reward-space"></view>
        
        <!-- 选项分布 -->
        <view class="option-distribution">
          <view class="option-bar" v-for="(option, index) in displayOptionDistribution" :key="index">
            <text class="option-text">{{ option.label }}</text>
            <text class="option-percentage">{{ option.percentage }}</text>
          </view>
        </view>
        
        <!-- 题目和答案 -->
        <view class="question-answer-section">
          <text class="question-text">{{ question }}</text>
          <text class="answer-text">答案：{{ correctAnswer }}</text>
        </view>
        
        <!-- 解析内容 -->
        <view class="analysis-section">
          <text class="analysis-title">解析</text>
          <text class="analysis-content">{{ analysis }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'CanEatAnswerPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isCorrect: {
      type: Boolean,
      default: false
    },
    rewardInfo: {
      type: String,
      default: ''
    },
    question: {
      type: String,
      default: '题目标题占位'
    },
    correctAnswer: {
      type: String,
      default: '能吃'
    },
    analysis: {
      type: String,
      default: '题目答案解析文案占位题目答案解析文案占位'
    },
    allResult: {
      type: String,
      default: '30|23|17|30'
    },
    optionDistribution: {
      type: Array,
      default: () => [
        { label: '能吃', percentage: '30%', color: '#B27C1E' },
        { label: '少吃', percentage: '23%', color: '#B27C1E' },
        { label: '慎吃', percentage: '17%', color: '#B27C1E' },
        { label: '禁吃', percentage: '30%', color: '#B27C1E' }
      ]
    }
  },
  computed: {
    // 根据allResult字符串生成显示用的选项分布数据
    displayOptionDistribution() {
      // 如果有allResult属性且格式正确，使用它来生成分布数据
      if (this.allResult && this.allResult.includes('|')) {
        const percentages = this.allResult.split('|');
        const labels = ['能吃', '少吃', '慎吃', '禁吃'];
        
        return percentages.map((percent, index) => ({
          label: labels[index] || '',
          percentage: `${percent}%`
        }));
      }
      // 否则使用传入的optionDistribution
      return this.optionDistribution;
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        if (newVal) {
          this.openPopup();
        } else {
          this.closePopup();
        }
      },
      immediate: true
    }
  },
  methods: {
    openPopup() {
      this.$refs.answerPopup.open();
    },
    closePopup() {
      if (this.$refs.answerPopup) {
        this.$refs.answerPopup.close();
      }
    },
    handleClose() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.answer-popup-container {
  width: 750rpx;
  height: 986rpx;
  position: relative;
  margin: 0 auto;
}

.answer-popup {
  width: 100%;
  height: 100%;
  background: #FFF9EB;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx 40rpx 40rpx 40rpx;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 40rpx;
  color: #999;
  z-index: 10;
}

.result-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 30rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #D3A358;
  margin-right: 15rpx;
  flex: 1;
}

.result-icon {
  width: 80rpx;
  height: 80rpx;
}

.result-icon image {
  width: 100%;
  height: 100%;
}

.reward-info {
  text-align: left;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
  margin-left: 10rpx;
}

.option-distribution {
  display: flex;
  gap: 15rpx;
  margin-bottom: 30rpx;
  align-items: center;
  width: 100%;
}

.option-bar {
  flex: 1;
  padding: 10rpx 15rpx;
  color: #fff;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 从左到右4种颜色 - 反转顺序 */
.option-bar:nth-child(1) {
  background: #D3A458;
}

.option-bar:nth-child(2) {
  background: #B27C1E;
}

.option-bar:nth-child(3) {
  background: #8D5C05;
}

.option-bar:nth-child(4) {
  background: #644104;
}

/* 第一个选项只有右斜切 */
.option-bar:first-child {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

/* 中间的选项左右都有斜切 */
.option-bar:not(:first-child):not(:last-child) {
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
  margin-left: -12rpx;
}

/* 最后一个选项只有左斜切 */
.option-bar:last-child {
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  margin-left: -12rpx;
}

.question-answer-section {
  background: #FFFFFF;
  width: 680rpx;
  height: 164rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow-y: auto;
}

.question-text {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
  line-height: 1.6;
}

.answer-text {
  font-size: 28rpx;
  color: #D3A358;
  display: block;
  font-weight: bold;
}

.analysis-section {
  background: #FFFFFF;
  width: 680rpx;
  height: 446rpx;
  padding: 20rpx;
  border-radius: 36rpx;
  margin-bottom: 40rpx;
  overflow-y: auto;
}

.analysis-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.analysis-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  white-space: pre-wrap;
}

/* .confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background: #D3A358;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
} */

.empty-reward-space {
  height: 40rpx;
  margin-bottom: 30rpx;
}
</style>