<script setup>
import { apiCustomerStatistic } from '@/api/customer'
import { pieChartRender } from '../utils/chartRender'

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

function getChartData() {
  apiCustomerStatistic.readPermissionChartData({
    UserId: props.userId || 0,
  }).then(res => {
    if (res.Ret === 200) {
      const arr = res.Data || []
      let data = arr.map(item => {
        return {
          ...item,
          name: item.PermissionName,
          y: item.Count,
        }
      })
      pieChartRender(data)
    }
  })
}
getChartData()

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

</script>

<template>
  <div class="read-permission-wrap">
    <h3 style="text-align: center">用户阅读品种分布图</h3>
    <div class="chart-box" id="chartBox2"></div>
  </div>
</template>

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