<template>
  <div class="right1-container">
    <InfoHeader name="故障类型分析" eName="Work event statistics"></InfoHeader>
    <InfoContent height="3rem">
      <!-- <div class="d-flex">
        <div class="left-box d-flex a-c jc-center">
          <div>
            <div
              class="classic-item"
              :style="{ color: currentIndex === index ? 'white' : '' }"
              v-for="(item, index) in classicList"
              :key="index"
              @click="handleClickItem(index)"
            >
              <dv-border-box-8
                v-if="currentIndex === index"
                style="height: 0.6rem; line-height: 0.6rem"
              >
                {{ item.name }}</dv-border-box-8
              >
              <span v-else> {{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="right-box flex-1">
          <div class="work-box">
            <div
              class="work-title d-flex a-c jc-center fs-18 c-white font-weight-br"
            >
              {{
                currentIndex == 0 ? "救援" : currentIndex == 1 ? "维保" : "维修"
              }}
            </div>
            <div class="work-year d-flex a-c jc-center c-white font-weight-br">
              <div>
                <div class="fs-12">年度数量</div>
                <div class="fs-14 d-flex jc-center">{{ dataObj.year }}</div>
              </div>
            </div>
            <div class="work-today d-flex a-c jc-center c-white font-weight-br">
              <div>
                <div class="fs-12">今日数量</div>
                <div class="fs-14 d-flex jc-center">{{ dataObj.today }}</div>
              </div>
            </div>
            <div class="work-month d-flex a-c jc-center c-white font-weight-br">
              <div>
                <div class="fs-12">本月数量</div>
                <div class="fs-14 d-flex jc-center">{{ dataObj.month }}</div>
              </div>
            </div>
            <div class="work-week d-flex a-c jc-center c-white font-weight-br">
              <div>
                <div class="fs-12">本周数量</div>
                <div class="fs-14 d-flex jc-center">{{ dataObj.week }}</div>
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <div class="d-flex" style="margin-top: 0.15rem">
        <div style="width: 50%; padding: 0.005rem">
          <div class="title1 d-flex jc-center">故障类型</div>

          <div style="margin-top: 0.25rem">
            <PieChart
              chartId="rightsss"
              :chartData="chartPieData"
              :chartSetting="chartSetting"
            ></PieChart>
          </div>
        </div>
        <div style="width: 50%; padding: 0.05rem">
          <div class="title1 d-flex jc-center">故障比率</div>

          <div class="order" style="margin-top: 0.05rem">
            <!-- <div class="d-flex jc-center a-c full-height rate textS-common">
              0.04%
            </div> -->
            <GuangaChart
              chartId="guagahcarts"
              :chartVData="chartVData"
              :chartSettingData="chartSettingData"
            ></GuangaChart>
          </div>
        </div>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import PieChart from "@/components/pieEcharts";
import GuangaChart from "@/components/guagaCharts";
import { getMaintenanceAnaylse } from "@/api/elevator";
import { getFaultBrand } from "@/api/elevator";
import { getElevatorTotal } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
    PieChart,
    GuangaChart,
  },
  data() {
    return {
      currentIndex: 0,
      chartPieData: [],
      classicList: [
        { name: "救援", key: "resuce" },
        { name: "维保", key: "maintenance" },
        { name: "维修", key: "repair" },
      ],
      chartVData: 0.04,
      chartSettingData: {
        lineColor: "#46EFF1",
        areaColor: "#2B8E9F",
        seriesName: "次数",
        height: "2.5rem",
      },
      chartSetting: {
        showLegend: false,
        radius: ["0%", "60%"],
        height: "2.2rem",
        pieColor: [
          "#77DDFD",
          "#1494E5",
          "#FF8500",
          "#67CC33",
          "#FF8500",
          "#FF8500",
          "#FF8500",
          "#FF8500",
        ],
      },
      chartData: [
        {
          value: 9,
          name: "停电故障",
          itemStyle: { color: "#AC2B61" },
        },
        { value: 60, name: "非平层开门", itemStyle: { color: "#FFDB4A" } },
        { value: 32, name: "非平层停梯", itemStyle: { color: "#D36D50" } },
      ],
      dataObj: {
        year: 1,
        today: 1,
        month: 1,
        week: 1,
      },
    };
  },
  mounted() {
    this.getFaultList();

    this.getElevatorTotalApi();
  },
  methods: {
    handleClickItem(index) {
      this.currentIndex = index;
      this.getMaintenanceAnaylseApi();
      if (index == 0) {
      }
    },
    async getElevatorTotalApi() {
      const res = await getElevatorTotal();
      this.chartVData = res.data.faultRatio * 1;
      console.log( this.chartVData,' this.chartVData')
    },
    async getFaultList() {
      // 获取��机品牌数据
      const res = await getFaultBrand();
      console.log(res, "res");
      this.chartPieData = res.data.statisticsList
        .map((item) => {
          return {
            name: item.faultName,
            value: item.faultTotal,
          };
        })
        .filter((item) => item.value !== 0);
    },
    async getMaintenanceAnaylseApi() {
      const res = await getMaintenanceAnaylse();
      this.dataObj.year = res.data.yearTotal;
      this.dataObj.month = res.data.monthTotal;
      this.dataObj.today = res.data.dayTotal;
      this.dataObj.week = res.data.weekTotal;
    },
  },
};
</script>
<style lang="scss" scoped>
.right1-container {
  position: fixed;
  top: 1.25rem;
  right: 0.22rem;
  width: 31%;
  pointer-events: all;
  .title1 {
    background-image: url("../../../../assets/images/biaoti-bck.png");
    width: 1.875rem;
    height: 0.375rem;
    line-height: 0.375rem;
    margin: 0 auto;

    font-size: 0.2rem;
    color: white;
  }
  .order {
    // background: url("../../../../assets/images/guzhang_bck.png");
    // background-repeat: no-repeat;
    // background-size: 100% 35%;
    // background-position: bottom;
    height: 2rem;
    .rate {
      font-size: 0.55rem;
      color: white;
      font-weight: bolder;
    }
    .item {
      margin: 0.375rem 0;
      .num-title {
        font-size: 0.3rem;
        color: white;
      }
      .num-value {
        font-size: 0.36rem;
        color: white;
        margin-left: 0.15rem;
      }
    }
  }
  .left-box {
    width: 35%;
    background: url("../../../../assets/images/work_option_bck.png") no-repeat;
    background-size: 100% 100%;
    height: 2.5rem;
    padding: 0.15rem 0.13rem;
    margin: 0.15rem 0.13rem;
    .classic-item {
      font-size: 0.25rem;
      margin-bottom: 0.1rem;
      color: #a4b1d0;
      cursor: pointer;
      width: 1.8rem;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      background: url("../../../../assets/images/work_option.png") no-repeat;
      background-size: cover;
      &:hover {
        color: white;
      }
      &:last-child {
        margin-bottom: 00rem;
      }
    }
  }
  .right-box {
    padding: 0.15rem 0.13rem;
    margin: 0.15rem 0.13rem;
    .work-box {
      position: relative;
      .work-title {
        position: absolute;
        top: 0.55rem;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url("../../../../assets/images/work_title.png");
        background-size: cover;
        width: 1.5rem;
        height: 1.5rem;
      }
      .work-week {
        position: absolute;
        top: 1.8rem;
        right: -0.3rem;
        transform: translate(-50%, -50%);
        background: url("../../../../assets/images/work_week.png");
        background-size: cover;
        width: 0.8rem;
        height: 0.8rem;
      }
      .work-month {
        position: absolute;
        top: 0.8rem;
        right: -0.1rem;
        transform: translate(-50%, -50%);
        background: url("../../../../assets/images/work_month.png");
        background-size: cover;
        width: 0.8rem;
        height: 0.8rem;
      }
      .work-today {
        position: absolute;
        top: 1.6rem;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url("../../../../assets/images/work-today.png");
        background-size: cover;
        width: 1.2rem;
        height: 1.2rem;
      }
      .work-year {
        position: absolute;
        top: 0.8rem;
        left: 0.42rem;
        transform: translate(-50%, -50%);
        background: url("../../../../assets/images/work_year.png");
        background-size: cover;
        width: 0.8rem;
        height: 0.8rem;
      }
    }
    .right-title {
      font-size: 0.2rem;
      margin-bottom: 0.2rem;
      color: white;
      font-weight: bolder;
      margin-top: 0.1rem;
    }
  }
}
</style>
