<template>
  <div>
    <el-container class="content-height-fit">
      <el-container class="resize-fit-container">
        <div class="app-container">
          <el-row :xs="24" class="sum-row" style="padding-bottom: 15px">
            <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
              <div
                :class="online?'info-box bg-green':'info-box bg-red' "
                style="margin-bottom: 0px"
              >
                <span class="info-box-icon"><svg-icon :icon-class="online?'在线':'离线' " /></span>
                <div class="info-box-content">
                  <span class="info-box-text">是否在线</span>
                  <span
                    class="info-box-number"
                  >{{ online?'是':'否' }}</span>
                  <div class="progress">
                    <div class="progress-bar" style="width: 100%" />
                  </div>
                  <span class="progress-description">
                    运梁车
                  </span>
                </div>
              </div>
            </el-col>
            <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
              <div
                class="info-box bg-deep-blue"
                style="margin-bottom: 0px"
              >
                <span class="info-box-icon"><i class="fa fa-hourglass" /></span>
                <div class="info-box-content">
                  <span class="info-box-text">工作时长</span>
                  <span
                    class="info-box-number"
                  >100小时</span>
                  <div class="progress">
                    <div class="progress-bar" style="width: 10%" />
                  </div>
                  <span class="progress-description">
                    累计工作1000小时
                  </span>
                </div>
              </div>
            </el-col>
            <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
              <div
                class="info-box bg-aqua"
                style="margin-bottom: 0px"
              >
                <span class="info-box-icon"><i class="fa fa-pie-chart" /></span>
                <div class="info-box-content">
                  <span class="info-box-text">运梁重量</span>
                  <span
                    class="info-box-number"
                  >300吨</span>
                  <div class="progress">
                    <div class="progress-bar" style="width: 10%" />
                  </div>
                  <span class="progress-description">
                    累计重量30000吨
                  </span>
                </div>
              </div>
            </el-col>
            <el-col :sm="6" :md="6" class="sum-row-col">
              <div
                class="info-box bg-cyan"
                style="margin-bottom: 0px"
              >
                <span
                  class="info-box-icon"
                ><i
                  class="fa fa-exclamation-triangle"
                /></span>
                <div class="info-box-content">
                  <span class="info-box-text">报警情况</span>
                  <span class="info-box-number">
                    7次</span>
                  <div class="progress">
                    <div class="progress-bar" style="width: 58%" />
                  </div>
                  <span class="progress-description">
                    4个报警已解除
                  </span>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :xs="24">
            <el-col :sm="12" :md="12" style="padding-right: 15px">
              <box icon="el-icon-map-location" title="GPS定位">
                <!-- <baidu-map
                  style="width:100%;height:254px"
                  class="map"
                  ak="NSIRtpnFIMlRSVaWF8EYLkVGzAvPKMWL"
                  :zoom="14"
                  center="杭州"
                  :scroll-wheel-zoom="true"
                >
                  <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
                  <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
                </baidu-map> -->
                <img src="../../../assets/ditu.jpg" width="100%" height="254">
              </box>
            </el-col>
            <el-col :xs="24" :sm="6" :md="6" style="padding-right: 15px">
              <box icon="el-icon-help" title="基础信息">
                <div style="height:254px">
                  <BasicInfo />
                </div>
              </box>
            </el-col>
            <el-col :xs="24" :sm="6" :md="6">
              <box icon="el-icon-help" title="均衡力及高度信息">
                <div style="height:254px">
                  <Balanced />
                </div>
              </box>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="10" :md="10" style="padding-right: 15px">
              <box icon="el-icon-camera" title="视频监控">
                <el-row style="height:400px">
                  <el-col :sm="8" :md="8">
                    <img src="../../../assets/ylc1.jpg" width="100%" height="185">
                  </el-col>
                  <el-col :sm="8" :md="8">
                    <img src="../../../assets/ylc2.jpg" width="100%" height="185">
                  </el-col>
                  <el-col :sm="8" :md="8">
                    <img src="../../../assets/ylc3.jpg" width="100%" height="185">
                  </el-col>
                  <el-col :sm="8" :md="8">
                    <img src="../../../assets/ylc4.jpg" width="100%" height="185">
                  </el-col>
                  <el-col :sm="8" :md="8">
                    <img src="../../../assets/ylc5.jpg" width="100%" height="185">
                  </el-col>
                  <el-col :sm="8" :md="8">
                    <img src="../../../assets/ylc6.jpg" width="100%" height="185">
                  </el-col>
                </el-row>
              </box>
            </el-col>
            <el-col :xs="24" :sm="8" :md="8" style="padding-right: 15px">
              <box icon="el-icon-camera" title="工况信息">
                <div style="height:400px">
                  <WorkInfo />
                </div>
              </box>
            </el-col>
            <el-col :xs="24" :sm="6" :md="6">
              <box icon="el-icon-warning-outline" title="报警情况">
                <div style="height:400px">
                  <el-table
                    ref="table"
                    :data="tableData"
                    height="400px"
                    border
                    style="width: 100%"
                  >
                    <el-table-column type="index" label="序号" align="center" />
                    <el-table-column prop="date" label="报警时间" align="center">
                      <template slot-scope="{ row }">
                        {{ row.date | datetime }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="reason" label="报警记录" align="center" />
                    <el-table-column prop="date" label="解除报警时间" align="center" />
                  </el-table>
                </div>
              </box>
            </el-col>
          </el-row>
        </div></el-container>
    </el-container>
  </div>
</template>

<script>
import Box from '@/components/Box/Box'
import waves from '@/directive/waves' // waves directive
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
// import BmScale from 'vue-baidu-map/components/controls/Scale'
// import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
const defaultSettings = require('@/settings.js')
import { mapGetters } from 'vuex'
import BasicInfo from '@/views/grider-erections/beam-carrier-work-info/components/BasicInfo'
import Balanced from '@/views/grider-erections/beam-carrier-work-info/components/Balanced'
import WorkInfo from '@/views/grider-erections/beam-carrier-work-info/components/WorkInfo'
export default {
  directives: { waves },
  components: {
    // BaiduMap,
    // BmScale,
    // BmNavigation,
    BasicInfo,
    Balanced,
    WorkInfo,
    Box //, InnerSidebar , ProjectSectionDeviceTree
  },
  props: {
    query: { type: Object, default: null, required: false }
  },
  data() {
    return {
      connection: null,
      tasks: [],
      title: defaultSettings.title,
      notifications: [],
      online: true, // 是否在线
      videos: ['https://player.youku.com/embed/XNTg3NDI2NjI0',
        'https://player.youku.com/embed/XNTg3NDI2NjI0',
        'https://player.youku.com/embed/XNTg3NDI2NjI0',
        'https://player.youku.com/embed/XNTg3NDI2NjI0',
        'https://player.youku.com/embed/XNTg3NDI2NjI0'
      ],
      tableData: [{
        date: '2016-05-10',
        reason: '发动机',
        state: '已处理',
        level: '一般'
      }, {
        date: '2016-05-09',
        reason: '发动机',
        state: '已处理',
        level: '严重'
      }, {
        date: '2016-05-08',
        reason: '发动机',
        state: '未处理',
        level: '中等'
      }, {
        date: '2016-05-03',
        reason: '发动机',
        state: '已处理',
        level: '一般'
      }, {
        date: '2016-05-07',
        reason: '行走速度',
        state: '已处理',
        level: '一般'
      }, {
        date: '2016-05-06',
        reason: '行走速度',
        state: '未处理',
        level: '一般'
      }, {
        date: '2016-05-05',
        reason: '行走速度',
        state: '未处理',
        level: '一般'
      }, {
        date: '2016-05-05',
        reason: '行走速度',
        state: '未处理',
        level: '一般'
      },
      {
        date: '2016-05-05',
        reason: '行走速度',
        state: '未处理',
        level: '一般'
      }
      ],
      videoData: {
        frontLeftUrl: '',
        aroundUrl: '',
        rearLeftUrl: '',
        rearRightUrl: ''
      },
      listQuery: {}
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device', 'name'])
  },
  async mounted() {
    this.loading = true
    try {
      await this.$store.dispatch('user/login', { username: 'tkycs', password: 'aA3031366!' })
      // this.init()
      this.loading = false
    } catch (ex) {
      console.log(ex)
    }
    const table = this.$refs.table
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
        // 重置table距离顶部距离
        divData.scrollTop = 0
      }
    }, 100)
  },
  methods: {
    // getUserListEvents() {
    //   var loadTodo = getUserLatestToDoList(this.userId).then(res => {
    //     this.tasks = res
    //   })
    //   return Promise.all([loadTodo])
    // },
    // markTodoAsComplete(task) {
    //   markAsComplete(task.id)
    // },
    // markNotificationAsRead(notification) {
    //   // markAsRead(notification.id)
    // },
    // toggleSideBar() {
    //   this.$store.dispatch('app/toggleSideBar')
    // },
    // async logout() {
    //   await this.$store.dispatch('user/logout')
    //   if (process.env.VUE_APP_ONLY_SSO === 'true') {
    //     await this.$store.dispatch('user/logoutOidc')
    //   } else {
    //     var homeUrl = process.env.VUE_APP_HOME_URL
    //     if (homeUrl) {
    //       window.location.href = homeUrl
    //     } else {
    //       this.$router.push({ path: '/' })
    //     }
    //   }
    // },
    // 查询
    handleFilter() {
    },
    handleTreeClick() {

    }
  }
}
</script>
<style lang="scss" scoped>
.table {
    border-top: 0px solid #dcdfe6;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    font-size: 14px;
    line-height: 1em;
}
.el-table >>> .el-table__cell {
    padding: 8px 0;
}
.table td,table th {
     border-top: none;
    border: 1px solid #dcdfe6;
    background-color:aliceblue;
    max-width: 250px;
}
table tr:nth-child(even){
background: #efefef;

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

}
::v-deep .card-body {
  -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0.2rem !important;
}

.sum-row {
  margin-top: 0px;
}
.sum-row-cols {
  padding-right: 15px;
}
.sum-row-col .info-box {
  height: 100px;
  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: 100px;
  width: 80px;
  text-align: center;
  font-size: 45px;
  line-height: 100px;
}
.content-height-fit {
 height: calc(100vh - 0px) !important;
}
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar { // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213,215,220,0.3);
    border: none;
  }
  &::-webkit-scrollbar-track { // 滚动条轨道
    border: none;
  }
}
::v-deep .el-table th.gutter{
  display: none;
  width:0
}
::v-deep .el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}

::v-deep .el-table__body{
  width: 100% !important;
}

.div-circular {
  width:16px;
  height:16px;
  border-radius:50%;
  }
.div-normal
{
  background-color:#25b38e;
}
.div-abnormal
{
  background-color:#686868;
}
</style>
