<template>
  <view class="situation-item">
    <view class="situation-item-title">语感学习统计</view>
    <view>
      <duration-select v-model:value="currentDuration" />

      <view class="summary-view">
        <qy-up-down-flat v-for="(item, index) in reviewQuestionsData" :key="index" :data="item" />
      </view>

      <view>
        <qy-echarts-line
            html-id="language-sense-learning-chart"
            :x-data="practiseData.xData"
            :y-data="practiseData.yData"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import DurationSelect from '@/pages/inspector/student-detail/components/study-situation-report/duration-select.vue';

import { ref } from 'vue';
import dayjs from 'dayjs';
import {UpDownFlatState, UpDownFlatType} from "@/components/up-down-flat/index";

const currentDuration = ref<string>(dayjs().format('YYYY-MM-DD'));

const reviewQuestionsData = ref([
  {
    title: '句子练习数',
    type: UpDownFlatType.NORMAL,
    value: [1000],
    unit: '个',
    state: UpDownFlatState.DOWN,
  },
  {
    title: '阅读词汇量',
    type: UpDownFlatType.NORMAL,
    value: [5000],
    unit: '分',
    state: UpDownFlatState.UP,
  },
]);

const practiseData = {
  xData: ['7/14', '7/15', '7/16', '7/17', '7/18', '7/19', '7/20'],
  yData: [
    {
      name: '句子练习数',
      data: [80, 88, 195, 173, 210, 220, 230],
    },
    {
      name: '阅读词汇量',
      data: [8, 16, 165, 32, 40, 48, 210],
    },
  ],
};
</script>

<style scoped lang="scss">
@import '@/styles/inspector/student-detail.scss';

.summary-view {
  display: flex;
  justify-content: space-between;

  .summary-view-item {
    width: 305rpx;
  }
}
</style>
