<script setup lang="ts">
import * as echarts from 'echarts'
const echartsRef = ref()
const props = defineProps({
  data: {
    type: Object
  }
})
onMounted(() => {
  const myEcharts = echarts.init(echartsRef.value)
  const option = {
    grid: {
      bottom: 30,
      left: 30,
      right: 30
    },
    xAxis: {
      data: props.data?.recently_records_map.map((item: any) => item.time),
      axisTick: {
        show: false
      }
    },
    color: ['#BF9D6B'],
    yAxis: {},
    series: [
      {
        name: '访问量',
        type: 'bar',
        barWidth: '18',
        data: props.data?.recently_records_map.map((item: any) => item.num)
      }
    ]
  }
  //设置配置
  myEcharts.setOption(option)
})
const listOptions = $computed(() => {
  return {
    columns: [
      { label: '访问时间', prop: 'created_at', align: 'center' },
      { label: '姓名', prop: 'sso_id_name', align: 'center' },
      { label: '所在项目', prop: 'project_id_name', align: 'center' },
      { label: '访问时长', prop: 'page_dwell_time', align: 'center' }
    ],
    data: props.data?.recently_records
  }
})
</script>

<template>
  <div class="data-box">
    <div class="echart">
      <div class="name">访问量一周走势图</div>
      <div
        class="echarts"
        ref="echartsRef"
        :style="{
          width: '600px',
          height: '300px'
        }"
      ></div>
    </div>
    <div class="label-box">
      <div class="name">最近访问</div>
      <AppList v-bind="listOptions" ref="appList" stripe></AppList>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.data-box {
  display: flex;
  .echart {
    width: 65%;
    flex: 1;
    height: 369px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-right: 10px;
    padding: 20px;
    .name {
      font-size: 16px;
      line-height: 100%;
      color: #333333;
    }
  }
  .label-box {
    width: 25%;
    overflow-y: scroll;
    box-sizing: border-box;
    flex: 1;
    height: 369px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-left: 10px;
    padding: 20px;
    .name {
      font-size: 16px;
      line-height: 100%;
      color: #333333;
    }
  }
}
</style>
