<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { getScore, type Score } from '@/api/scores'
import { parseTsCode } from '@/utils/contract'

const props = defineProps<{ scoreId: number | null }>()
const emit = defineEmits<{ (e: 'close'): void }>()

const score = ref<Score | null>(null)
const loading = ref(false)

const visible = computed({
  get: () => props.scoreId !== null,
  set: (v) => {
    if (!v) emit('close')
  },
})

watch(
  () => props.scoreId,
  async (id) => {
    if (id === null) {
      score.value = null
      return
    }
    loading.value = true
    try {
      score.value = await getScore(id)
    } finally {
      loading.value = false
    }
  },
)
</script>

<template>
  <el-drawer v-model="visible" title="打分明细" size="640px" destroy-on-close>
    <div v-loading="loading" v-if="score">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="品种">{{ parseTsCode(score.ts_code).symbol }}</el-descriptions-item>
        <el-descriptions-item label="合约">{{ parseTsCode(score.ts_code).contract }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ score.trade_date }}</el-descriptions-item>
        <el-descriptions-item label="收盘">{{ score.close }}</el-descriptions-item>
        <el-descriptions-item label="持仓">{{ score.oi }}</el-descriptions-item>
        <el-descriptions-item label="综合">
          <strong>{{ score.composite.toFixed(2) }}</strong>
        </el-descriptions-item>
        <el-descriptions-item label="信号">
          <el-tag>{{ score.signal }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="短期(7d × 0.4)">{{ score.short_term.toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="中期(15d × 0.35)">{{ score.medium_term.toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="长期(30d × 0.25)" :span="2">
          {{ score.long_term.toFixed(2) }}
        </el-descriptions-item>
      </el-descriptions>

      <h4 class="section">短期 7 日逐日打分</h4>
      <el-table :data="score.detail?.short_details ?? []" size="small" border>
        <el-table-column prop="trade_date" label="日期" width="100" />
        <el-table-column prop="close" label="收盘" />
        <el-table-column prop="pre_close" label="昨收" />
        <el-table-column prop="oi" label="持仓" />
        <el-table-column prop="oi_chg" label="持仓变化" />
        <el-table-column prop="score" label="单日得分" />
      </el-table>

      <h4 class="section">中期(15d)细节</h4>
      <el-descriptions :column="2" border v-if="score.detail?.medium_detail">
        <el-descriptions-item label="价格收益率">
          {{ (score.detail.medium_detail.price_return_pct * 100).toFixed(2) }}%
        </el-descriptions-item>
        <el-descriptions-item label="价格信号分">
          {{ score.detail.medium_detail.price_signal.toFixed(2) }}
        </el-descriptions-item>
        <el-descriptions-item label="增仓上涨日">
          {{ score.detail.medium_detail.long_up_days }}
        </el-descriptions-item>
        <el-descriptions-item label="增仓下跌日">
          {{ score.detail.medium_detail.long_down_days }}
        </el-descriptions-item>
        <el-descriptions-item label="资金意愿分" :span="2">
          {{ score.detail.medium_detail.fund_signal }}
        </el-descriptions-item>
      </el-descriptions>

      <h4 class="section">长期(30d)细节</h4>
      <el-descriptions :column="2" border v-if="score.detail?.long_detail">
        <el-descriptions-item label="30 日均持仓">
          {{ score.detail.long_detail.avg_oi.toFixed(0) }}
        </el-descriptions-item>
        <el-descriptions-item label="30 日前持仓">
          {{ score.detail.long_detail.oi_before.toFixed(0) }}
        </el-descriptions-item>
        <el-descriptions-item label="变化幅度" :span="2">
          {{ (score.detail.long_detail.change_pct * 100).toFixed(2) }}%
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>
</template>

<style scoped>
.section {
  margin: 18px 0 8px;
}
</style>
