<template>
  <div class="minadata-cont">
    <div class="md-head">养护业务主数据</div>
    <div class="md-itembox">
      <div
        class="md-item"
        :style="index === 3 && 'min-width: 184px;'"
        v-for="(item, index) in datalist"
        :key="index"
      >
        <img :src="item.icon" />
        <div>
          <div class="m-i-text">
            {{ item.text }}
            <span
              v-if="item.percent"
              class="m-i-text-2"
              :style="{ color: item.color }"
              >/%</span
            >
            <span v-else class="m-i-text-2" :style="{ color: item.color }">
              /万元</span
            >
          </div>
          <div class="m-i-text3" :style="{ color: item.color }">
            {{ formatThousand(item.num) }}
          </div>
        </div>
        <div v-if="index === 2 || index === 3" class="absolute top-full left-0">
          <date-switcher
            v-if="index === 2"
            v-model="type1"
            :options="options1"
            align="left"
            @change="(val) => (type1 = val)"
          ></date-switcher>
          <date-switcher
            v-else
            v-model="type2"
            :options="options2"
            align="left"
            style="width:180px;"
            @change="(val) => (type2 = val)"

          ></date-switcher>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ndysje from "@/assets/images/curingBussiness/ndysje.png";
import ysyysze from "@/assets/images/curingBussiness/ysyysze.png";
import rcyhxmjfje from "@/assets/images/curingBussiness/rcyhxmjfje.png";
import zxyhxmjfje from "@/assets/images/curingBussiness/zxyhxmjfje.png";
import qxyhxmjfje from "@/assets/images/curingBussiness/qxyhxmjfje.png";
import { formatThousand } from "@/utils/util";
import { budgetMoneyYear } from "@/api/curingBusiness";
import moment from "moment";
export default {
  data: () => ({
    query: {
      level: 0,
      dimension: "",
      year: moment(new Date()).format("yyyy"),
    },
    data: null,
    type1: 1,
    type2: 1,
  }),
  computed: {
    getDate() {
      this.query.year = moment(this.$store.state.appDate).format("yyyy");
      return this.$store.state.appDate;
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
    options1() {
      return [
        { type: 1, label: "形象进度" },
        { type: 2, label: "计量进度" },
      ];
    },
    options2() {
      return [
        { type: 1, label: "单公里成本" },
        { type: 2, label: "综合公里成本" },
      ];
    },
    datalist() {
      const { type1, type2 } = this;
      const data = this.data || {};

      // 已使用养护预算
      //   this.datalist[0].num = data.msgContent[0]?.budgetsum || 0;
      //   // 已使用预算
      //   this.datalist[1].num = data.msgContent[0]?.alreadycount || 0;

      //   // 形象进度 expectedmoney/budgetsum
      //   // this.datalist[2].num = data.msgContent[0]?.conservePerc||0 ;
      //   const { expectedmoney, budgetsum } = data;
      //   this.datalist[2].num = ((expectedmoney / budgetsum) * 100).toFixed(2);

      //   // 单公里成本
      //   this.datalist[3].num = data.msgContent[0]?.budgetpermile || 0;
      //   // 综合单公里成本
      //   this.datalist[4].num = data.msgContent[0]?.budgetpermilezonghe || 0;
      const arr = [
        {
          icon: ndysje,
          text: "年度预算金额",
          color: "#4999FF",
          num: data.budgetsum || 0,
        },
        {
          icon: ysyysze,
          text: "年度计量金额",
          color: "#00DDCB",
          num: data.alreadycount || 0,
        },
      ];
      if (type1 === 1) {
        arr.push({
          icon: rcyhxmjfje,
          text: "形象进度",
          color: "#3DC6FF",
          num: ((data.expectedmoney / data.budgetsum) * 100 || 0).toFixed(2),
          percent: true,
        });
      } else {
        arr.push({
          icon: rcyhxmjfje,
          text: "计量进度",
          color: "#3DC6FF",
          num: ((data.alreadycount / data.budgetsum) * 100 || 0).toFixed(2),
          percent: true,
        });
      }
      if (type2 === 1) {
        arr.push({
          icon: zxyhxmjfje,
          text: "单公里成本",
          color: "#FFCE5A",
          num: data.budgetpermile || 0,
        });
      } else {
        arr.push({
          icon: zxyhxmjfje,
          text: "综合公里成本",
          color: "#FFCE5A",
          num: data.budgetpermilezonghe || 0,
        });
      }
      return arr;
    },
  },
  watch: {
    type1() {
      console.log(444, this.type1);
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = level;
      this.query.dimension = roadId;
      this.getData();
    },
    getDate(val) {
      this.query.year = moment(val).format("yyyy");
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    formatThousand,
    async getData() {
      const data = await budgetMoneyYear(this.query);
      if (!data || !data.msgContent.length) {
        return;
      }
      this.data = data.msgContent[0];
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.minadata-cont {
  padding: 15px;
  width: 100%;
  height: vh(100);
  .md-head {
    width: 100%;
    height: vh(32);
    background: url("@/assets/images/curingBussiness/md-head-bg.png");
    background-size: 100% 100%;
    font-style: oblique;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    line-height: vh(20);
  }
  .md-itembox {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: vh(30);
  }
  .md-item {
    position: relative;
    display: flex;
  }
  img {
    width: vw(65);
    height: vw(65);
    margin-right: 14px;
  }
  .m-i-text {
    font-size: vw(15);
    color: #c7ddff;
  }
  .m-i-text3 {
    font-size: vw(26);
    font-family: "DinNextRegular";
  }
}
</style>
