<template>
  <div class="left2-container">
    <InfoHeader
      name="电梯信息统计"
      eName="Elevator information statistics"
    ></InfoHeader>
    <InfoContent height="5.65rem">
      <div class="d-flex">
        <div style="width: 50%; padding-top: 0.25rem">
          <div class="title1 d-flex jc-center">品牌统计</div>

          <div style="">
            <PieChart
              :chartData="chartPieData"
              :chartSetting="chartSetting"
            ></PieChart>
          </div>
        </div>
        <div style="width: 50%; padding: 0.25rem 0.25rem 00 0">
          <div class="title1 d-flex jc-center">梯龄统计</div>

          <div class="order" style="">
            <div class="d-flex jc-center a-c full-height">
              <div>
                <div class="item">
                  <span class="num-title">0-6年:</span>
                  <span class="num-value textS-common"> 0</span>
                </div>
                <div class="item">
                  <span class="num-title">6-15年:</span>
                  <span class="num-value textS-common"> 4</span>
                </div>
                <div class="item">
                  <span class="num-title">15年以上:</span>
                  <span class="num-value textS-common"> 0</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: -0.2rem;padding: 0 0.15rem">
        <div class="title1 d-flex jc-center">场所分布</div>
        <LineCharts
          chartId="rescue1s"
          :chartLineXData="chartLineXData"
          :chartSettingData="chartSettingData"
          :chartLineYData="chartLineYData"
        ></LineCharts>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import PieChart from "@/components/pieEcharts";
import LineCharts from "@/components/lineCharts";
import { getElevatorBrand, getElevatorScienceList } from "@/api/elevator";
export default {
  components: {
    InfoHeader,
    InfoContent,
    LineCharts,
    PieChart,
  },
  data() {
    return {
      chartSettingData: {
        lineColor: "#46EFF1",
        areaColor: "#2B8E9F",
        seriesName: "部数",
        height: "2rem",
        showYaxis: true,
      },
      chartSetting: {
        showLegend: true,
        radius: ["30%", "50%"],
        pieColor: ["#FF6600", "#0099FF", "#66CC33", "#FFCC33", "#9933FF"],
        height: "2.9rem",
      },
      chartPieData: [],
      chartLineYData: [0],
      chartLineXData: ["其他场所"],
    };
  },
  mounted() {
    this.getElevatorBrandList();
    this.getElevatorScienceListApi();
  },
  methods: {
    getElevatorScienceListApi() {
      getElevatorScienceList().then((res) => {
        this.chartLineXData = res.data.map((item) => {
          return item.useScenario;
        });
        this.chartLineYData = res.data.map((item) => {
          return item.useScenarioTotal;
        });
      });
    },
    async getElevatorBrandList() {
      // 获取��机品牌数据
      const res = await getElevatorBrand({});
      console.log(res, "res");
      this.chartPieData = res.data
        .map((item) => {
          return {
            name: item.brand,
            value: item.brandTotal,
          };
        })
        .slice(0, 10);
    },
  },
};
</script>
<style lang="scss" scoped>
.left2-container {
  margin-top: 0.25rem;
  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/tiling_bck_24.png");
    background-repeat: no-repeat;
    background-size: 100% 85%;
    height: 2.6rem;
    .item {
      margin: 0.275rem 0;
      .num-title {
        font-size: 0.3rem;
        color: white;
      }
      .num-value {
        font-size: 0.36rem;
        color: white;
        margin-left: 0.15rem;
      }
    }
  }
}
</style>
