<template>
  <div style="pointer-events: all; width: 97%; margin-top: 0.15rem">
    <InfoHeader
      name="电梯基础信息"
      eName="Elevator basic information"
    ></InfoHeader>
    <InfoContent height="5rem">
      <div class="d-flex">
        <div class="d-flex a-c c-white fs-16" style="padding-left: 8px">
          选择时间
        </div>
        <div>
          <RangeDatePicker
            ref="RangeDatePicker"
            width="4.8rem"
            :isHms="isHms"
            :isChangeOption="isChangeOption"
            @dateChange="dateChange"
          ></RangeDatePicker>
        </div>

        <div style="margin-left: 0.06rem; margin-top: 0.08rem">
          <el-button-group>
            <el-button
              v-for="(item, index) in tabList"
              :key="index"
              :type="currentIndex === index ? 'primary' : 'default'"
              @click="handleClickDate(index)"
              >{{ item.name }}</el-button
            >
          </el-button-group>
        </div>
      </div>

      <div class="d-flex" style="padding: 0.1rem">
        <LineMoreCharts
          chartId="LineMoreCharts"
          :chartLineXData="chartLineXData"
          :chartSettingData="chartSettingData"
          :chartLineYData="chartLineYData"
        ></LineMoreCharts>
      </div>
    </InfoContent>
  </div>
</template>

<script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import echartMixins from "@/utils/resizeMixins";
import { getBasicDate } from "@/api/elevator";
import LineMoreCharts from "@/components/lineMoreCharts";
import RangeDatePicker from "@/components/rangeDatePicker/index.vue";
import moment from "moment";
export default {
  components: {
    InfoHeader,
    InfoContent,
    LineMoreCharts,

    RangeDatePicker,
  },
  data() {
    return {
      tableData: [],
      currentIndex: 0,
      tabList: [
        { name: "最近一日", value: 1 },
        { name: "最近一周", value: 2 },
        { name: "最近一月", value: 2 },
      ],
      chart: null,
      chartSettingData: {
        lineColor: "#06FCEB",
        areaColor: "#06FCEB",
        seriesName: "电梯数",
        height: "5rem",
        showYaxis: true,
      },
      chartLineXData: [],
      chartLineYData: [],
      elevatorNum: "",
      startTime: moment().subtract(1, "months").format("YYYY-MM-DD HH:mm:ss"),
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      isHms: true,
      isChangeOption: true,

      statisticsType: null,
    };
  },
  mixins: [echartMixins],

  created() {
    if (this.$route.query) {
      this.elevatorNum = this.$route.query.elevatorNum;

      this.$nextTick(() => {
        this.getBasicDateApi();
      });
    }
  },
  methods: {
    async getBasicDateApi() {
      const res = await getBasicDate({
        elevatorNum: this.elevatorNum,
        startTime: this.startTime,
        endTime: this.endTime,
        statisticsType: this.statisticsType,
      });
      this.chartLineXData = res.data.timeLineList;
      this.chartLineYData[0] = {
        data: res.data.upNumList,
        name: "上行次数",
        type: "line",
        smooth: true,
        color: "#ECB2C3",
      };

      this.chartLineYData[1] = {
        data: res.data.downNumList,
        name: "下行次数",
        type: "line",
        smooth: true,
        color: "#2FB2C3",
      };
      this.chartLineYData[2] = {
        data: res.data.openCloseNumList,
        name: "开关门次数",
        type: "line",
        smooth: true,
        color: "#2FF3C3",
      };
      this.chartLineYData[3] = {
        data: res.data.stopStationNumList,
        name: "停梯次数",
        type: "line",
        smooth: true,
        color: "#A927C3",
      };
      this.chartLineYData[4] = {
        data: res.data.runMileageList,
        name: "运行距离",
        type: "line",
        smooth: true,
        color: "#F3E037",
      };
      console.log(this.chartLineYData, "datatata");
    },
    handleClickDate(index) {
      this.currentIndex = index;

      if (this.currentIndex == 0) {
        this.statisticsType = 1;

        this.startTime = moment().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss")
        this.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
        this.$refs.RangeDatePicker.setDate([this.startTime,this.endTime])
      } else if (this.currentIndex == 1) {
        this.statisticsType = 2;
        this.startTime = moment().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss")
        this.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
        this.$refs.RangeDatePicker.setDate([this.startTime,this.endTime])
      } else {
        this.statisticsType = 2;
        this.startTime = moment().subtract(1, "months").format("YYYY-MM-DD HH:mm:ss")
        this.endTime = moment().format("YYYY-MM-DD HH:mm:ss");
        this.$refs.RangeDatePicker.setDate([this.startTime,this.endTime])
      }
      this.getBasicDateApi();
    },
    dateChange(e) {
      console.log(e);
      this.startTime = e[0];
      this.endTime = e[1];
      this.getBasicDateApi();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: rgba(1, 13, 56, 0.9) !important;
}
::v-deep .el-button--primary {
  background-color: #0b69bb;
  border: solid 1px #0b69bb;
padding: 0.1rem 0.1rem;
  height: 0.43rem;
  line-height: 0.14rem;
  text-align: center;
}

::v-deep .el-button--default {
  background-color: #6bb1ef;
  border: solid 1px #6bb1ef;
  color: white;
  padding: 0.1rem 0.1rem;
  height: 0.43rem;
  line-height: 0.14rem;
  text-align: center;
}
::v-deep .el-table__cell {
  background-color: #10295f;
  color: white;
  border-bottom: none !important;
}
/* 针对特定元素的滚动条 */
.info-list::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.tab-list {
  padding: 0.2rem 0.15rem;
  .tab-item {
    background-image: url("../../../assets/images/biaoti-bck.png");
    width: 1.675rem;
    height: 0.375rem;
    line-height: 0.375rem;

    text-align: center;
    font-size: 0.18rem;
    font-weight: bolder;
    color: #828797;
    cursor: pointer;
    &:hover {
      color: white;
    }
  }
}
.info-list {
  .info-item {
    cursor: pointer;
    height: 0.65rem;
    background-color: #10295f;
    margin-bottom: 0.1rem;

    .classic {
      width: 1rem;
      font-size: 0.25rem;
      font-weight: bolder;

      color: #f6d54c;

      background-color: #173c7d;
    }
    .ele-name {
      width: 3.5rem;

      font-size: 0.18rem;

      color: white;
    }
    .time {
      width: 2rem;
      font-size: 0.18rem;
      color: white;
    }
    .status {
      font-size: 0.18rem;
      color: red;
    }
  }
}
</style>
