<template>
  <div style="height: 100%;">
    历史回放
    <el-divider content-position="left">纵移记录</el-divider>
    <simple-complex-chart v-if="chart" :optiondata="optiondata" titletext="纵移记录" :xaxisdata="xaxisdata" style="height: 450px;margin-bottom: 2px;" />
  </div>

</template>

<script>
import * as interfaceApi from '@/api/work-info.js'
import waves from '@/directive/waves' // waves directive
import SimpleComplexChart from '@/components/Chart/simple-complex-chart'
export default {
  name: 'BeamCarrierWorkInfoMng',
  directives: { waves },
  // eslint-disable-next-line vue/no-unused-components
  components: {
    SimpleComplexChart//, InnerSidebar , ProjectSectionDeviceTree
  },
  props: {
    query: { type: Object, default: null, required: false }
  },
  data() {
    return {
      chart: true,
      listLoading: false,
      list: [],
      optiondata: [
        {
          data: [45, 50, 50, 45, 50, 45, 50],
          name: '走行速度',
          type: 'line'
        }
        // , {
        //   data: [50, 50, 50, 45, 50, 45, 50],
        //   name: '横移',
        //   type: 'line'
        // }
      ],
      xaxisdata: ['2022-04-08 09:10:10', '2022-04-08 09:11:10', '2022-04-08 09:12:10', '2022-04-08 09:13:10', '2022-04-08 09:14:10', '2022-04-08 09:15:10', '2022-04-08 09:16:10'],
      videoData: {
        frontLeftUrl: '',
        aroundUrl: '',
        rearLeftUrl: '',
        rearRightUrl: ''
      },
      listQuery: {
        deviceManageId: undefined,
        skipCount: 0,
        maxResultCount: 10
      },
      total: 0
    }
  },
  watch: {
    query: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.listQuery.deviceManageId = val.deviceId
          this.deviceNo = val.deviceNoShow
          this.getList()
        }
      }
    }
  },
  mounted() {
    this.chart = false
    this.$nextTick(function() {
      this.chart = true
    })
  },
  methods: {
    getList() {
      if (!this.listQuery.deviceManageId) {
        this.list = []
        return
      }
      this.listLoading = true
      interfaceApi
        .GetBeamTransportCarList(this.listQuery)
        .then(res => {
          const arryTime = []
          const arryRunSpeed = []
          res.items.forEach(t => {
            t.deviceNo = this.deviceNo
            arryTime.push(this.dateFormat(t.acquisitionTime))
            arryRunSpeed.push(t.runSpeed)
          })
          this.xaxisdata = arryTime
          this.optiondata = [{
            data: arryRunSpeed,
            name: '走行速度',
            type: 'line' }]
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    // 时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    }
  }
}
</script>
<style scoped>
.table {
    border-top: 1px solid #dcdfe6;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    font-size: 14px;
    line-height: 0.8em;
}
.el-table {
    line-height: 0.8em;
}
.el-table >>> .el-table__cell {
    padding: 8px 0;
}
.y-tbody{
    max-height: 200px;
    overflow-y: scroll;
}
.table td,table th {
     border-top: none;
    border: 1px solid #dcdfe6;
    background-color:aliceblue;
    max-width: 250px;
}
/* .el-table >>> thead{
    color: #fff;
}
.el-table >>> thead th {
      background-color: red  !important;
} */
/* table tr:nth-child(odd){
background: #ccc;
} */
table tr:nth-child(even){
background: #efefef;

}
.el-table >>> tr:nth-child(even){
background: #efefef;

}
.card >>> .card-body {
    padding: 0.2rem !important;
}

.sum-row {
  margin-top: 0px;
}
.sum-row-cols {
  padding-right: 15px;
}
.sum-row-col .info-box {
  height: 90px;
  margin: 0px;
  padding: 0px;
}
.sum-row-col .bg-aqua {
  background-color: #00c0ef !important;
  color: #fff !important;
}
.progress-description,
.info-box-text {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-deep-blue {
  background-color: #3e72c5 !important;
  color: #fff;
}
.info-box .progress {
  background-color: rgba(0, 0, 0, 0.125);
  height: 2px;
  margin: 5px 0;
}
.info-box .progress {
  background: rgba(0, 0, 0, 0.2);
  margin: 5px -10px 5px -10px;
  height: 2px;
}
.info-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 90px;
  width: 80px;
  text-align: center;
  font-size: 45px;
  line-height: 90px;
  /* background: rgba(0, 0, 0, 0.2); */
}
.box-div
{
    width: 25%;float: left;
    height:290px;
    padding-right: 8px;
}
.box-div-alert
{
    width: 100%;
    float: left;
    height:254px;
}
.div-circular {
  width:16px;
  height:16px;
  border-radius:50%;
  }
.div-normal
{
  background-color:#25b38e;
}
.div-abnormal
{
  background-color:#686868;
}
/* .bg-red {
    background: #bab000 !important;
} */
</style>
