<!-- 
    filename: StdRateItem.vue
    author: liubin
    date: 2024-04-29 08:59:33
    description: 
-->

<template>
  <div class="std-rate-item">
    <CityName :value="city.name" />
    <div class="std-rate-item__value">
      <ProgressBar title="24年目标" :total="city.target" :value="city.target" />
      <ProgressBar
        title="24年累计"
        :total="city.target"
        :value="city.thisYear"
      />
    </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,
    },
  },
  data() {
    return {};
  },
};
</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>
