<template>
  <el-dialog :model-value="modelValue" @update:model-value="onUpdate" align-center append-to-body
    :close-on-click-modal="false" class="assets-dialog">
    <div class="assets-main">
      <div class="assets-wrap">
        <!-- ===== 顶部标题 ===== -->
        <div class="top-header">
          <h3 class="assets-title">我的资产</h3>
          <img src="@/assets/image/hospital/ponits/close-btn.svg" class="close-btn" alt="" @click="onBack">
        </div>

        <!-- ===== 资产核心展示 ===== -->
        <div class="assets-hero">
          <div class="coin-icon">
            <img src="@/assets/image/hospital/ponits/placeholder-110.svg" class="coin-img" alt="" />
          </div>
          <div class="assets-balance">
            <span class="balance-number">{{ totalPoints }}&nbsp;</span>
            <span class="balance-unit">积分</span>
          </div>
          <div class="assets-subtitle">已积累{{ totalPoints }}分，继续加油!</div>
        </div>

        <!-- ===== 兑换进度卡 ===== -->
        <div class="exchange-card">
          <div class="exchange-info">
            <span class="exchange-label">距离兑换{{ rewardName }}</span>
            <span class="exchange-remaining">还差{{ remainingPoints }}分</span>
          </div>
          <div class="progress-track">
            <div class="progress-fill" :style="{ width: progressPercent + '%' }" />
          </div>
        </div>

        <!-- ===== 积分明细 ===== -->
        <div class="detail-card">
          <div class="detail-title">积分明细</div>
          <div class="detail-list">
            <div class="detail-item">
              <div class="detail-icon">
                <img src="@/assets/image/hospital/ponits/icon-order-card.svg" alt="" />
              </div>
              <div class="detail">
                <span class="detail-name">今日提交工单</span>
                <span class="detail-points">+{{ todayOrder }} 积分</span>
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-icon">
                <img src="@/assets/image/hospital/ponits/icon-checkin-card.svg" alt="" />
              </div>
              <div class="detail detail-in">
                <span class="detail-name">今日签到</span>
                <span class="detail-points">+{{ todaySignIn }} 分</span>
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-icon">
                <img src="@/assets/image/hospital/ponits/icon-lottery-card.svg" alt="" />
              </div>
              <div class="detail">
                <span class="detail-name">今日抽奖</span>
                <span class="detail-points">+{{ todayDraw }} 分</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- ===== 底部按钮 ===== -->
      <div class="assets-footer">
        <el-button type="primary" class="btn-back" @click="onBack">返回</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  totalPoints: { type: Number, default: 0 },
  exchangeGoal: { type: Number, default: 10 },
  rewardName: { type: String, default: "康小虎 AI 吉祥物" },
  todayOrder: { type: Number, default: 0 },
  todaySignIn: { type: Number, default: 0 },
  todayDraw: { type: Number, default: 0 },
});

const emit = defineEmits(["update:modelValue"]);

const remainingPoints = computed(() =>
  Math.max(0, props.exchangeGoal - props.totalPoints),
);
const progressPercent = computed(() =>
  Math.min(100, Math.round((props.totalPoints / props.exchangeGoal) * 100)),
);

const onUpdate = (val) => {
  emit("update:modelValue", val);
};

const onBack = () => {
  emit("update:modelValue", false);
};
</script>

<style lang="scss">
/* ============ 弹窗外壳 ============ */
.assets-dialog {
  border-radius: 24px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding: 0;
  background: #FFFFFF;
  width: 458px;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
  }

  /* ============ 主体 ============ */
  .assets-main {
    .assets-wrap {
      padding: 30px 24px;

      .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .assets-title {
          font-weight: normal;
          font-size: 20px;
          color: #1D2129;
        }

        .close-btn {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
  }



  /* ============ 资产核心展示 ============ */
  .assets-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 27px auto 16px;
    line-height: 1.2;
  }

  .coin-icon {
    width: 110px;
    height: 110px;
  }

  .coin-img {
    width: 110px;
    height: 110px;
    object-fit: contain;
  }

  .assets-balance {
    margin: 16px auto;
    display: inline-flex;
    align-items: baseline;
    color: #FF8D28;

    .balance-number {
      font-weight: 600;
      font-size: 48px;
    }

    .balance-unit {
      font-size: 20px;
      font-weight: 500;
    }
  }

  .assets-subtitle {
    font-weight: 400;
    font-size: 14px;
    color: #1D2129;
  }

  /* ============ 兑换进度卡 ============ */
  .exchange-card {
    width: 366px;
    padding: 18px 15px;
    background: #F9FAFF;
    border-radius: 10px 10px 10px 10px;
    margin: 0 auto 16px;

    .exchange-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: normal;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .exchange-label {
      color: #666666;
    }

    .exchange-remaining {
      color: #FF8D28;
    }

    .progress-track {
      height: 4px;
      background: #E2E2E2;
      border-radius: 2px;
    }

    .progress-fill {
      height: 100%;
      height: 4px;
      background: linear-gradient(90deg, #FF7800 0%, #FF8D28 100%);
      border-radius: 2px;
    }
  }

  /* ============ 积分明细 ============ */
  .detail-card {
    width: 366px;
    padding: 14px 14px 10px;
    background: #F9FAFF;
    border-radius: 10px 10px 10px 10px;
    margin: 0 auto;
  }

  .detail-title {
    font-weight: normal;
    font-size: 14px;
    color: #666666;
    margin-bottom: 5px;
  }

  .detail-list {
    display: flex;
    flex-direction: column;
    padding: 2px 0;
  }

  .detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 46px;

    .detail-in {
      border-top: 1px solid #D8D8D8;
      border-bottom: 1px solid #D8D8D8;
    }

    .detail-icon {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      img {
        width: 22px;
        height: 22px;
        object-fit: contain;
      }
    }

    .detail {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .detail-name {
      font-weight: normal;
      font-size: 14px;
      color: #666666;
    }

    .detail-points {
      font-weight: normal;
      font-size: 14px;
      color: #FF8D28;
    }
  }

  /* ============ 底部按钮 ============ */
  .assets-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    background: #F9FAFF;
    border-top: 1px solid #E0E0E0;
  }

  .btn-back {
    width: 126px;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 38px;
    font-size: 14px;
    transition: all 0.2s;
    outline: none;
    font-family: inherit;
    --el-color-primary: #6155F5;
    // --el-button-text-color: #6155F5;
    // --el-button-bg-color: #6155F5;
    --el-button-border-color: #6155F5;
    // --el-button-hover-text-color: #6155F5;
    --el-button-hover-bg-color: #6155F5;
    --el-border-color: #6155F5;
    // --el-button-hover-border-co
  }
}
</style>