<!--
    filename: CityData.vue
    author: liubin
    date: 2024-04-17 09:55:12
    description:
-->

<template>
  <div class="city-data">
    <div class="headquarter">
      <div class="inner-shadow w-1"></div>
      <div class="inner-shadow flex-1 flex">
        <CityName value="凯盛光伏" />
        <CityValue :value="headquarterValue" horizontal :period="period" />
      </div>
      <div class="inner-shadow w-1"></div>
    </div>

    <div class="city-item-container">
      <CityItem
        v-for="city in cities"
        :key="city.name"
        :location="city.name"
        :value="city.value"
        :period="period"
      />
    </div>
  </div>
</template>

<script>
import CityItemVue from "./CityItem.vue";
import CityNameVue from "./CityName.vue";
import CityValueVue from "./CityValue.vue";

export default {
  name: "CityData",
  components: {
    CityItem: CityItemVue,
    CityName: CityNameVue,
    CityValue: CityValueVue,
  },
  props: {
    dataSource: {
      type: String,
      default: null,
    },
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {};
  },
  computed: {
    headquarterValue() {
      let getterName = "";
      switch (this.dataSource) {
        case "标准组件产出":
          getterName = "stdOutput";
          break;
        case "芯片产出":
          getterName = "chipOutput";
          break;
        case "BIPV产出":
          getterName = "bipvOutput";
          break;
      }
      return (
        "" + (this.$store.getters.copilot.yield[getterName]?.current?.[5] ?? 0)
      );
    },
    cities() {
      // console.log('ztl')
      let getterName = "";
      switch (this.dataSource) {
        case "标准组件产出":
          getterName = "stdOutput";
          break;
        case "芯片产出":
          getterName = "chipOutput";
          break;
        case "BIPV产出":
          getterName = "bipvOutput";
          break;
      }
      const _cities = [
        { name: "瑞昌", value: 0 },
        { name: "邯郸", value: 0 },
        { name: "株洲", value: 0 },
        { name: "佳木斯", value: 0 },
        { name: "成都", value: 0 },
        { name: "凯盛光伏", value: 0 },
        { name: "蚌埠兴科", value: 0 },
      ];
      this.$store.getters.copilot.yield[getterName]?.current?.forEach(
        (v, idx) => {
          _cities[idx].value = v ?? 0;
        }
      );
      // 删掉凯盛光伏
      _cities.splice(4, 1);
      return _cities;
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.city-data {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.headquarter {
  flex: 1;
  display: flex;
  gap: 8px;
}

.w-1 {
  width: 70px;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.inner-shadow {
  box-shadow: inset 0 0 12px 2px #fff3;
  border-radius: 4px;
}

.city-item-container {
  flex: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
</style>
