<script setup lang="ts">
import happyReadApi from '@/api/subject/happyRead'
import studyAnalysisApi from '@/api/studyAnalysis'
import SelectTime from './SelectTime.vue'
import NumberCard from './NumberCard.vue'

const props = withDefaults(
  defineProps<{
    subjectId?: number
    userId?: any
    isEnglish?: boolean
    windowWidth?: number
    title: string
  }>(),
  {
    title: '',
    isEnglish: false,
    subjectId: 0,
    userId: '',
    windowWidth: 1920,
  },
)

const emits = defineEmits(['change'])

const allData = ref<anyObj>({})

const dateType = ref(0)
const showDia = ref(false)

const timeList = ref([
  { label: '今日', value: 0 },
  { label: '近一周', value: 1 },
  { label: '近一月', value: 2 },
  { label: '总计', value: 3 },
])

const renderConfig = ref([
  {
    name: '练习次数',
    config: 'rainCount',
    color: ' #A13C00',
    fill: '#FED769',
    value: 0 as string | number,
  },
  {
    name: '阅读词汇量',
    config: 'ordCount',
    fill: '#A7AEFFA1',
    color: '#2D39BC',
    value: 0 as string | number,
  },
  {
    name: '阅读时长',
    config: 'earnTime',
    fill: '#FF8200',
    color: ' #C67016',
    value: 0 as string | number,
  },
  {
    name: '正确率',
    config: 'ightRate',
    fill: '#B8FC90',
    color: '#2F8A5B',
    value: 0 as string | number,
  },
])

const renderConfigTrain = reactive([
  {
    name: '自由学',
    config: 0,
    fill: '#FED769',
    color: '#A13C00',
    value: 0,
    trainBookVoList: [] as Array<{ textBookName: string; num: number }>,
  },
  {
    name: 'AI精准学',
    config: 1,
    fill: '#A1FCF8',
    color: '#2D39BC',
    value: 0,
  },
  {
    name: '自由组卷',
    config: 7,
    fill: '#A7AEFF',
    color: '#2D39BC',
    value: 0,
  },
])

function getDuration() {
  if (props.title === '阅读统计') {
    happyReadApi.shortQueryFirstPageInfo().then((res: any) => {
      if (res.data.data) {
        allData.value = res.data.data
        dataTool('todayStat')
      }
    })
  } else {
    studyAnalysisApi
      .getTrainRecord({
        dateType: dateType.value,
        subjectId: props.subjectId,
        userId: props.userId,
      })
      .then((res: any) => {
        renderConfigTrain.forEach(item => {
          item.value = 0
        })
        if (res.data.data?.length) {
          res.data.data.forEach((item: anyObj) => {
            const currentData = renderConfigTrain.find(v => v.config === item.type)
            if (currentData) {
              currentData.value = item.num
              currentData.trainBookVoList = item.trainBookVoList
            }
          })
        }
      })
  }
}

function handleShowPop(item: anyObj) {
  if (item.name !== '自由学' || !renderConfigTrain[0].trainBookVoList?.length) return
  showDia.value = true
  // 自由学弹框
}

function dataTool(str: string) {
  renderConfig.value.forEach(item => {
    for (const key in allData.value[str]) {
      if (key.includes(item.config)) {
        item.value = allData.value[str][key] || 0
        if (item.config === 'ightRate') {
          item.value = (allData.value[str][key] || 0) + '%'
        }

        if (item.config === 'earnTime') {
          item.value = dealTime(allData.value[str][key] || 0)
        }
      }
    }
  })
}
function dealTime(time: number) {
  if (time <= 60) return `${time}s`
  const h = parseInt(String(time / 60 / 60), 10)
  const m = parseInt(String((time / 60) % 60), 10)

  if (time === undefined) return '0'

  if (h > 0 || m > 0) {
    return `${h}h ${m}m`
  } else {
    return '0'
  }
}
watch(
  () => props.subjectId,
  nv => {
    getDuration()
  },
  {
    immediate: true,
  },
)
watch(
  () => dateType.value,

  nv => {
    if (props.title === '练习统计') {
      getDuration()
      return
    }
    switch (nv) {
      case 0:
        dataTool('todayStat')
        break
      case 1:
        dataTool('stat7')
        break
      case 2:
        dataTool('stat30')
        break
      case 3:
        dataTool('allStat')
        break
      default:
        break
    }
  },
)
</script>
<template>
  <div class="data-content">
    <div class="data-title">{{ title }}</div>

    <div class="nav">
      <SelectTime v-model="dateType" :dataList="timeList"></SelectTime>
    </div>
    <div class="data-content-bottom">
      <div class="data-content-card">
        <template
          v-for="item in props.title === '练习统计' ? renderConfigTrain : renderConfig"
          :key="item.name"
        >
          <NumberCard
            v-if="!(item.name === '正确率' && (dateType === 2 || dateType === 1))"
            :title="item.name"
            :fill="item.fill"
            :fontColor="item.color"
            @click="handleShowPop(item)"
          >
            <div class="data-content-card-content">
              <span class="number">{{ item.value }}</span
              >次
            </div>
          </NumberCard>
        </template>
      </div>
    </div>
    <mj-dialog v-model="showDia" class="Dia" title="自由学" :hide-footer="true">
      <div class="list-box hidden_scroll">
        <div class="list-item list-title">
          <div class="name">教材</div>
          <div class="count">练习次数</div>
        </div>
        <div
          v-for="(item, index) in renderConfigTrain[0].trainBookVoList"
          :key="index"
          class="list-item"
        >
          <div class="name">
            {{ item.textBookName }}
          </div>
          <div class="count">{{ item.num }}次</div>
        </div>
      </div>
      <!-- <Empty v-else type="learn" content="暂无学习记录，快去学习吧！"> </Empty> -->
    </mj-dialog>
  </div>
</template>

<style lang="scss" scoped>
.data-content-bottom {
  margin-top: 5.83vh;
  .data-content-card {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .count-card-item {
      margin-right: 24px;
      margin-bottom: 2vh;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
.nav {
  display: flex;
  justify-content: center;
  margin: 6vh 0 1.67vh;
}
:deep(.Dia) {
  width: 1336px;
  .el-dialog__header {
    height: 7.33vh;
    .header {
      height: 7.33vh;
    }
  }
  .content {
    height: auto !important;
    min-height: 56.83vh;
  }
  .list-box {
    width: 100%;
    height: 56.83vh;
    border-radius: 1.67vh;
    border: 0.33vh solid #417ccc;
    overflow-y: scroll;
    margin-top: 0.83vh;
    .list-item {
      display: flex;
      text-align: center;
      height: 7.5vh;
      line-height: 7.5vh;
      color: $font-color;
      font-size: 2.33vh;
      font-style: normal;
      border-bottom: 0.17vh dashed #deedfc;
      .name,
      .count {
        width: 50%;
      }
      .count {
        border-left: 0.17vh dashed #deedfc;
        border-right: 0.17vh dashed #deedfc;
      }
    }
    .list-title {
      background-color: #9fc8fe;
      color: var(--, $font-color);
      font-family: $font-special;
      font-size: 2.33vh;
    }
  }
}
</style>
