<template>
  <TechCard>
    <div class="card-title">设备安装位置分布</div>
    <BaseChart :option="chartOption" :height="200" />
  </TechCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import TechCard from '../TechCard/index.vue'

defineOptions({ name: 'DeviceLocationCard' })

interface Props {
  data: Array<{ name?: string; count: number; installPosition: string }>
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
})

const chartOption = computed(() => {
  const locationNames = props.data.map((item) => item.name || item.installPosition)
  const locationValues = props.data.map((item) => item.count)

  return {
    tooltip: {
      trigger: 'item',
      axisPointer: { type: 'shadow' },
      formatter: '{b}: {c} 台',
    },
    grid: {
      left: 60,
      right: 20,
      top: 20,
      bottom: 20,
    },
    xAxis: {
      type: 'value',
      axisLabel: { color: '#9cc5e0' },
      splitLine: { show: false },
    },
    yAxis: {
      type: 'category',
      data: locationNames,
      axisLabel: { color: '#9cc5e0' },
      axisTick: { show: false },
      axisLine: { show: false },
    },
    series: [
      {
        type: 'bar',
        data: locationValues,
        barWidth: 14,
        itemStyle: {
          color: (params: { dataIndex: number }) => {
            const colors = ['#4dc9e6', '#6de4ff', '#2572ed', '#1a57c9']
            return colors[params.dataIndex % colors.length]
          },
        },
        label: {
          show: true,
          position: 'right',
          color: '#00f0ff',
          fontSize: 12,
        },
      },
    ],
  }
})
</script>

<style scoped lang="less">
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #00f0ff;
  margin-bottom: 12px;
  text-align: center;
}
</style>
