<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
 * @LastEditTime: 2024-06-06 13:55:10
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <!-- <div class="order"> -->
  <div class="std-rate" style="width: 100%">
    <!-- <div class="span-2">
        <StdRateItem :period="period" :city="cities[5]" />
      </div> -->
    <div class="span-2" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
      <StdRateItem :period="period" :than="than" :city="item" />
    </div>
  </div>
</template>

<script>
import StdRateItem from "./sub/std/StdRateItem.vue";
export default {
  name: "StdRate",
  components: { StdRateItem },
  props: {
    period: {
      type: String,
      default: "日",
    },
    than: {
      type: String,
      default: "同比",
    },
  },
  data() {
    return {
      // data: null
    }
  },
  computed: {
    stdData() {
      return this.$store.getters.copilot.efficiency.stdRate
    },
    cities() {
      console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
      // let getterName = "";
      // switch (this.dataSource) {
      //   case "标准组件产出":
      //     getterName = "stdOutput";
      //     break;
      //   case "芯片产出":
      //     getterName = "chipOutput";
      //     break;
      //   case "BIPV产出":
      //     getterName = "bipvOutput";
      //     break;
      // }
      const _cities = [
        { name: "瑞昌", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
        { name: "邯郸",target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
        { name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
        { name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
        { name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
        { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
        { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
      ]
      if (this.stdData?.previous) {
        this.stdData?.previous.forEach(
          (v, idx) => {
            _cities[idx].previous = v ?? 0;
          }
        );
      }
      if (this.stdData?.target) {
        this.stdData?.target.forEach(
          (v, idx) => {
            _cities[idx].target = v ?? 0;
          }
        )
      }
      if (this.stdData?.current) {
        this.stdData?.current.forEach(
          (v, idx) => {
            _cities[idx].current = v ?? 0;
          }
        );
      }
      // 删掉凯盛光伏
      // _cities.splice(4, 1);
      let arr = []
      arr.push(_cities[0])
      arr.push(_cities[1])
      return arr;
    },
  },
  watch: {
    period() {
      this.data = this.$store.getters.copilot.efficiency.stdRate
    }
  },
  // data() {
  //   return {
  //     // cities: [
  //     //   { name: "瑞昌", target: 100, total: 200, current: 20 },
  //     //   { name: "邯郸", target: 200, total: 300, current: 20 },
  //     //   { name: "株洲", target: 300, total: 400, current: 20 },
  //     //   { name: "佳木斯", target: 400, total: 500, current: 20 },
  //     //   { name: "成都", target: 500, total: 600, current: 20 },
  //     //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
  //     //   { name: "蚌埠", target: 500, total: 600, current: 20 },
  //     // ],
  //   };
  // },
  methods: {},
};
</script>

<style scoped lang="scss">
.std-rate {
  display: flex;
  gap: 16px;
  // flex: 1 1 auto;
  flex-direction: column;
  // display: -webkit-box;
  flex-wrap: wrap;
  // align-items: center;
  // grid-template-columns: repeat(2, 1fr);
  // grid-template-rows: repeat(4, 1fr);
}
.std-rate::-webkit-scrollbar {
  display: none;
}
.flex-item{
  // flex: 1 1 auto;
  // width: 50%;
}
.span-2 {
  // flex: 1 1 auto;
  flex-basis: 100%;
}
</style>
