<template>
  <div class="company-shore-power">
    <div class="left" style="width: 40%;">
      <!-- <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}子项占比`" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

interface Props {
  companyComparisonData: ChartDataItem[];
}

const props = defineProps<Props>()

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

// 饼图数据
const pieChartData = computed(() => {
  // 根据选中的公司找到对应的数据
  const selectedCompanyData = props.companyComparisonData.find(item => item.name === selectedCompany.value)
  return selectedCompanyData?.children || []
})

// 处理公司选择变化
const handleCompanyChange = (company: string) => {
  selectedCompany.value = company
}
</script>

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

.left {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-content {
  flex: 1;
  height: 100%;
  min-height: 0;
}

.company-selector {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>