<!--
 * @Author: zhp
 * @Date: 2024-05-30 16:00:50
 * @LastEditTime: 2024-06-03 16:26:03
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div class="double-ring-wrapper">
    <template>
      <copilot-select @update:active="handleActiveUpdate" :options="cityOptions" />
      <div class="flex-1 stretch">
        <DoubleRingChartVue :data-source="dataSource" :period="period" :than="than" :factoryId="factoryId" />
      </div>
    </template>
  </div>
</template>

<script>
import CopilotSelect from "@/views/copilot/components/select.vue";
import DoubleRingChartVue from "./DoubleRingChart.vue";
import CityData from "../city/CityData.vue";

export default {
  name: "DoubleRingWrapper",
  components: { CopilotSelect, DoubleRingChartVue, CityData },
  props: {
    dataSource: {
      type: String,
      default: null,
    },
    period: {
      type: String,
      default: "日",
    },
    than: {
      type: String,
      default: "同比",
    },
  },
  data() {
    return {
      factoryId: 4, // 默认成都
      cityOptions: [
        "瑞昌",
        // "成都",
        "邯郸",
        // "株洲",

        // "佳木斯",
        // "凯盛光伏",
        // "蚌埠兴科",
      ],
    };
  },
  methods: {
    handleActiveUpdate(index) {
      this.factoryId = index;
    },
  },
};
</script>

<style scoped lang="scss">
.double-ring-wrapper {
  height: 100%;
  padding: 12px 24px;
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.stretch {
  align-self: stretch;
}
</style>
