<template>
  <div class="company-shore-power">
    <div class="left">
      <div class="card digital-twin-card--deep-blue ">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">港口企业岸电使用</span>
        </div>
        <div class="card-content">
          <BarChart :chart-data="companyComparisonData" title="企业岸电使用对比" color="#4CAF50" />
        </div>
      </div>
      <div class="card digital-twin-card--deep-blue ">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">码头详情</span>
        </div>
        <div class="card-content">
          <!-- 下拉框和饼图组件 -->
          <div class="company-selector">
            <el-select v-model="selectedCompany" placeholder="请选择公司" @change="handleCompanyChange"
              style="width: 100%; margin-bottom: 20px;">
              <el-option v-for="item in companyComparisonData" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>

            <PieChart :chart-data="pieChartData" :title="`${selectedCompany}子项占比`" style="height: 300px;" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import BarChart from './charts/BarChart.vue'
import PieChart from './charts/PieChart.vue'

// 定义组件属性
interface ChartDataItem {
  name: string;
  value: number;
}

interface Props {
  companyComparisonData: ChartDataItem[];
}

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits<{
  (e: 'company-change', company: string): void;
}>()

// 组件内部状态
const selectedCompany = ref<string>(props.companyComparisonData[0]?.name || '')

// 模拟的饼图数据
const pieChartData = computed(() => {
  // 根据选中的公司生成模拟的子项数据
  return [
    { name: '码头1', value: Math.floor(Math.random() * 100) + 50 },
    { name: '码头2', value: Math.floor(Math.random() * 100) + 50 },
    { name: '码头3', value: Math.floor(Math.random() * 100) + 50 },
    { name: '码头4', value: Math.floor(Math.random() * 100) + 50 },
  ]
})

// 处理公司选择变化
const handleCompanyChange = (company: string) => {
  emit('company-change', company)
}
</script>

<style scoped>
.company-shore-power {
  display: flex;
  height: 100%;
  gap: 10px;
}

.company-selector {
  width: 100%;
}
</style>