<script setup>
import { dayjs } from "element-plus"
import { apiCustomerStatistic } from '@/api/customer'
import { lineChartRender } from '../utils/chartRender'

const props = defineProps({
  userId: ''
})

const permission = ref('')
const classify = ref('')
const time = ref([dayjs().subtract(1, 'year').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])


function getChartData() {
  apiCustomerStatistic.readTimesChartData({
    UserId: props.userId || 0,
    ChartPermissionIds: permission.value ? permission.value.join(',') : '',
    ClassifyIds: classify.value ? classify.value.join(',') : '',
    StartDate: time.value ? time.value[0] : '',
    EndDate: time.value ? time.value[1] : '',
  }).then(res => {
    if (res.Ret === 200) {
      const arr = res.Data || []
      let data = {
        time: [],
        value: []
      }
      arr.forEach(item => {
        data.time.push(item.CreateDate)
        data.value.push(item.Count)
      })
      lineChartRender(data)
    }
  })
}
getChartData()

watch(
  () => props.userId,
  (n) => {
    getChartData()
  }
)



</script>

<template>
  <div class="read-times-wrap">
    <div class="flex filter-wrap">
      <select-permission
        v-model="permission"
        :props="{
          emitPath: false,
          multiple: true,
        }"
        clearable
        @change="getChartData"
      />
      <select-report-classify
        v-model="classify"
        :props="{
          emitPath: false,
          multiple: true,
        }"
        clearable
        @change="getChartData"
      />
      <span style="width: 235px">
        <el-date-picker
          style="width: 235px"
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          @change="getChartData"
        />
      </span>
    </div>
    <h3 style="text-align: center">用户阅读量统计图</h3>
    <div class="chart-box" id="chartBox1"></div>
  </div>
</template>

<style lang="scss" scoped>
.filter-wrap {
  gap: 10px;
}
.read-times-wrap {
  height: calc(100vh - 200px);
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  .chart-box {
    margin-top: 80px;
    height: 400px;
  }
}
</style>