<template>
  <div class="Sevenwrapper">
    <div class="title">
      <div class="icon"></div>
      <p>处置率/处置数统计</p>
    </div>
    <div class="searchWrapper">
      <el-date-picker
        class="datePicker"
        size="mini"
        v-model="dateTime"
        type="daterange"
        align="right"
        :clearable="false"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        @change="initData"
      ></el-date-picker>
      <el-select
        class="selectPicker"
        size="mini"
        v-model="netAreaId"
        filterable
        placeholder="请选择网格"
        @change="initData"
      >
        <el-option
          v-for="item in netArea"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="HTR_main">
      <div>
        <div class="sub_panel">
          <p class="sub_bg">{{ data.disposed }}</p>
        </div>
        <p class="panel_label">已处置</p>
      </div>
      <div>
        <div id="panel" style="width: 160px; height: 120px"></div>
        <p class="panel_label" style="margin-top: -13px">处置率</p>
      </div>
      <div>
        <div class="sub_panel">
          <p class="sub_bg">{{ data.waitingDispose }}</p>
        </div>
        <p class="panel_label">待处置</p>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getFullDate, getSevenPassDate } from "@/utils/utils";
import { queryCustom, queryNetArea } from "@/api/api";

export default {
  name: "HandleTotalRate",
  props: {
    typeId: {
      type: Number
    }
  },
  watch: {
    typeId: function () {
      this.initNetArea();
      this.initData();
      this.initEcharts();
    },
  },
  data() {
    return {
      netArea: [{ value: "0", label: "全部" }],
      data: {},
      dateTime: [getSevenPassDate(), getFullDate()],
      netAreaId: "0",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  methods: {
    initNetArea() {
      console.log(this.typeId);
      this.netArea = [{ value: "0", label: "全部" }];
      queryNetArea({typeId: this.typeId}).then((res) => {
        this.netArea = this.netArea.concat(
          res.data.map((item) => {
            return {
              value: item.id,
              label: item.name,
            };
          })
        );
      });
    },
    initData() {
      const { dateTime, netAreaId } = this;
      let parmas = {
        createDateFrom: dateTime[0],
        createDateTo: dateTime[1],
        netAreaId: netAreaId,
        typeId: this.typeId
      };
      queryCustom(parmas).then((res) => {
        this.data = res.data.sevenReportData;
        this.panelChart.setOption({
          series: [{ data: [{ value: this.data.disposeRate }] }],
        });
      });
    },
    initEcharts() {
      this.panelChart = echarts.init(document.getElementById("panel"));
      this.panelChart.setOption({
        tooltip: {
          formatter: "处置率 : {c}%",
        },
        series: [
          {
            type: "gauge",
            radius: "100%",
            axisLine: {
              lineStyle: {
                color: [
                  //仪表盘背景颜色渐变
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#FF4128",
                      },
                      {
                        offset: 0.6,
                        color: "#4BFF8A",
                      },
                      {
                        offset: 1,
                        color: "#4FF8E9",
                      },
                    ]),
                  ],
                ],
                width: 18,
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            detail: {
              formatter: "{value}%",
              color: "#FC672C",
              fontWeight: "500",
              fontSize: "28",
            },
            data: [{ value: 0 }],
          },
        ],
      });
    },
  },
  mounted() {
    if (JSON.parse(localStorage.getItem('accountInfo')).level == 2) {
       console.log(111)
    } else {
      this.initNetArea();
      this.initData(); 
    }
    this.initEcharts();
  },
};
</script>

<style lang="stylus">
.Sevenwrapper {
  width: 384px;
  height: 248px;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
  border-radius: 4px;
  border: 2px solid #00356D;

  .title {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, #072B4D 0%, #134778 100%);

    .icon {
      width: 2px;
      height: 20px;
      background: #5CE3FB;
      border-radius: 2px;
    }

    p {
      margin-left: 10px;
      font-size: 20px;
      font-weight: 400;
      color: #5CE3FB;

      span {
        font-weight: 500;
        color: #FC672C;
      }
    }
  }

  .searchWrapper {
    padding: 0 14px;
    display: flex;
    align-items: center;
    margin: 14px 0 22px;

    .datePicker {
      width: 200px;
      background: #123154;
      border: none;
      border-radius: 14px;

      .el-range-input {
        background: #123154;
        color: #6A8EB7;
      }

      .el-range-separator {
        color: #6A8EB7;
      }
    }

    .selectPicker {
      width: 140px;
      margin-left: 12px;
      background: #123154;
      border-radius: 14px;

      .el-input__inner {
        border: none;
        color: #6A8EB7;
      }
    }
  }

  .HTR_main {
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .panel_label {
      margin-top: 7px;
      text-align: center;
      line-height: 20px;
      font-size: 14px;
      font-family: MicrosoftYaHeiUI;
      color: #ffffff;
    }

    .sub_panel {
      width: 95px;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
      font-weight: bold;
      background: url('~@/assets/sub_panel.png') no-repeat;
      background-size: cover;

      .sub_bg {
        height: 50px;
        width: 50px;
        margin-top: 15px;
        background: url('~@/assets/sub_panel_bg.png') no-repeat;
        background-size: 50px 50px;
        line-height: 50px;
        text-align: center;
        color: #FC672C;
        font-size: 16px;
        font-weight: bold;
        transform: scale(1);
        /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
        animation-name: heartbeat; /* 动画名称 */
        animation-duration: 3s; /* 动画时长3秒 */
        animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        animation-iteration-count: infinite; /* 播放次数：无限 */
        /* Safari and Chrome */
        -webkit-animation-name: heartbeat; /* 动画名称 */
        -webkit-animation-duration: 3s; /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
      }

      @keyframes heartbeat {
        from {
          transform: scale(1);
        }

        50% {
          transform: scale(1.2);
        }

        to {
          transform: scale(1);
        }
      }
    }
  }
}
</style>