<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {torrent_statistics} from '@/api'

interface StatisticsData {
  [key: string]: any
}

let aa = ref<StatisticsData>({})
let bb = ref("")
let cc = ref("")
let dd = ref("")

onMounted(async () => {
  const res = await torrent_statistics()
  console.log(res.message)
  aa.value = res.message
})

const getSecondLevelOptions = () => {
  if (!bb.value || !aa.value[bb.value]) {
    return []
  }
  return aa.value[bb.value]
}

const getThirdLevelOptions = () => {
  if (!bb.value || !cc.value || !aa.value[bb.value] || !aa.value[bb.value][cc.value]) {
    return []
  }
  console.log(aa.value[bb.value])
  return aa.value[bb.value][cc.value]
}

</script>
<template>
  <el-main>
    <el-card shadow="never">
      <template #default>
<!--        <div v-for="(v,i) in getSecondLevelOptions()">-->
<!--          <div>{{i}}</div>-->
<!--          <el-button v-for="(v2,i2) in v" :key="i2">{{ v2 }}</el-button>-->
<!--        </div>-->
        <div>
          <el-button v-for="(v,i) in aa" :key="i">{{ i }}</el-button>
        </div>
      </template>
      <template #footer>
        <el-select style="width: 120px" placeholder="请选择" v-model="bb">
          <el-option v-for="(v,i) in aa" :key="i" :label="i" :value="i"></el-option>
        </el-select>

        <el-select style="width: 120px" placeholder="请选择" v-model="cc">
          <el-option v-for="(v,i) in getSecondLevelOptions()" :key="i" :label="i"
                     :value="i"></el-option>
        </el-select>

        <el-select style="width: 120px" placeholder="请选择" v-model="dd">
          <el-option v-for="(v,i) in getThirdLevelOptions()" :key="i" :label="v"
                     :value="v"></el-option>
        </el-select>

        <el-button type="primary" @click="">
          <el-icon>
            <Plus/>
          </el-icon>
          添加
        </el-button>
      </template>
    </el-card>
  </el-main>
</template>

<style scoped lang="scss">

:deep(.el-card__body) {
  //height: calc(100vh - 211px + 60px);
  height: calc(100vh - 211px);
}
</style>
