<template>
  <modulen>
    <template #title>日常/专项养护</template>
    <template #end>
      <date-switcher :type="4" date-lable="年"></date-switcher>
    </template>
    <div class="spdl-cont">
      <div class="spdl-top">
        <div class="spdl-top-item">日常养护</div>
        <div class="spdl-top-item cursor-pointer" @click="onSpecalTitleClick">
          专项养护
        </div>
      </div>
      <div class="spdl-bot">
        <div class="spdl-bot-item">
          <div class="ejbt">日常养护预算</div>
          <div class="yhcont">
            <div class="yh-charts">
              <Ect :options="dlectOpts1" />
            </div>
            <div class="yhys-right yhys-right-blue">
              <div class="yhys-tit">
                <span class="yhysicon"><i class="el-icon-caret-right"></i></span
                >日常养护工程资金（万元）
              </div>
              <div class="yhys-cell yhys-cell-q">
                <span class="yc-text1">计划资金</span>
                <span class="yc-text2">{{
                  formatThousand(
                    ((projInfo?.conservemoneybudget || 0) +
                      (projInfo?.conservespemoneybudget || 0)).toFixed(2)
                  )
                }}</span>
              </div>
              <div class="yhys-cell yhys-cell-s">
                <span class="yc-text1">计量金额</span>
                <span class="yc-text2">{{
                  formatThousand(
                    ((projInfo?.conservemoney || 0) +
                      (projInfo?.conservespemoney || 0)).toFixed(2)
                  )
                }}</span>
              </div>
            </div>
          </div>
          <div class="yhcont">
            <div class="yh-charts">
              <Ect :options="dlectOpts2" />
            </div>
            <div class="yhys-right yhys-right-green">
              <div class="yhys-tit">
                <span class="yhysicon"><i class="el-icon-caret-right"></i></span
                >养护工单数量（个）
              </div>
              <div class="yhys-cell yhys-cell-q">
                <span class="yc-text1">派单数量</span>
                <span class="yc-text2">{{
                  taskInfo ? taskInfo.orderedCount : 0
                }}</span>
              </div>
              <div class="yhys-cell yhys-cell-s">
                <span class="yc-text1">完成数量</span>
                <span class="yc-text2">{{
                  taskInfo ? taskInfo.finishCount : 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="spdl-bot-item">
          <div class="ejbt">
            <span>
              {{
                specialType === 1
                  ? "非政策性专项养护预算"
                  : specialType === 2
                  ? "政策性专项养护预算"
                  : "专项养护预算"
              }}
            </span>
          </div>
          <div class="yhcont">
            <div class="yh-charts">
              <Ect :options="spectOpts1" />
            </div>
            <div class="yhys-right yhys-right-blue">
              <div class="yhys-tit">
                <span class="yhysicon">
                  <i class="el-icon-caret-right"></i>
                </span>
                <span>
                  {{
                    specialType === 1
                      ? "非政策性"
                      : specialType === 2
                      ? "政策性"
                      : ""
                  }}专项养护工程资金（万元）</span
                >
              </div>
              <div class="yhys-cell yhys-cell-q">
                <span class="yc-text1">计划资金</span>
                <span class="yc-text2">
                  {{
                    formatThousand(
                      specialType === 1
                        ? projInfo?.nospecialmoneybudget
                        : specialType === 2
                        ? projInfo?.specialmoneybudget
                        : ((projInfo?.nospecialmoneybudget || 0) +
                          (projInfo?.specialmoneybudget || 0)).toFixed(2)
                    )
                  }}
                </span>
              </div>
              <div class="yhys-cell yhys-cell-s">
                <span class="yc-text1">计量金额</span>
                <span class="yc-text2">
                  {{
                    formatThousand(
                      specialType === 1
                        ? projInfo?.nospecialmoney
                        : specialType === 2
                        ? projInfo?.specialmoney
                        : ((projInfo?.nospecialmoney || 0) +
                          (projInfo?.specialmoney || 0)).toFixed(2)
                    )
                  }}
                </span>
              </div>
            </div>
          </div>
          <div class="yhcont">
            <div class="yh-charts">
              <Ect :options="spectOpts2" />
            </div>
            <div class="yhys-right yhys-right-green">
              <div class="yhys-tit">
                <span class="yhysicon"
                  ><i class="el-icon-caret-right"></i
                ></span>
                <span>专项养护数量（个）</span>
              </div>
              <div class="yhys-cell yhys-cell-q">
                <span class="yc-text1">计划数量</span>
                <span class="yc-text2">{{
                  formatThousand(zxNumInfo?.plannedproject || 0)
                }}</span>
              </div>
              <div class="yhys-cell yhys-cell-s">
                <span class="yc-text1">完成数量</span>
                <span class="yc-text2">{{
                  formatThousand(zxNumInfo?.finishproject || 0)
                }}</span>
              </div>
              <div class="yhys-cell yhys-cell-s">
                <span class="yc-text1">进行中的数量</span>
                <span class="yc-text2">{{
                  zxNumInfo?.runningproject || 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </modulen>
</template>

<script>
import zxrcyhje from "@/assets/images/curingBussiness/zxrcyh-je.png";
import zxrcyhsl from "@/assets/images/curingBussiness/zxrcyh-sl.png";
import { formatThousand } from "@/utils/util";
import {
  budgetMoneyYear,
  specialConserveCount,
  taskStatusCount,
} from "@/api/curingBusiness";
import moment from "moment";
import { mapState } from "vuex";
export default {
  data() {
    return {
      dlectOpts1: {},
      dlectOpts2: {},
      //   spectOpts1: {},
      spectOpts2: {},
      query: {
        level: 0,
        dimension: "",
        year: moment(this.appDate).format("yyyy"),
        timemode: "month",
      },
      projInfo: {},
      zxNumInfo: {},
      taskInfo: {},
      specialType: 0,
    };
  },
  computed: {
    ...mapState({
      appDate: (state) => state.appDate,
    }),
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
    spectOpts1() {
      //专项养护工程资金
      const val3 =
        (this.specialType === 1
          ? this.projInfo?.nospecialmoney / this.projInfo?.nospecialmoneybudget
          : this.specialType === 2
          ? this.projInfo?.specialmoney / this.projInfo?.specialmoneybudget
          : (this.projInfo?.nospecialmoney + this.projInfo?.specialmoney) /
            (this.projInfo?.nospecialmoneybudget +
              this.projInfo?.specialmoneybudget)) || 0;
      return this.getCharts(
        val3,
        "#3DAFFF",
        "#1C517B",
        zxrcyhje,
        "专项养护工程资金",
        "支出金额"
      );
    },
  },
  watch: {
    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();
    },
    appDate(newVal) {
      this.query.year = moment(newVal).format("yyyy");
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    formatThousand,
    async getData() {
      // 养护工单数量
      try {
        const datax = await taskStatusCount(
          Object.assign({}, this.query, {
            timemode: "year",
            timeflag: moment(this.appDate).format("yyyy"),
          })
        );
        this.taskInfo = datax.msgContent[0];
        // console.log(184,datax);
        // console.log("msgContent", this.taskInfo);
      } catch (err) {}
      const data = await budgetMoneyYear(this.query);
      this.projInfo = data.msgContent[0];
      const data1 = await specialConserveCount(this.query);
      this.zxNumInfo = data1.msgContent[0];
      //判断是否是数字
      var regPos = /^[0-9]+.?[0-9]*/;
      //日常养护工程资金
      //   const val1 = regPos.test(
      //     this.projInfo?.conservemoney / this.projInfo?.conservemoneybudget
      //   )
      //     ? this.projInfo?.conservemoney / this.projInfo?.conservemoneybudget
      //     : 0;
      const val1 =
        ((this.projInfo?.conservemoney || 0) +
          (this.projInfo?.conservespemoney || 0)) /
          ((this.projInfo?.conservemoneybudget || 0) +
            (this.projInfo?.conservespemoneybudget || 0)) || 0;
      this.dlectOpts1 = this.getCharts(
        val1,
        "#3DAFFF",
        "#1C517B",
        zxrcyhje,
        "日常养护工程资金",
        "支出金额"
      ); // 饼图数值， 渐变色1， 渐变色2, 圆环中间的图片, 标题， 类型

      //日常养护数量
      this.dlectOpts2 = this.getCharts(
        this.taskInfo?.finishCount / this.taskInfo?.orderedCount || 0,
        "#00E3FF",
        "#066176",
        zxrcyhsl,
        "日常养护数量",
        "完成数量"
      );

      //专项养护数量
      this.spectOpts2 = this.getCharts(
        this.zxNumInfo?.finishproject / this.zxNumInfo?.plannedproject || 0,
        "#00E3FF",
        "#066176",
        zxrcyhsl,
        "专项养护数量",
        "完成数量"
      );
    },
    getCharts(val, color1, color2, icon, tit, typename) {
      // 数据源
      // const val2 = (val / 360) * 100;
      const val2 = (val * 100).toFixed(2);

      return {
        tooltip: {
          trigger: "item",
          // formatter: '{a} <br/>{b}({d}%)'
          formatter: (params) => {
            if (params.name == "总数") {
              return "";
            } else {
              return `${params.seriesName}</br>${params.name}：${params.value}%`;
            }
          },
        },
        graphic: {
          //图形中间图片
          elements: [
            {
              type: "image",
              style: {
                image: icon, //图片地址
                width: 30,
                height: 30,
              },
              left: "center",
              top: "center",
            },
          ],
        },
        series: [
          {
            name: tit,
            type: "pie",
            startAngle: 90, // 环图起始位置：正下发
            center: ["50%", "50%"],
            radius: ["50%", "57%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "240人",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                name: typename,
                value: val2,
                label: {
                  normal: {
                    fontSize: 18,
                    color: "#fff",
                    fontWeight: "bolder",
                  },
                },
                itemStyle: {
                  normal: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 1,
                      x2: 0.5,
                      y2: 0,
                      colorStops: [
                        // !! 在此添加渐变过程色 !!
                        { offset: 0, color: color1 },
                        { offset: 0.5, color: color1 },
                        { offset: 1, color: color2 },
                      ],
                    },
                  },
                },
              },
              {
                name: "总数",
                value: 100 - val2,
                label: {
                  normal: {
                    show: false,
                    fontSize: 0,
                  },
                },
                itemStyle: {
                  normal: {
                    color: color2,
                  },
                  emphasis: {
                    color: color2,
                  },
                },
                hoverAnimation: false,
              },
            ],
          },
        ],
      };
    },
    onSpecalTitleClick() {
      this.specialType = (this.specialType + 1) % 3;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.spdl-cont {
  width: 100%;
  .spdl-top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-top: vh(50);
  }
  .spdl-top-item {
    width: vw(335);
    height: vh(50);
    background: url("@/assets/images/curingBussiness/zxyhbg.png");
    background-size: 100% 100%;
    font-size: vw(18);
    text-align: center;
    line-height: vh(50);
    font-family: "YouSheBiaoTiHei";
    letter-spacing: 1px;
  }
  .spdl-bot {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: vh(50);
  }
  .spdl-bot-item {
    width: 48%;
  }
  .ejbt {
    width: 100%;
    height: 15px;
    background: url("@/assets/images/curingBussiness/sectitbg.png");
    background-size: 100% 100%;
    font-size: vw(11);
    padding-left: vw(23);
    line-height: 15px;
  }
  .yhcont {
    display: flex;
  }
  .yh-charts {
    width: vw(145);
    height: vw(145);
    position: relative;
  }
  .yhys-right {
    width: calc(100% - vw(145));
  }
  .yhys-tit {
    position: relative;
    width: 100%;
    letter-spacing: 1px;
    padding: 6px 18px 5px 18px;
    margin-top: vh(30);
  }
  .yhysicon {
    position: absolute;
    left: -5px;
  }
  .yhys-cell {
    display: flex;
    justify-content: space-between;
    height: vh(18);
    padding-left: 18px;
    margin-top: vh(15);
  }
  .yc-text1 {
    color: #909fac;
  }
  .yc-text2 {
    font-family: "DinNextRegular";
  }
  .yhys-right-blue {
    .yhys-tit {
      border: 1px solid #0c273d;
      background: linear-gradient(
        to right,
        transparent,
        rgba(61, 175, 255, 0.5)
      );
    }
    .yhysicon {
      color: #3dafff;
    }
    .yhys-cell-q {
      border-left: 3px solid #1c517a;
    }
    .yhys-cell-s {
      border-left: 3px solid #3dafff;
    }
  }
  .yhys-right-green {
    .yhys-tit {
      border: 1px solid #082536;
      background: linear-gradient(
        to right,
        transparent,
        rgba(0, 227, 255, 0.5)
      );
    }
    .yhysicon {
      color: #00e3ff;
    }
    .yhys-cell-q {
      border-left: 3px solid #07657a;
    }
    .yhys-cell-s {
      border-left: 3px solid #00e3ff;
    }
  }
}
</style>
