<template>
  <div class="full-w-h cycleDataContainer">
    <div style="margin-bottom: 10px; margin-top: 10px" class="custom-form">
      <label class="custom-form-label">时段选择： </label>
      <el-date-picker
          :clearable="false"
          @change="dateChange"
          v-model="dateTimeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
      >
      </el-date-picker>
      <label class="custom-form-label">数据类型： </label>
      <el-select
          @change="changeTableTh"
          style="margin-right: 10px"
          v-model="locationType1"
          placeholder="请选择"
      >
        <el-option
            v-for="item in locationOptions1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
      </el-select>
    </div>
    <div style="margin-bottom: 10px" class="custom-table">
      <el-table
          ref="table"
          header-row-class-name="custom-table-header"
          header-cell-class-name="custom-table-header-cell"
          :data="tableData"
          :row-class-name="getRowClassName"
          style="width: 100%"
          height="100%"
      >
        <el-table-column
            v-for="(it, index) of laneTableColumn"
            :key="index"
            align="center"
            :width="index === 0 ? '150' : 'auto'"
            :prop="it.prop"
            :label="it.label"
            show-overflow-tooltip
        >
          <template slot-scope="{row}">
            {{ occupancyValue(row[it.prop]) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="paginationData.pageNum"
          :page-size="paginationData.pageSize"
          layout=" prev, pager, next"
          :total="paginationData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {occupancyValue} from "@/utils";
import {analysisLanePage, analysisPage, analysisZebraPage} from "@/dao/RealTimeData";

export default {
  name: "RealTimeData",
  props: ["crossData"],
  data() {
    return {
      laneTableColumn: [],
      locationType1: "1",
      locationOptions1: [
        {value: "1", label: "车道数据"},
        {value: "2", label: "人行横道数据"},
        {value: "3", label: "行人等待区数据"},
        {value: "4", label: "非机动车数据"},
        // { value: "5", label: "事件信息" },
        // { value: "6", label: "30s车道数据" },
        // { value: "7", label: "30s路口综合指标" },
      ],
      dateTimeRange: [],
      tableData: [],
      laneTableColumn1: [
        {label: "数据曝光时间", prop: "expTime"},
        {label: "数据生成时间", prop: "pdTime"},
        {label: "厂商名称", prop: "producer"},
        {label: "方向编号", prop: "laneDir"},
        {label: "方向名称", prop: "laneDirDesc"},
        {label: "车流类型", prop: "flowTypeDesc"},
        {label: "静止车辆数", prop: "staticCount"},
        {label: "运动车辆数", prop: "movingCount"},
        {label: "车辆总数", prop: "count"},
      ],
      laneTableColumn2: [
        {label: "数据曝光时间", prop: "expTime"},
        {label: "数据生成时间", prop: "pdTime"},
        {label: "厂商名称", prop: "producer"},
        {label: "方向编号", prop: "zebraDir"},
        {label: "方向名称", prop: "zebraDirDesc"},
        {label: "行人数", prop: "zebraCount"},
        {label: "进口行人数", prop: "zebraCountIn"},
        {label: "出口行人数", prop: "zebraCountOut"},
      ],
      laneTableColumn3: [
        {label: "数据曝光时间", prop: "expTime"},
        {label: "数据生成时间", prop: "pdTime"},
        {label: "厂商名称", prop: "producer"},
        {label: "方向编号", prop: "waitDir"},
        {label: "方向名称", prop: "waitDirDesc"},
        {label: "行人等待数量", prop: "waitCount"},
      ],
      laneTableColumn4: [
        {label: "数据曝光时间", prop: "expTime"},
        {label: "数据生成时间", prop: "pdTime"},
        {label: "厂商名称", prop: "producer"},
        {label: "方向编号", prop: "nonMotorsDir"},
        {label: "方向名称", prop: "nonMotorsDirDesc"},
        {label: "非机动车数量", prop: "nonMotorsCount"},
        {label: "非机动车排队", prop: "nonMotorsLength"},
      ],
      laneTableColumn5: [
        {label: "数据曝光时间", prop: "time"},
        {label: "数据生成时间", prop: "time"},
        {label: "厂商名称", prop: "time"},
        {label: "溢出方向", prop: "time"},
        {label: "溢出状态", prop: "time"},
        {label: "溢出原因", prop: "time"},
      ],
      laneTableColumn6: [
        {label: "统计开始时间", prop: "time"},
        {label: "数据曝光时间", prop: "time"},
        {label: "数据生成时间", prop: "time"},
        {label: "统计周期", prop: "time"},
        {label: "厂商名称", prop: "time"},
        {label: "方向", prop: "time"},
        {label: "编号", prop: "time"},
        {label: "车流类型", prop: "time"},
        {label: "车流总数", prop: "time"},
        {label: "左转流量", prop: "time"},
        {label: "直行流量", prop: "time"},
        {label: "右转流量", prop: "time"},
        {label: "掉头流量", prop: "time"},
        {label: "平均速度", prop: "time"},
      ],
      laneTableColumn7: [
        {label: "统计开始时间", prop: "time"},
        {label: "数据曝光时间", prop: "time"},
        {label: "数据生成时间", prop: "time"},
        {label: "统计周期", prop: "time"},
        {label: "厂商名称", prop: "time"},
        {label: "方向", prop: "time"},
        {label: "非机动车数量(非机动车道)", prop: "time"},
        {label: "非机动车数量(人行横道)", prop: "time"},
        {label: "停车次数", prop: "time"},
        {label: "平均速度", prop: "time"},
      ],
      paginationData: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.laneTableColumn = this.laneTableColumn1
  },
  mounted() {

    // if (time_config.dataQuery_cycleTime) {
    //   this.dateTimeRange = [
    //     new Date(time_config.dataQuery_cycleTime[0]),
    //     new Date(time_config.dataQuery_cycleTime[1]),
    //   ];
    // } else {
    // }
    this.dateTimeRange = [
      new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
      new Date(),
    ];
    // if (this.crossData.crossId) {
    // if (this.crossData?.id) {
    //   this.getData();
    // }
  },
  watch: {
    crossData(val) {
      if (val) {
        console.log('watch', val)
        this.getData();
      }
    }
  },
  methods: {
    changeTableTh() {
      this.laneTableColumn = this['laneTableColumn' + this.locationType1];
      this.getData();
    },
    handleCurrentChange(e) {
      this.paginationData.pageNum = e
      this.getData();
    },
    getData() {
      let params = {
        channelName: this.crossData.name,
        // channelName:"龙鼎大道与龙翔路路口北向南",
        //endTime: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
        //startTime: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
        endTime: "2024-11-09 17:00:00",
        startTime: "2024-11-09 16:00:00",
        pageNum: this.paginationData.pageNum,
        pageSize: this.paginationData.pageSize,
      };
      if (this.locationType1 === "1") {
        analysisLanePage(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.tableData = res.content.rows;
            this.paginationData.total = res.content.total;
            this.$nextTick(() => {
              this.$refs.table.doLayout();
            });
          }
        });
      } else if (this.locationType1 === "2") {
        analysisZebraPage(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.tableData = res.content.rows;
            this.paginationData.total = res.content.total;
            this.$nextTick(() => {
              this.$refs.table.doLayout();
            });
          }
        });
      } else if (this.locationType1 === "3") {
        analysisWaitareaPage(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.tableData = res.content.rows;
            this.paginationData.total = res.content.total;
            this.$nextTick(() => {
              this.$refs.table.doLayout();
            });
          }
        });
      } else if (this.locationType1 === "4") {
        analysisNonmotorLanePage(params).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.tableData = res.content.rows;
            this.paginationData.total = res.content.total;
            this.$nextTick(() => {
              this.$refs.table.doLayout();
            });
          }
        });
      }
      /*else if (this.locationType1 === "5") {
        analysisPage(params).then((res) => {
          console.log(res);
          this.tableData = res.content.rows;
          this.paginationData.total = res.content.total;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        });
      }
      else if (this.locationType1 === "6") {
        analysisPage(params).then((res) => {
          console.log(res);
          this.tableData = res.content.rows;
          this.paginationData.total = res.content.total;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        });
      }
      else if (this.locationType1 === "7") {
        analysisPage(params).then((res) => {
          console.log(res);
          this.tableData = res.content.rows;
          this.paginationData.total = res.content.total;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        });
      }*/
    },

    occupancyValue,
    dateChange() {
      if (new Date(this.dateTimeRange[1]).getTime() - new Date(this.dateTimeRange[0]).getTime() > 30 * 24 * 60 * 60 * 1000) {
        this.$message('选择时段需小于30天')
        return
      }
      this.getData()
    },
    getRowClassName(e) {
      if (e.rowIndex % 2 !== 0) {
        return "row-odd";
      } else {
        return "row-even";
      }
    },
  },
};
</script>

<style lang="less" scoped>
//table fixed 列样式
::v-deep .el-table__fixed::before {
  height: 0;
}

::v-deep .el-table__fixed {
  box-shadow: 0 0 0.52083vw rgba(255, 255, 255, 0.12);
}

::v-deep .el-table {
  overflow: unset;
}

//table fixed 列样式 end
::v-deep .el-input__inner {
  border: 1px solid rgba(90, 144, 238, 0.34);
  color: white;
}

::v-deep .el-range-separator {
  color: white;
}

label {
  margin-left: 10px;
}

label:first-child {
  margin-left: 0;
}

.chartContainer {
  flex: 1;
  position: relative;

  .indexOptionSelector {
    position: absolute;
    width: 180px;
    right: 0;
    top: 0;
  }
}

.custom-form {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;

  .rightExport {
    width: 78px;
    height: 28px;
    position: absolute;
    right: 0;
    border: none;
    top: 50%;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 1px;
    background-color: rgba(41, 67, 114);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }

  .rightExport:hover {
    background-color: #355287;
  }
}

.custom-table {
  height: 600px;
  display: flex;
  align-items: center;
  position: relative;
}

.cycleDataContainer {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.custom-export-button {
  position: absolute;
  right: 0;
  border-radius: 0;
  background-color: #294372;
  color: white;
  letter-spacing: 1px;
  border: none;
  width: 78px;
  font-size: 14px;
  height: 28px;
}

.custom-export-button:hover {
  background-color: #355287;
}


::v-deep .el-pagination {
  position: absolute;
  top: 650PX;
  left: 0;
  right: 0;
  margin: auto;

  button:disabled, .el-pager li, .btn-next, .btn-prev {
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-size: 12PX;
    width: 35PX;
    height: 28PX;
  }

  .btn-next .el-icon, .btn-prev .el-icon {
    font-size: 12PX;
  }

  .el-pager li.active {
    color: #409EFF !important;
  }
}
</style>
