<template>
  <div id="history">
    <box icon="el-icon-video-camera" title="历史回放">
      <v-stage ref="stage" :config="rangeConfig" style="margin:auto">
        <v-layer>
          <v-rect v-for="(rect, index) in config.rects" :key="'rect'+index" :config="rect" />
          <v-line v-for="(line, index) in config.lines" :key="'line'+index" :config="line" />
        </v-layer>
      </v-stage>
    </box>
    <box icon="chart" title="架桥机参数曲线图">
      <simple-complex-chart v-if="chart" :optiondata="vehicleOptiondata" :xaxisdata="vehicleXaxisdata" :width="chartwidth" :height="chartheight" />
    </box>
    <!-- <simple-complex-chart v-if="chart" :optiondata="frontOptiondata" titletext="前天车纵移记录" :xaxisdata="frontXaxisdata" style="height: 180px;margin-bottom: 2px;" />
    <simple-complex-chart v-if="chart" :optiondata="backOptiondata" titletext="后天车纵移记录" :xaxisdata="backXaxisdata" style="height: 180px;" /> -->
  </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'
import Box from '@/components/Box/Box.vue'
export default {
  name: 'BeamCarrierWorkInfoMng',
  directives: { waves },
  // eslint-disable-next-line vue/no-unused-components
  components: {
    Box,
    SimpleComplexChart//, InnerSidebar , ProjectSectionDeviceTree
  },
  props: {
    query: { type: Object, default: null, required: false }
  },
  data() {
    return {
      chart: true,
      listLoading: false,
      rangeConfig: {
        width: window.innerWidth,
        height: 400
      },
      chartwidth: '100%',
      chartheight: '100%',
      config: {
        rects: [
          // 桥墩低座
          { strokeWidth: 1, width: 100, height: 10, x: 100, y: 390, fill: '#EBEBEB', stroke: '#BDBDBD' },
          { strokeWidth: 1, width: 100, height: 10, x: 400, y: 390, fill: '#EBEBEB', stroke: '#BDBDBD' },
          { strokeWidth: 1, width: 100, height: 10, x: 700, y: 390, fill: '#EBEBEB', stroke: '#BDBDBD' },
          // 梁片
          { strokeWidth: 1, width: 150, height: 20, x: 0, y: 265, fill: '#EBEBEB', stroke: '#BDBDBD' },
          { strokeWidth: 1, width: 300, height: 20, x: 150, y: 265, fill: '#EBEBEB', stroke: '#BDBDBD' }
        ],
        lines: [
          // 桥墩
          { points: [110, 390, 110, 380, 190, 380, 190, 390], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [410, 390, 410, 380, 490, 380, 490, 390], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [710, 390, 710, 380, 790, 380, 790, 390], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [120, 380, 120, 320, 180, 320, 180, 380], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [420, 380, 420, 320, 480, 320, 480, 380], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [720, 380, 720, 320, 780, 320, 780, 380], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [120, 320, 110, 300, 190, 300, 180, 320], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [420, 320, 410, 300, 490, 300, 480, 320], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [720, 320, 710, 300, 790, 300, 780, 320], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [110, 300, 110, 290, 190, 290, 190, 300], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [410, 300, 410, 290, 490, 290, 490, 300], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [710, 300, 710, 290, 790, 290, 790, 300], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [115, 290, 115, 285, 185, 285, 185, 290], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [415, 290, 415, 285, 485, 285, 485, 290], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          { points: [715, 290, 715, 285, 785, 285, 785, 290], fill: '#EBEBEB', stroke: '#BDBDBD', closed: true, strokeWidth: 1 },
          // 梁片钢绞线
          { points: [0, 280, 50, 280, 150, 278], stroke: 'red', strokeWidth: 1 },
          { points: [0, 270, 50, 270, 150, 272], stroke: 'red', strokeWidth: 1 },
          { points: [150, 278, 250, 280, 350, 280, 450, 278], stroke: 'red', strokeWidth: 1 },
          { points: [150, 272, 250, 270, 350, 270, 450, 272], stroke: 'red', strokeWidth: 1 },
          // 架桥机主题
          { points: [150, 272, 200, 270, 400, 270, 450, 272], stroke: 'red', strokeWidth: 1 }
        ]
      },
      list:
      [
        { id: 1,
          code: 'CX06BMA01',
          model: '40',
          date: '2022-04-06 17:17:35'
        },
        { id: 2,
          code: 'CX06BMA02',
          model: '60',
          date: '2022-04-07 15:15:35'
        }
      ],
      optiondata: [
        {
          data: [45, 50, 50, 45, 50, 45, 50],
          type: 'line'
        }, {
          data: [50, 50, 50, 45, 50, 45, 50],
          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'],
      vehicleOptiondata: [],
      vehicleXaxisdata: [],
      frontOptiondata: [],
      frontXaxisdata: [],
      backOptiondata: [],
      backXaxisdata: [],
      videoData: {
        frontLeftUrl: '',
        aroundUrl: '',
        rearLeftUrl: '',
        rearRightUrl: ''
      },
      listQuery: {
        deviceManageId: undefined,
        skipCount: 0,
        maxResultCount: 10
      },
      total: 0
    }
  },
  // computed: {
  //   var content=
  //   // var
  //   // width:
  // },
  watch: {
    query: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.listQuery.deviceManageId = val.deviceId
          this.deviceNo = val.deviceNoShow
          this.GetVehicle()
          // this.GetFront()
          // this.GetBack()
        }
      }
    }
  },
  mounted() {
    this.chart = false
    this.$nextTick(function() {
      const exceptHeight = 180
      const canvasHeight = 400
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
      var className = document.getElementsByClassName('el-tabs__content')
      if (className[0]) {
        this.chartheight = window.innerHeight - className[0].offsetTop - canvasHeight - exceptHeight + 'px'
      }
      // 监听窗口大小变化
      window.onresize = function() {
        if (className[0]) {
          this.chartheight = window.innerHeight - className[0].offsetTop - canvasHeight - exceptHeight + 'px'
        }
      }
      this.chart = true
    })
  },
  methods: {
    GetVehicle() {
      if (!this.listQuery.deviceManageId) {
        return
      }
      this.listLoading = true
      interfaceApi
        .GetVehicleRecordList(this.listQuery)
        .then(res => {
          const vehicleTime = []
          const vehicleXmove = []
          const vehicleYmove = []
          res.items.forEach(t => {
            t.deviceNo = this.deviceNo
            vehicleTime.push(t.uploadTime)
            vehicleXmove.push(t.vehicleHorizontalMove)
            vehicleYmove.push(t.vehicleVerticalMove)
          })
          this.vehicleOptiondata = [
            {
              data: vehicleYmove,
              name: '整车纵移',
              type: 'line' },
            {
              data: vehicleXmove,
              name: '整车横移',
              type: 'line' }
          ]
          this.vehicleXaxisdata = vehicleTime
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    GetFront() {
      if (!this.listQuery.deviceManageId) {
        return
      }
      this.listLoading = true
      interfaceApi
        .GetFrontCrownBlockList(this.listQuery)
        .then(res => {
          const frontTime = []
          const frontXmove = []
          const frontYmove = []
          res.items.forEach(t => {
            t.deviceNo = this.deviceNo
            frontTime.push(t.uploadTime)
            frontXmove.push(t.frontHorizontalMove)
            frontYmove.push(t.frontVerticalMove)
          })
          this.frontOptiondata = [
            {
              data: frontYmove,
              name: '整车纵移',
              type: 'line' },
            {
              data: frontXmove,
              name: '整车横移',
              type: 'line' }
          ]
          this.frontXaxisdata = frontTime
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    GetBack() {
      if (!this.listQuery.deviceManageId) {
        return
      }
      this.listLoading = true
      interfaceApi
        .GetBackCrownBlockList(this.listQuery)
        .then(res => {
          const backTime = []
          const backXmove = []
          const backYmove = []
          res.items.forEach(t => {
            t.deviceNo = this.deviceNo
            backTime.push(t.uploadTime)
            backXmove.push(t.backHorizontalMove)
            backYmove.push(t.backVerticalMove)
          })
          this.backOptiondata = [
            {
              data: backYmove,
              name: '整车纵移',
              type: 'line' },
            {
              data: backXmove,
              name: '整车横移',
              type: 'line' }
          ]
          this.backXaxisdata = backTime
        })
        .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>
