<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
 * @LastEditTime: 2024-05-11 15:05:17
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div v-if="period == '日'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="title" :value="city.current" />
      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
    </div>
  </div>
  <div v-else-if="period == '周'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="title" :value="city.current" />
      <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
    </div>
  </div>
  <div v-else-if="period == '月'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
      <ProgressBar :period="period" :title="title" :value="city.previous" />
    </div>
  </div>
  <div v-else="period == '年'" class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
      <ProgressBar :period="period" :title="title" :value="city.previous" />
    </div>
  </div>
</template>

<script>
import CityName from "./CityName.vue";
import ProgressBar from "./ProgressBar.vue";

export default {
  name: "StdRateItem",
  components: { CityName, ProgressBar },
  props: {
    city: {
      type: Object,
      required: true,
    },
    period: {
      type: String,
      default: "日",
    }
  },
  data() {
    return {
      showDay:true,
    };
  },
  computed: {
    title() {
      switch (this.period) {
        case "日":
          return "今日"
        case "周":
          return  "本周"
        case "月":
          const year = new Date().getFullYear();
          const month = new Date().getMonth() + 1;
          return `${year - 1}年${month}月累计`
        case "年": {
          const year = new Date().getFullYear();
          // return [
           return `${year - 1}年累计`
          // ];
        }
        default:
         return "今日"
      }
    },
    titleEnd() {
      switch (this.period) {
        // case "日":
        //   return "今日"
        // case "周":
        //   return "本周"
        case "月":
          const year = new Date().getFullYear();
          const month = new Date().getMonth() + 1;
          return  `${year}年${month}月目标`
        case "年": {
          const year = new Date().getFullYear();
          // return [
          return  `${year}年目标`
          // ];
        }
      }
    }
  },
};
</script>

<style scoped lang="scss">
.std-rate-item {
  box-shadow: inset 0 0 12px 2px #fff3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
}

.std-rate-item__value {
  flex: 1;
  margin: 6px;
  display: flex;
  gap: 12px;
  height: 60px;
  flex-direction: column;
  justify-content: center;
}
</style>
