<script setup lang="ts">
import * as echarts from 'echarts'
import i_up from '~/assets/img/home/up.png'
import i_down from '~/assets/img/home/down.webp'
import i_user from '~/assets/img/home/user.webp'

const selectedDate = $ref<Date>()
let loading = $ref(true)
let list_czrz = $ref(['', '', ''])

type EChartsOption = echarts.EChartsOption

const echartRef = $ref<HTMLElement>()

const option: EChartsOption = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['累计在线人数', '总观看人数'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '累计在线人数',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      symbolSize: 9,
      areaStyle: {
        opacity: 1,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#3f8cff',
          },
          {
            offset: 0.5,
            color: '#96caff',
          },
          {
            offset: 0.8,
            color: '#f6faff',
          },
          {
            offset: 1,
            color: '#fff',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '总观看人数',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      symbolSize: 9,
      areaStyle: {
        opacity: 1,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#ff611f',
          },
          {
            offset: 0.5,
            color: '#ffb697',
          },
          {
            offset: 0.8,
            color: '#fcf4f3',
          },
          {
            offset: 1,
            color: '#fff',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
  ],
}

let info = $ref({
  system_log: ['', '', ''],
  sczy_data: {
    title: '上传资源数量',
    sczy_today: 0,
    sczy_week: 0,
    sczy_month: 0,
    sczy_tbsy_per: 0,
  },
  xzzy_data: {
    title: '资源下载次数',
    xzzy_today: 0,
    xzzy_week: 0,
    xzzy_month: 0,
    xzzy_tbsy_per: 0,
  },
  user_data: {
    title: '新增用户',
    user_today: 0,
    user_week: 0,
    user_month: 0,
    user_tbsy_per: 0,
  },
  school_data: [
    {
      school_name: '',
      upload_num: '',
      download_num: '',
      class_num: '',
      zj_class_num: '',
    },
    {
      school_name: '',
      upload_num: '',
      download_num: '',
      class_num: '',
      zj_class_num: '',
    },
    {
      school_name: '',
      upload_num: '',
      download_num: '',
      class_num: '',
      zj_class_num: '',
    },
  ],
  ktzx_data: {
    xAxis: [],
    d1: [],
    d2: [],
  },
})

async function handleQuery() {
  loading = true
  await request({
    baseURL: window.GLOBAL_CONFIG.myxjyszptx,
    url: '/openapi/chart/index_data.php',
    data: {
      area_id: 2615,
      date_time: // selectedDate?.getTime(),
        selectedDate ? (selectedDate.getTime() / 1000).toFixed(0) : undefined,
    },
  }).then((res) => {
    // console.log('res :>> ', res.data)
    if (res.code === '1') {
      info = res.data
      option.xAxis[0].data = res.data.ktzx_data.xAxis
      option.series[0].data = res.data.ktzx_data.d1
      option.series[1].data = res.data.ktzx_data.d2
      list_czrz = res.data.system_log.map((item: any) => `${item.sl_datetime} ${item.user_realname}${item.sl_content}`)
    }
    loading = false
  })
}

handleQuery()
let myChart: echarts.ECharts

watch(() => selectedDate, async () => {
  await handleQuery()
  if (myChart && option)
    myChart.setOption(option)
})

onMounted(() => {
  myChart = echarts.init(echartRef!)
  option && myChart.setOption(option)
})

onUpdated(() => {
  myChart = echarts.init(echartRef!)
  option && myChart.setOption(option)
})

const router = useRouter()
const go = (path: any) => {
  try {
    router.push(path)
  }
  catch (error) {
    console.error(error)
    ElMessage.warning('你无权访问该页面')
  }
}
</script>

<template>
  <div v-loading="loading" class="text-base flex h-full">
    <div class="w-15/25 bg-white card py-6 px-8 flex flex-col justify-between">
      <div class="flex justify-between items-end">
        <div class="text-hex-333539 font-semibold tracking-wide">
          操作日志
        </div>
        <div
          class="bg-hex-eff3fb rounded-lg text-hex-4d4d4d text-xs font-normal flex_center px-2.5 py-1 cursor-pointer"
          @click="go({ name: 'AQSZ_CZRZ' })"
        >
          查看更多
          <i:material-symbols:arrow-forward-ios />
        </div>
      </div>

      <div class="bg-hex-ebf3ff rounded-2xl p-4 my-4">
        <ul class="divide-y divide-dashed text-sm text-hex-61657e font-semibold tracking-wide">
          <li v-for="item in list_czrz" :key="item" class="truncate py-2 h-36px" v-html="item" />
        </ul>
      </div>

      <div class="text-hex-333539 font-semibold tracking-wide mt-7">
        数据
      </div>

      <div class="flex justify-between text-white my-4">
        <div class="card bg-hex-E8523F w-3/10 py-3 px-5 rounded-3xl">
          <div class="flex justify-between">
            <div class="flex items-center">
              <img :src="i_up" alt="" class="w-8 h-8">
              <span class="text-sm ml-2">上传资源数量</span>
            </div>

            <div class="flex flex-col items-center">
              <i:mdi:arrow-up-thin v-if="info.sczy_data.sczy_tbsy_per >= 0" class="text-2xl" />
              <i:mdi:arrow-down-thin v-else class="text-2xl" />
              <span class="text-xs">{{ info.sczy_data.sczy_tbsy_per }}%</span>
            </div>
          </div>

          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              今日
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.sczy_data.sczy_today }}
            </div>
          </div>
          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              本周
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.sczy_data.sczy_week }}
            </div>
          </div>
          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              本月
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.sczy_data.sczy_month }}
            </div>
          </div>
        </div>
        <div class="card bg-hex-3F8CFF w-3/10 py-3 px-5 rounded-3xl">
          <div class="flex justify-between">
            <div class="flex items-center">
              <img :src="i_down" alt="" class="w-8 h-8">
              <span class="text-sm ml-2">资源下载次数</span>
            </div>

            <div class="flex flex-col items-center">
              <i:mdi:arrow-up-thin v-if="info.xzzy_data.xzzy_tbsy_per >= 0" class="text-2xl" />
              <i:mdi:arrow-down-thin v-else class="text-2xl" />
              <span class="text-xs">{{ info.xzzy_data.xzzy_tbsy_per }}%</span>
            </div>
          </div>

          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              今日
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.xzzy_data.xzzy_today }}
            </div>
          </div>
          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              本周
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.xzzy_data.xzzy_week }}
            </div>
          </div>
          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              本月
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.xzzy_data.xzzy_month }}
            </div>
          </div>
        </div>
        <div class="card bg-hex-F8B849 w-3/10 py-3 px-5 rounded-3xl">
          <div class="flex justify-between">
            <div class="flex items-center">
              <img :src="i_user" alt="" class="w-8 h-8">
              <span class="text-sm ml-2">新增用户</span>
            </div>

            <div class="flex flex-col items-center">
              <i:mdi:arrow-up-thin v-if="info.user_data.user_tbsy_per >= 0" class="text-2xl" />
              <i:mdi:arrow-down-thin v-else class="text-2xl" />
              <span class="text-xs">{{ info.user_data.user_tbsy_per }}%</span>
            </div>
          </div>

          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              今日
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.user_data.user_today }}
            </div>
          </div>
          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              本周
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.user_data.user_week }}
            </div>
          </div>
          <div class="flex items-end mt-2">
            <div class="text-xs leading-none">
              本月
            </div>
            <div class="text-xl ml-2 leading-none">
              {{ info.user_data.user_month }}
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-between items-baseline mt-7 mb-4">
        <div class="text-hex-333539 font-semibold tracking-wide">
          高校资源数据
        </div>
        <div
          class="bg-hex-eff3fb rounded-lg text-hex-4d4d4d text-xs font-normal flex_center px-2.5 py-1 cursor-pointer"
          @click="go({ name: 'HOME_GXZYSJ' })"
        >
          查看更多
          <i:material-symbols:arrow-forward-ios />
        </div>
      </div>

      <el-table class="_" :data="info.school_data" style="width: 100%">
        <el-table-column prop="school_name" label="学校名称" show-overflow-tooltip width="auto" />
        <el-table-column prop="upload_num" label="上传资源数" show-overflow-tooltip width="180" />
        <el-table-column prop="download_num" label="资源下载数" show-overflow-tooltip width="180" />
        <el-table-column prop="class_num" label="听课教室数" show-overflow-tooltip width="180" />
        <el-table-column prop="zj_class_num" label="主讲教室数" show-overflow-tooltip width="180" />
      </el-table>
    </div>
    <div class="w-8/25 min-w-400px ml-1/25 h-full flex flex-col justify-between">
      <div class="card flex-auto mb-9 flex flex-col justify-between">
        <div class="text-hex-333539 font-medium tracking-wide">
          日历
        </div>
        <div class="flex_center flex-auto">
          <el-calendar v-model="selectedDate" class="_" />
        </div>
      </div>
      <div class="card flex flex-col justify-between">
        <div class="text-hex-333539 font-medium tracking-wide mb-3">
          课堂在线情况
        </div>
        <div ref="echartRef" class="w-full h-300px" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/calendar.scss";
@use "~/styles/table2.scss";
</style>
