<template>
  <div>
    <el-table
      v-loading="listLoading"
      row-key="id"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      height="calc(100vh - 249px)"
    >
      <div slot="empty">
        <span v-if="listQuery.sectionId">没有数据</span>
        <span v-else>请选择标段</span>
      </div>
      <el-table-column label="设备编号" prop="deviceNo" align="center" />
      <el-table-column label="时间" prop="uploadTime" align="center">
        <template slot-scope="{ row }">
          {{ row.uploadTime | datetime }}
        </template>
      </el-table-column>
      <el-table-column label="纵移(m)" prop="vehicleVerticalMove" align="center" width="80" />
      <el-table-column label="横移(m)" prop="vehicleHorizontalMove" align="center" width="80" />
      <el-table-column label="左侧水平度(°)" prop="leftlevelness" align="center" />
      <el-table-column label="右侧水平度(°)" prop="rightLevelness" align="center" />
      <el-table-column label="纵向支腿垂直度(°)" prop="verticalLegVertical" align="center" />
      <el-table-column label="横向支腿垂直度(°)" prop="horizontalLegVertical" align="center" />
      <el-table-column label="两天车间距(m)" prop="crownDistance" align="center" />
      <el-table-column label="纵移速度(m/s)" prop="vehicleVerticalSpeed" align="center" />
      <el-table-column label="横移速度(m/s)" prop="vehicleHorizontalSpeed" align="center" />
    </el-table>
    <pagination
      :total="total"
      :skip-count.sync="listQuery.skipCount"
      :max-result-count.sync="listQuery.maxResultCount"
      @pagination="getList"
    />
  </div>
</template>
<script>

import * as interfaceApi from '@/api/work-info.js'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'BeamCarrierWorkInfoMng',
  // eslint-disable-next-line vue/no-unused-components
  components: {
    Pagination
  },
  props: {
    query: { type: Object, default: null, required: false }
  },
  data() {
    return {
      chart: true,
      listLoading: false,
      list: [],
      videoData: {
        frontLeftUrl: '',
        aroundUrl: '',
        rearLeftUrl: '',
        rearRightUrl: ''
      },
      listQuery: {
        deviceManageId: undefined,
        skipCount: 0,
        maxResultCount: 20
      },
      total: 0,
      deviceNo: ''
    }
  },
  watch: {
    query: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.listQuery.deviceManageId = val.deviceId
          this.deviceNo = val.deviceNoShow
          this.getList()
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    getList() {
      if (!this.listQuery.deviceManageId) {
        this.list = []
        return
      }
      this.listLoading = true
      interfaceApi
        .GetVehicleRecordList(this.listQuery)
        .then(res => {
          res.items.forEach(t => {
            t.deviceNo = this.deviceNo
          })
          this.list = res.items
          this.total = res.totalCount
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    // 查询
    handleFilter() {
    }
  }
}
</script>

<style scoped>
.pagination-container >>> .el-input {
    width: 50px;
}
</style>
