<template>
  <div class="content">
    <div class="search-box">
      <div class="search-item">
        <!-- 设备名称 -->
        <span>{{ $t('message.towerCrane.equipmentName') }}：</span>
        <el-select
          style="margin-right: 20px"
          v-model="devSn"
          clearable
          size="medium"
          :placeholder="$t('message.towerCrane.pleaseSelect')"
        >
          <el-option
            v-for="item in devList"
            :key="item.id"
            :label="item.devName"
            :value="item.devSn"
          >
          </el-option>
        </el-select>
        <el-date-picker
          class="serarch_picker"
          size="medium"
          v-model="valueTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          :start-placeholder="$t('message.towerCrane.startDate')"
          :end-placeholder="$t('message.towerCrane.endDate')"
        >
        </el-date-picker>
      </div>
      <!-- 查询 -->
      <el-button size="medium" @click="quertData">{{
        $t('message.towerCrane.query')
      }}</el-button>
      <!-- 刷新 -->
      <el-button size="medium" @click="refresh">{{
        $t('message.towerCrane.refresh')
      }}</el-button>
      <!-- 导出 -->
      <el-button size="medium" @click="exportExcel">{{
        $t('message.towerCrane.export')
      }}</el-button>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        class="tables"
        height="560"
        style="width: 100%"
      >
        <!-- 违章数据 -->
        <el-table-column :label="$t('message.towerCrane.violationData')">
          <template slot-scope="scope">
            <div class="table-list f-2">
              <div class="table-item">
                <!-- 设备名称 -->
                {{ $t('message.towerCrane.equipmentName') }}：{{
                  scope.row.devName
                }}
              </div>
              <div class="table-item">
                <!-- 设备编号 -->
                {{ $t('message.towerCrane.equipmentNumber') }}：{{
                  scope.row.devSn
                }}
              </div>
              <div class="table-item">
                <!-- 禁行区域违章 -->
                {{ $t('message.towerCrane.violationInfo1') }}：{{
                  scope.row.banRegionViolation==0?'正常':'违章'
                }}
              </div>
              <div class="table-item">
                <!-- 群塔碰撞违章 -->
                {{ $t('message.towerCrane.violationInfo2') }}：{{
                  scope.row.collisionViolation==0?'正常':'违章'
                }}
              </div>
              <div class="table-item">
                <!-- 吊钩违章 -->
                {{ $t('message.towerCrane.violationInfo3') }}：{{
                  scope.row.hookViolation==0?'正常':'违章'
                }}
              </div>
              <div class="table-item">
                <!-- 力矩违章 -->
                {{ $t('message.towerCrane.violationInfo4') }}：{{
                  scope.row.momentViolation==0?'正常':'违章'
                }}
              </div>
              <div class="table-item">
                <!-- 人员报警违章 -->
                {{ $t('message.towerCrane.violationInfo5') }}：{{
                  scope.row.personViolation==0?'正常':'违章'
                }}
              </div>
              <div class="table-item">
                <!-- 风速违章 -->
                {{ $t('message.towerCrane.violationInfo6') }}：{{
                  scope.row.windSpeedViolation==0?'正常':'违章'
                }}
              </div>
              <div class="table-item">
                <!-- 添加时间 -->
                {{ $t('message.towerCrane.violationInfo7') }}：{{
                  scope.row.addTime
                }}
              </div>
              <div class="table-item">
                <!-- 违章时间 -->
                {{ $t('message.towerCrane.violationInfo8') }}：{{
                  scope.row.violationTime
                }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getTowerListApi,
  selectTowerViolationApi,
  exporExcelTowerWorkCycleApi
} from '@/assets/js/api/towerCrane'
export default {
  props: ['sn'],
  data() {
    return {
      devSn: '',
      projectSn: '',
      devList: [],
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      valueTime: ''
    }
  },
  created() {
    this.projectSn = this.sn ? this.sn : this.$store.state.projectSn
    this.queryDev()
    this.selectNowDate()
    this.queryTowerWorkCycle()
  },
  computed: {
    transformTimestamp() {
      return function (timestamp) {
        if (timestamp) {
          let a = new Date(timestamp).getTime()
          const date = new Date(a)
          const Y = date.getFullYear() + '-'
          const M =
            (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-'
          const D =
            (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  '
          const h =
            (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
            ':'
          const m =
            (date.getMinutes() < 10
              ? '0' + date.getMinutes()
              : date.getMinutes()) + ':'
          const s = date.getSeconds() // 秒
          const dateString = Y + M + D + h + m + s
          return dateString
        }
      }
    },
    transformTimestamp2() {
      return function (timestamp) {
        if (timestamp) {
          let a = new Date(timestamp).getTime()
          const date = new Date(a)
          const Y = date.getFullYear() + '-'
          const M =
            (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-'
          const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
          const h =
            (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
            ':'
          const m =
            (date.getMinutes() < 10
              ? '0' + date.getMinutes()
              : date.getMinutes()) + ':'
          const s = date.getSeconds() // 秒
          const dateString = Y + M + D
          return dateString
        }
      }
    }
  },
  methods: {
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
      minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
      seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
      // var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
      let timer = year + '-' + month + '-' + day + ' ' + '00:00:00';
      // var timer = year + '-' + month + '-' + day
      let timerOut = year + '-' + month + '-' + day + ' ' + '23:59:59'
      this.valueTime = [timer, timerOut]
      console.log(timer)
      // return timer;
    },
    queryDev() {
      getTowerListApi({ projectSn: this.projectSn }).then((res) => {
        // console.log(res)
        if (res.code == 200 && res.result) {
          this.devList = res.result
        }
      })
    },
    quertData() {
      this.pageNo = 1
      this.pageSize = 10
      console.log(this.devSn)
      this.queryTowerWorkCycle()
    },
    refresh() {
      this.pageNo = 1
      this.pageSize = 10
      this.total = 0
      this.devSn = ''
      this.valueTime = ''
      this.queryTowerWorkCycle()
    },
    queryTowerWorkCycle() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let data = {
        devSn: this.devSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        projectSn: this.projectSn,
        startTime: this.valueTime ? this.valueTime[0] : '',
        endTime: this.valueTime ? this.valueTime[1] : ''
      }
      console.log(data)
      selectTowerViolationApi(data).then((res) => {
        console.log(res)
        if (res.code == 200 && res.result) {
          this.tableData = res.result.records
          console.log(this.tableData)
          this.total = res.result.total
          loading.close()
        }
      })
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.queryTowerWorkCycle()
    },
    handleCurrentChange(value) {
      this.pageNo = value
      this.queryTowerWorkCycle()
    },
    exportExcel() {
      if (this.valueTime) {
        window.location.href =
          this.$http.defaults.baseURL +
          'xmgl/download/exporExcelTowerWorkCycle?projectSn=' +
          this.projectSn +
          '&devSn=' +
          this.devSn
            ? this.devSn
            : '' +
              '&startTime=' +
              this.valueTime[0] +
              '&endTime=' +
              this.valueTime[1]
      } else {
        window.location.href =
          this.$http.defaults.baseURL +
          'xmgl/download/exporExcelTowerWorkCycle?projectSn=' +
          this.projectSn +
          '&devSn=' +
          this.devSn
      }
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .search-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 14px;
    .search-item {
      display: inline-block;
      margin-right: 26px;
    }
  }
  .table-box {
    flex: 1;
    background: #fff;
    /deep/.el-table {
      td {
        vertical-align: top;
      }
      .cell {
        padding-left: 44px;
      }
    }
    .f-2 {
      display: flex;
      flex-wrap: wrap;
      .table-item {
        width: 50%;
      }
    }
  }
}
</style>
