<template>
  <div id="container">
    <!-- 金额 站点数量 -->
    <div class="top-container">
      <div class="top-box">
        <div class="content right-transform">
          <TitleCmp content="采购计划" style="font-size: 20px;" />
          <div class="myBorder" style="display: flex;" @click="toMoney('money')">
            <div class="money-left">
              <!-- <div class="money-left-box">
                <p class="money-left-name">计划总金额&nbsp;(万元)</p>
                <p class="money-left-box-money">{{Number(isNaN(this.priceObject.totalPrice / 10000) ? 0 : this.priceObject.totalPrice / 10000).toFixed(0)}}</p>
              </div> -->
              <div class="money-left-box" style="margin-top: 12%;">
                <p class="money-left-name">已签合同金额&nbsp;(万元)</p>
                <p class="money-left-box-money">{{Number(isNaN(this.priceObject.finishPrice / 10000) ? 0 : this.priceObject.finishPrice / 10000).toFixed(0)}}</p>
              </div>
              <div class="money-left-box">
                <p class="money-left-name">已入场金额&nbsp;(万元)</p>
                <p class="money-left-box-money">{{Number(isNaN(this.priceObject.waifFinishPrice / 10000) ? 0 : this.priceObject.waifFinishPrice / 10000).toFixed(0)}}</p>
              </div>
              <div class="money-left-box" style="position: fixed;top: 10%;left: 29%;font-size: 18px;width: 96px;">
                <p style="transform: translateX(23px);">进场比</p>
              </div>
            </div>
            <div class="moneyChart"></div>
          </div>
        </div>
      </div>
      <div class="top-box" style="margin-left: 16px">
        <div class="content right-transform">
          <TitleCmp content="终端数量" style="font-size: 20px;" />
          <div class="myBorder" @click="toNmumber('number')">
            <div style="display: flex;flex-wrap: wrap;">
              <div class="numberChart" v-for="(item,index) in projectSiteNumber" :key="index">
                <span :class="item.icon"></span>
                <span class="numberAndName">
                  <span style="font-weight:700;">{{item.name}}</span>
                  <span>{{item.number}}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 业财一体 -->
    <div class="bottom-three">
      <div class="content">
        <TitleCmp content="业财一体" style="font-size: 20px;" />
        <div style="height: 89%;cursor: pointer;" class="myBorder">
          <div class="yujing">
            <div class="yujing-box" @click="toWarning('Business','1')">
              <div class="yujing-name">{{counters[0].name}}</div>
			  <div class="yujing-boxm">
				<countTo class="animation counter" ref="countTo" :startVal='0' :endVal='counters[0].value' :duration='duration'></countTo> 
				<span class="yujing-boxm-txt">万</span>  
			  </div>
            </div>
            <div class="yujing-box" @click="toWarning('Business','1')">
              <div class="yujing-name">{{counters[1].name}}</div>
			  <div class="yujing-boxm">
				<countTo class="animation counter" ref="countTo1" :startVal='0' :endVal='counters[1].value' :duration='duration'></countTo>
			  </div>
            </div>
            <div class="yujing-box" @click="toWarning('Business','2')">
              <div class="yujing-name">{{counters[2].name}}</div>
			  <div class="yujing-boxm">
			  	<countTo class="animation counter" ref="countTo2" :startVal='0' :endVal='counters[2].value' :duration='duration'></countTo>
			  	<span class="yujing-boxm-txt">万</span>  
			  </div>
            </div>
            <div class="yujing-box" @click="toWarning('Business','2')">
              <div class="yujing-name">{{counters[3].name}}</div>
			  <div class="yujing-boxm">
			  	<countTo class="animation counter" ref="countTo3" :startVal='0' :endVal='counters[3].value' :duration='duration'></countTo>
			  </div>
            </div>
            <div class="yujing-box" @click="toWarning('Business','3')">
              <div class="yujing-name">{{counters[4].name}}</div>
			  <div class="yujing-boxm">
			  	<countTo class="animation counter" ref="countTo4" :startVal='0' :endVal='counters[4].value' :duration='duration'></countTo>
			  	<span class="yujing-boxm-txt">万</span>  
			  </div>
            </div>
            <div class="yujing-box" @click="toWarning('Business','3')">
              <div class="yujing-name">{{counters[5].name}}</div>
			  <div class="yujing-boxm">
			  	<countTo class="animation counter" ref="countTo5" :startVal='0' :endVal='counters[5].value' :duration='duration'></countTo>
			  </div>
            </div>
            <div class="yujing-box" @click="toWarning('Business','4')">
              <div class="yujing-name">{{counters[6].name}}</div>
			  <div class="yujing-boxm">
			  	<countTo class="animation counter" ref="countTo6" :startVal='0' :endVal='counters[6].value' :duration='duration'></countTo>
			  	<span class="yujing-boxm-txt">万</span>  
			  </div>
            </div>
            <div class="yujing-box" @click="toWarning('Business','4')">
              <div class="yujing-name">{{counters[7].name}}</div>
			  <div class="yujing-boxm">
			  	<countTo class="animation counter" ref="countTo7" :startVal='0' :endVal='counters[7].value' :duration='duration'></countTo>
			  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
import TitleCmp from "@/components/TitleCmp.vue";
import {
  getWarnInfo, // 预警接口
  getProjectPriceAPI, // 项目金额接口
  getProjectSiteNumberAPI, // 项目终端数量量接口
} from "../api";
import countTo from 'vue-count-to';
export default {
  components: {
    TitleCmp,
    countTo,
  },
  props: {
    mergedData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      timerId: [1, 2, 3, 4, 5, 6, 7, 8], // 定时器
      timer: 'day', // 日期
      id: '1',
      level: 1,
      counters: [
        { name: '入库单金额 ', value: 0 },
        { name: '入库单条数', value: 0 },
        { name: '出库单金额', value: 0 },
        { name: '出库单条数', value: 0 },
        { name: '暂估入库额 ', value: 0 },
        { name: '暂估入库条数', value: 0 },
        { name: '暂估出库额', value: 0 },
        { name: '暂估出库条数', value: 0 }
      ],
      countersTimer: null, // 预警定时器
      priceObject: {},  // 项目金额
      projectSiteNumber: [
        { name: '水稳站数量', icon: 'iconfont icon-shui', number: 0 },
        { name: '磅站数量', icon: 'iconfont icon-bangzhan', number: 0 },
        { name: '混凝土站数量', icon: 'iconfont icon-hunningtu', number: 0 },
        { name: '沥青站数量', icon: 'iconfont icon-liqing', number: 0 },
        { name: '物料系统数量', icon: 'iconfont icon-xitong', number: 0 },
        { name: '移动收发数量', icon: 'iconfont icon-yidong', number: 0 },

      ],  //项目站点数量
      duration: 1, // 需要滚动的时间
      planData: 0
    };
  },
  mounted () {
    this.StartCon(this.timer, this.id)
    this.getProjectPrice(this.id)
    this.getProjectSiteNumber(this.id)
  },
  watch: {
    mergedData (newValue) {
      this.id = newValue.id
      this.timer = newValue.timer
      this.level = newValue.level
      this.StartCon(newValue.timer, newValue.id)
      this.getProjectPrice(newValue.id)
      this.getProjectSiteNumber(newValue.id)
    },
  },
  methods: {
    // 获取项目金额
    async getProjectPrice (id) {
      const res = await getProjectPriceAPI({
        org_id: id,
      });
      if (res.data.code === 0) {
        this.priceObject = res.data.data
        // 完成进度
        this.planData = (Number(this.priceObject.waifFinishPrice / 10000).toFixed(0)) / (Number(this.priceObject.finishPrice / 10000).toFixed(0)) * 100
      }
      this.getWaterDrop()
    },
    // 封装路由跳转方法
    routePush (route, level, id) {
      if (level == 1) {
        const routerJump = this.$router.resolve(`/${route}F`)
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      } else if (level == 2) {
        const routerJump = this.$router.resolve(`/${route}C`)
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      } else if (level == 3 && route == 'warning') {
        const routerJump = this.$router.resolve(`/${route}C`)
        window.open(routerJump.href, '_blank')
        localStorage.setItem("RGid", id);
      }
    },
    // 去往金额详情页
    toMoney (route) {
      this.routePush(route, this.level, this.id)
    },
    // 获取终端数量数量
    async getProjectSiteNumber (id) {
      const res = await getProjectSiteNumberAPI({
        org_id: id,
      });
      if (res.data.code === 0) {
        let result = res.data.data
        for (let i = 0; i < this.projectSiteNumber.length; i++) {
          let currentItem = this.projectSiteNumber[i];
          // 使用动态键名，根据索引获取对应的值
          let key = Object.keys(result)[i];
          if (result.hasOwnProperty(key)) {
            currentItem.number = result[key];
          }
        }
      }
    },
    // 去往站点详情页
    toNmumber (route) {
      this.routePush(route, this.level, this.id)
    },
    // 获取 预警信息
    async StartCon (timer, id) {
      const res = await getWarnInfo({
        onpage: timer,
        org_id: id,
      });
      if (res.data.code === 0) {
		var warningData = res.data.data
        this.counters[0].value = warningData.sinprice
        this.counters[1].value = warningData.sinnum
        this.counters[2].value = warningData.soutprice
        this.counters[3].value = warningData.soutnum
        this.counters[4].value = warningData.zsinprice
        this.counters[5].value = warningData.zsinnum
        this.counters[6].value = warningData.zsoutprice
        this.counters[7].value = warningData.zsoutnum

        /*for (let i = 0; i < warningData.length && i < this.counters.length; i++) {
          this.counters[i].value = warningData[i].count
        }*/
      }
    },
    // 跳转预警详情页
    toWarning (route, info) {
      this.routePush(route, this.level, this.id)
      localStorage.setItem("info", info);
    },
    // 水滴图
    getWaterDrop () {
      //水滴图
      const ratio = parseInt(isNaN(this.planData) ? 0 : this.planData); //占比数值  总数为100
      const ratioLength = 2; //波浪数量
      const ratioArr = [];
      // 百分比数小于100 显示绿色
      // 百分比数小于大于100 显示红色
      let ratioColor
      if (ratio > 100) {
        ratioColor = ["#FF0000", "#B22222"]; //波浪内红色
      } else {
        ratioColor = ["#388383", "#61d9af"]; //波浪内绿色
      }
      for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(ratio / 100);
      }
      const option = {
        title: {
          text: ratio + "%",
          textStyle: {
            fontSize: 25,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "center",
        },
        series: [
          {
            type: "liquidFill",
            radius: "100%",
            center: ["50%", "50%"],
            color: ratioColor,
            data: ratioArr,
            backgroundStyle: {
              color: "#011346",
            },
            label: {
              normal: {
                formatter: "",
              },
            },
            outline: {
              show: false,
            },
          },
          {
            //粗的外圈
            type: "pie",
            radius: ["100%", "95%"],
            hoverAnimation: false,
            zlevel: 2,
            data: [
              {
                name: "",
                value: 100,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: ratioColor[1],
                    },
                    {
                      offset: 1,
                      color: ratioColor[1],
                    },
                  ]),
                  borderColor: this.acceptance > 100 ? "#FF0000" : ratioColor[1], // 根据条件设置边框颜色
                },
              },
            ],
          },
        ],
      };
      const myChart = echarts.init(document.querySelector(".moneyChart"));
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="less">
#container {
  padding: 0px;
  margin: 0px;
  width: 538px;
  height: 518px;
  overflow: hidden;
  transform: translate(75%, 75%) scale(2.5);
}
// 金额 站点数量-开始
.top-container {
  display: flex;
  width: 100%;
  height: 50%;
  .top-box {
    width: 49%;
    height: 97%;
    cursor: pointer;
    .content {
      width: 100%;
      height: 100%;
      .money-left {
        color: #fff;
        margin-left: 3%;
        width: 40%;
        margin-top: 5%;
        .money-left-box {
          margin-bottom: 10%;
          .money-left-name {
            width: 144px;
          }
          .money-left-box-money {
            margin-top: 10%;
            font-size: 13px;
            color: #fff;
            font-weight: 600;
          }
        }
      }
      .moneyChart {
        // background: rebeccapurple;
    width: 100px;
    height: 100px;
    transform: translate(40px, 65px);
      }
    }
  }
}
.numberChart {
  display: flex;
  width: 127px;
  margin-top: 17px;
  .numberAndName {
    display: flex;
    flex-direction: column;
    width: 83px;
    height: 40px;
    span {
      font-size: 14px;
      color: #fff;
      width: 100px;
    }
  }
}
// 金额 站点数量-结束

// 预警-开始
.bottom-three {
  width: 100%;
  margin-top: -0.5%;
  height: 46%;

  .content {
    width: 100%;
    height: 100%;

    .yujing {
      display: flex;
      flex-wrap: wrap; /* 允许内容换行到下一行 */
      justify-content: space-between; /* 水平方向等间距 */
      height: 100%;

      .yujing-box {
        display: flex;
        flex-direction: column;
        align-items: center;
		justify-content:center;
        width: 22%;
        font-size: 16px;
        font-weight: bold;
		.yujing-boxm{
			position:relative;
			padding-right:20px;
			margin-right:-20px;
			margin-top:1px;
		}
		.yujing-boxm-txt{
			font-size:16px;
			color:#fff;
			position:absolute;
			right:0;
			top:13px;
		}
        .yujing-name {
          color: #fff;
          // background: rgb(1,1,3,.5);
        }
		.counter{
			font-size:32px;
		}
        @keyframes count {
          0% {
            color: rgb(80, 139, 248);
          }
          100% {
            color: rgb(80, 139, 248);
          }
        }

        .animation {
          animation: count 15s linear infinite;
          transform: translateY(20px) scale(1.8);
        }
      }
    }
  }
}
// 预警-结束
// border通用样式
.myBorder {
  height: 85%;
  box-shadow: rgba(1, 100, 177, 1.3) 0px 0px 40px inset;
  border: 1px solid rgba(1, 100, 177, 0.9);
  background-color: transparent;
  background-origin: content-box !important;
  // background-color: rgb(2, 8, 20) !important;
  background-color: rgb(1, 19, 70) !important;
  background-image: linear-gradient(
      #465376 2px,
      transparent 2px,
      transparent calc(100% - 2px),
      #465376 calc(100% - 2px),
      #465376 100%
    ),
    linear-gradient(
      90deg,
      #465376 2px,
      transparent 2px,
      transparent calc(100% - 2px),
      #465376 calc(100% - 2px),
      #465376 100%
    ),
    linear-gradient(
      #465376 2px,
      transparent 2px,
      transparent calc(100% - 2px),
      #465376 calc(100% - 2px),
      #465376 100%
    ),
    linear-gradient(
      90deg,
      #4cc7f3 2px,
      transparent 2px,
      transparent calc(100% - 2px),
      #4cc7f3 calc(100% - 2px),
      #4cc7f3 100%
    ) !important;
  background-repeat: no-repeat !important;
  background-position: top left, top left, bottom right, bottom right !important;
  background-size: 10px 100%, 100% 10px !important;
}
</style>
