<template>
  <div class="page-div">
    <back-button />
    <div class="header">
      <h1 class="title">{{ fredCode }}</h1>
      <p class="subtitle">{{ fredName }}</p>
    </div>
    <div class="chart-header">
      <div class="time-range-buttons">
        <van-button
          v-for="range in timeRanges"
          :key="range.value"
          :plain="selectedTimeRange !== range.value"
          :hairline="selectedTimeRange !== range.value"
          :type="selectedTimeRange === range.value ? 'primary' : 'default'"
          @click="setTimeRange(range.value)"
          style="margin-left: 8px;"
        >{{ range.label }}</van-button>
      </div>
    </div>
    <div class="info-card">
      <div class="chart-container">
        <van-loading v-show="loading" type="spinner" color="#1989fa" class="loading" />
        <div :id="`${fredCode}_chart`" class="chartDiv"></div>
      </div>
    </div>
    <div class="chartItem d-flex align-items-center justify-content-center">
    </div>
    <div class="listDiv">
      <div class="data-list-container" v-if="!loading">
        <div v-if="list.length > 0">
          <div class="list-header">
            <div class="list-item">
              <div class="list-col date-col">日期</div>
              <template v-if="route.params.id">
                <div class="list-col value-col">值(%)</div>
              </template>
              <template v-else>
                <div class="list-col aaa-col">AAA(%)</div>
                <div class="list-col bbb-col">BBB(%)</div>
                <div class="list-col spread-col">BBB-AAA(%)</div>
              </template>
            </div>
          </div>
          <RecycleScroller
            class="list-body"
            :items="list"
            :item-size="1"
            key-field="sysDate"
          >
            <template v-slot="{ item }">
              <div class="list-item">
                <div class="list-col date-col">{{ item.sysDate }}</div>
                <template v-if="route.params.id">
                  <div class="list-col value-col">{{ item.fredValue }}</div>
                </template>
                <template v-else>
                  <div class="list-col aaa-col">{{ item.AaaFredValue }}</div>
                  <div class="list-col bbb-col">{{ item.BbbFredValue }}</div>
                  <div class="list-col spread-col">{{ (item.BbbFredValue - item.AaaFredValue).toFixed(2) }}</div>
                </template>
              </div>
            </template>
          </RecycleScroller>
        </div>
        <div class="no-data" v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import BackButton from '@/components/back-button.vue'

import { ref, nextTick, onMounted } from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller'

import { useRoute } from 'vue-router'
import { fredInfoInfo, fredDetailQueryFred, fredDetailQueryAaaAndBbb } from '@/utils/api'
let fredCode = ref('') 
let fredName = ref('') 
let beginTime = ref('')
let endTime = ref('')
let selectedTimeRange = ref('3Y')

const timeRanges = [
  { label: '1M', value: '1M', unit: 'month', offset: -1 },
  { label: '3M', value: '3M', unit: 'month', offset: -3 },
  { label: '1Y', value: '1Y', unit: 'year', offset: -1 },
  { label: '3Y', value: '3Y', unit: 'year', offset: -3 },
]
const route = useRoute()
const init = async () => {
  const id = route.params.id
  if (id) {
    const { data } = await fredInfoInfo(id + '')
    fredCode.value = data.fredCode
    fredName.value = data.fredName
  } else {
    fredCode.value = 'BBB-AAA'
    fredName.value = 'Option-Adjusted Spread'
  }
  setTimeRange('3Y')
  charts.value = [null]
}

import { addOrSubtractTime } from '@/utils'
const setTimeRange = (range: string) => {
  selectedTimeRange.value = range
  endTime.value = new Date().toISOString().split('T')[0]
  const rangeConfig = timeRanges.find(item => item.value === range)
  if (rangeConfig) {
    beginTime.value = addOrSubtractTime(new Date(), rangeConfig.offset, rangeConfig.unit as 'month' | 'year')
  }

  disposeAll()
  nextTick(() => {
    const id = route.params.id
    getData(id ? 1 : 0)
  })
}

let loading = ref(true) 
let list = ref<any[]>([])
import * as echarts from 'echarts'
import { chartMixins } from '@/mixins/chart-mixins'
const { charts, destroyedFlag, disposeAll } = chartMixins()
import { getLineSeries, getBaseOption, getXAxis, getYAxis } from '@/utils/chart'
const getData = async (index: number) => {
  loading.value = true
  const sysDate: any = []
  let seriesList: any = []
  let color = []
  const legend = {
    data: [] as string[],
    top: '30px',
    show: false
  }
  if (index === 0) {
    const { data } = await fredDetailQueryAaaAndBbb({
      begin: beginTime.value,
      end: endTime.value
    })
    color = ['green', 'blue', 'red']
    legend.show = true
    legend.data = ['AAA', 'BBB', 'BBB-AAA']
    seriesList = [getLineSeries({ name: 'AAA' }), getLineSeries({ name: 'BBB' }), getLineSeries({ name: 'BBB-AAA' })]
    data.forEach((ele: any) => {
      sysDate.push(ele.sysDate)
      seriesList[0].data.push({ value: ele.AaaFredValue })
      seriesList[1].data.push({ value: ele.BbbFredValue })
      seriesList[2].data.push({ value: Math.round((ele.BbbFredValue - ele.AaaFredValue) * 100) / 100 })
      list.value.unshift(ele)
    })
  } else{
    const { data } = await fredDetailQueryFred({
      fredCode: fredCode.value,
      begin: beginTime.value,
      end: endTime.value
    })
    color = ['blue']
    seriesList = [getLineSeries({ name: fredCode.value })]
    data.forEach((ele: any) => {
      sysDate.push(ele.sysDate)
      seriesList[0].data.push({ value: ele.fredValue })
      list.value.unshift(ele)
    })
  }
  
  if (!destroyedFlag.value) {
    let chart = echarts.init(document.getElementById(`${fredCode.value}_chart`))
    const option = getBaseOption({
      series: seriesList,
      yAxis: [getYAxis({ axisLabel: '{value} %' })],
      xAxis: [getXAxis({ data: sysDate })],
      tooltipFormatter: function (params: any) {
        const data = Array.isArray(params) ? params : [params]
        let backText = `日期：${data[0].name}<br/>`
        data.forEach((ele) => {
          backText += `<span style="color: ${ele.color}">${ele.seriesName}</span>:<span class="f-b">${ele.value}%</span><br/>`
        })
        return backText
      },
      grid: [{ top: '10px', left: '40px', right: '40px', bottom: '20px' }],
      legend: legend,
      color: color
    })
    chart.setOption(option)
    charts.value[0] = chart
    loading.value = false
  }
}

onMounted (() =>{
  init()
})
</script>

<style lang='scss' scoped>
@import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
.page-div {
  box-sizing: border-box;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-top: 102px;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    @media screen and (min-width: 992px) {
      left: calc(50vw - 496px);
      right: calc(50vw - 496px);
    }
  }
  
  .chart-header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 16px;

    .chart-title {
      display: none;
    }

    .time-range-buttons {
      display: flex;
      justify-content: flex-end;
      padding: 0 16px;
      flex-wrap: wrap;
      gap: 8px;
    }
  }

  .chart-container {
    width: 100%;
    height: 30vh;
    @media screen and (min-width: 768px) {
      height: 40vh;
    }
  }

  .listDiv {
    padding: 0 16px;
    
    .data-list-container {
      width: 100%;
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      background-color: #fff;
      max-height: none !important;
      overflow: visible !important;
      height: auto !important;
      -webkit-overflow-scrolling: auto;

      .list-header {
        background-color: #f5f7fa;
        border-bottom: 1px solid #e8ebed;
      }

      .list-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        border-bottom: 1px solid #e8ebed;
        height: 40px;
        box-sizing: border-box;

        &:last-child {
          border-bottom: none;
        }
      }

      .list-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
      }

      .list-col {
        flex: 1;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 8px;
        font-size: 14px;
        color: #333;
        
        &.date-col {
          flex: 0 0 30%;
          text-align: left;
          font-weight: 500;
        }

        &.value-col,
        &.aaa-col,
        &.bbb-col,
        &.spread-col {
          font-family: monospace;
        }

        &.spread-col {
          color: #1989fa;
          font-weight: 500;
        }
      }

      .no-data {
        padding: 30px 0;
        text-align: center;
        color: #999;
        background-color: #fafafa;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .chart-header {
      margin-bottom: 12px;

      .time-range-buttons {
        padding: 0 12px;

        button {
          font-size: 12px !important;
          padding: 4px 8px !important;
        }
      }
    }

    .chart-container {
      height: 25vh;
    }

    .listDiv {
      padding: 0 12px;

      .data-list-container {
        .list-item {
          padding: 10px 12px;
          height: 44px;
        }

        .list-col {
          font-size: 12px;
          padding: 0 4px;

          &.date-col {
            flex: 0 0 35%;
          }
        }
      }
    }
  }
}
</style>
