<template>
  <div class="main-page">
    <!-- 中间平面图区域 -->
    <div class="map-overview">
      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">

      <img
        v-for="item in devList"
        :id="item.id"
        :key="item.id"
        :src="item.imgUrl"
        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px', left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
        class="point-camera"
        @click="detailDev(item, $event)" />
    </div>
    <!-- 右侧设备详情及操作区域 -->
    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
      <span class="dev-detail-close" @click="showDevDetail=false" />
      <!--<el-row style="margin-top: -25px;">-->
        <!--<el-col :span="24">设备名称-->
          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
        <!--</el-col>-->
      <!--</el-row>-->
      <el-row>
        <el-col :span="24">设备编号
          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">设备类型
          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">在线状态
          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">安装日期
          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">安装位置
          <span class="dev-detail-span">{{ dataForm.position }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getProject } from '@/utils/baseConfig'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
import { getDetailDevice } from '@/api/device'

// const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
  name: 'AlarmPosition',
  components: { DeviceDetail },
  data() {
    return {
      title: getProject().title,
      bgImageSrc: tg_main,
      devListParams: {
        picture: '1',
        areaTypeId: 1,
        deviceTypes: []
      },
      dev: {
        alarm: 0,
        onLine: 0,
        closed: 0,
        offLine: 0
      },
      imgSizeOriginal: {
        width: 2245,
        height: 1586
      }, // 图片原尺寸
      imgSize: {
        width: 2245,
        height: 1586
      }, // 图片显示尺寸
      winSize: {
        width: 1440,
        height: 789
      }, // 屏幕窗口尺寸
      halfLeft: 0,
      showDevDetail: false, // 是否显示设备详情
      alarmList: [], // 报警列表
      alarmColumns: [
        {
          text: '设备编号',
          value: 'devcode',
          align: 'center'
        },
        {
          text: '报警内容',
          value: 'alarmContent',
          align: 'center'
        },
        {
          text: '报警时间',
          value: 'alarmTime',
          align: 'center',
          width: 165
        }
      ], // 报警列表显示列
      tableShow: true, // 是否显示告警列表
      devList: [], // 设备列表（在地图上显示）
      dataForm: {
        id: '', // id
        name: '', // 设备名
        devcode: '', // 设备编号
        typeName: '', // 设备类型
        model: '', // 设备型号
        onlineStatusName: '', // 在线状态
        deviceStatusName: '', // 设备状态
        position: '', // 安装位置
        installDate: '', // 安装日期
        inOutName: '' // 进出营
      }, // 设备详情表单
      devPosition:{
        picture: '',
        x: '',
        y: ''
      },
      checkDevType: [true, false] // 选中设备类型
    }
  },
  mounted() {
    this.initWindowSize()
    if (this.$route.query && this.$route.query.id) {
      const id = this.$route.query.id
      getDetailDevice(id).then(response => {
        if (response.code === 200) {
          console.log(response.data)
          this.devPosition.picture = response.data.picture
          this.devPosition.x = response.data.x
          this.devPosition.y = response.data.y
          if(this.devPosition.picture === '1'){
            this.bgImageSrc = tg_main
          }else if(this.devPosition.picture === '2'){
            this.bgImageSrc = tg_3_1
          }else if(this.devPosition.picture === '3'){
            this.bgImageSrc = tg_4_1
          }else if(this.devPosition.picture === '4'){
            this.bgImageSrc = tg_4_5
          }else{
            this.$message.warning('该设备暂无位置信息')
            return
          }
          this.devList = []
          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
            this.devList.push(response.data)
          }
        }
      })
    }
    const that = this
    window.onresize = function() {
      that.initWindowSize()
      that.getBgImageSize()
    }
  },
  methods: {
    // 获取窗口大小
    initWindowSize() {
      // 获取窗体尺寸
      this.winSize = {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }
    },
    // 获取图像大小
    getBgImageSize() {
      // 获取图片尺寸
      this.imgSize = {
        width: this.$refs['bgImg'].width,
        height: this.$refs['bgImg'].height
      }
      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
    },
    // 重新绘制设备点位
    reDrawDevs() {
      const halfLeft = (this.winSize.width - this.imgSize.width) / 2

      // 调整球机的设备位置
      const that = this
      this.devList.forEach(function(item) {
        const point = document.getElementById(item.id)

        if (point !== null) {
          if (item.x !== '' && item.y !== '') {
            point.style.position = 'absolute'
            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
          } else {
            point.style.display = 'none'
          }
        }
      })
    },
    // 平面图就绪时执行函数
    backgroundImageReady() {
      this.getBgImageSize()
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    backToIndex() {
      this.$router.push('/door/alarm/now')
    },
    // 查询并显示设备详情
    detailDev(dev, event) {
      this.resetDevDetail()
      getDetailDevice(dev.id).then(response => {
        if (response.code === 200) {
          this.dataForm = {
            id: dev.id,
            name: dev.name,
            devcode: dev.devcode,
            typeName: response.data.typeName,
            model: dev.model,
            onlineStatusName: response.data.onlineStatusName,
            position: dev.position,
            installDate: dev.installDate,
            inOutName: response.data.inOutName,
            deviceStatusName: response.data.deviceStatusName
          }
        } else {
          this.$message.error(response.message)
        }
      })

      // 弹窗显示设备详情
      const targetDev = event.currentTarget // 取到点击到的设备图标div

      this.showDevDetail = true
      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
      top = top + 100
      this.$refs['dev-detail-block'].style.position = 'absolute'
      this.$refs['dev-detail-block'].style.top = top + 'px'
      this.$refs['dev-detail-block'].style.left = targetDev.style.left
    },
    // 点击报警列表
    alarmRowClick(dev, column, event) {

    },
    // 清除设备详情
    resetDevDetail() {
      this.dataForm = {
        id: '', // id
        name: '', // 设备名
        devcode: '', // 设备编号
        typeName: '', // 设备类型
        model: '', // 设备型号
        onlineStatusName: '', // 在线状态
        deviceStatusName: '', // 设备状态
        position: '', // 安装位置
        installDate: '', // 安装日期
        inOutName: '' // 进出营
      }
    }
  }
}
</script>

<style lang="scss" scoped>

  .main-page {
    background-size: cover;
    background-color: #023d83;
    height: 100vh;
  }

  .main-header {
    width: 100vw;
  }
  .main-title {
    height: 90px;
    text-align: center;
    padding-top: 20px;
    background: url("../../assets/overview_images/title-background-1920.png");
  }

  .main-title img {
    display: inline-block;
    margin-right: 15px;
    width: 52px;
    height: 32px;
    vertical-align: text-bottom;
  }

  .home-icon {
    width: 26px;
    height: 26px;
    position: fixed;
    left: 20px;
    top: 20px;
  }
  .exit-icon {
    width: 26px;
    height: 26px;
    position: fixed;
    right: 20px;
    top: 20px;
  }
  .home-icon img, .exit-icon img {
    width: 26px;
    height: 26px;
  }

  .main-title span {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
    font-family: 'Microsoft YaHei';
  }

  .map-overview {
    /*margin-top: 50px;*/
    /*width: 1100px;*/
    height: calc(90vh - 200px);
    text-align: center;
    position: relative;
  }
  .point {
    width: 24px;
    height: 24px;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .point-camera {
    background-size: contain;
    @extend .point;
  }
  .point-fence {
    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
    background-size: contain;
    @extend .point;
  }

  .statis-block {
    text-align: center;
    margin-top: 20px;
    font-size: 48px;
  }
  .sub-title {
    text-align: center;
    font-size: 32px;
  }
  .sub-data-block {
    width: 122px;
    height: 155px;
  }
  .dev-normal {
    background: url("../../assets/overview_images/dev-box.png");
    background-size: contain;
    color: #00ff0c;
  }
  .dev-alarm {
    background: url("../../assets/overview_images/dev-box.png");
    background-size: contain;
    color: #ff0000;
  }
  .dev-offline {
    background: url("../../assets/overview_images/offline.png");
    background-size: contain;
    color: #fff000;
  }
  .dev-closed {
    background: url("../../assets/overview_images/closed.png");
    background-size: contain;
    color: #00fff6;
  }

  .dev-status-block {
    position: absolute;
    top: 100px;
    left: 20px;
    color: #ffffff;
  }

  .alarm-now-block {
    position: absolute;
    z-index: 500;
    top: 300px;
    left: 20px;
    width: 480px;
    .map-alarm-div-header {
      line-height: 40px;
      padding-left: 10px;
      color: #00fff6;
      font-size: 24px;
      .icon-right {
        cursor: pointer;
        margin-left: 20px;
      }
    }
    .el-scrollbar {
      /*height: 200px;*/
      width: 100%;
    }
    .moredatascollor {
      height: 200px;
    }
    .el-scrollbar__wrap {
      overflow-y: auto;
      overflow-x: hidden;
      margin-bottom: 0px !important;
    }
    .el-table {
      font-size: 12px;
    }
    .transition-box {
      margin-bottom: 10px;
      width: 200px;
      height: 100px;
      border-radius: 4px;
      background-color: #409EFF;
      text-align: center;
      color: #fff;
      padding: 40px 20px;
      box-sizing: border-box;
      margin-right: 20px;
    }
  }

  .alarm-now-block /deep/ .el-table th {
    background-color: #0757A0;
    padding: 12px 0px;
    font-size: 16px;
    color: #00fff6;
    font-weight: normal;
  }

  .alarm-now-block /deep/ .el-table td {
    /*background-color: #0757A0;*/
    padding: 10px 0px;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: normal;
  }

  .alarm-now-block /deep/ .el-table__row td {
    background-color: #023D83;
  }
  .alarm-now-block /deep/ .el-table__body tr:hover > td {
    background-color: #0757A0;
  }
  .alarm-now-block /deep/ tr.el-table__row--striped td {
    background-color: #0757A0;
  }

  .map-tab {
    position: absolute;
    right: 20px;
    top: 100px;
    width: 300px;
    button {
      margin: 5px 0px;
    }
  }

  .tab-top {
    position: relative;
    width: 284px;
    height: 24px;
    background: url("../../assets/overview_images/tab-top-bg.png");
  }
  .tab-bottom {
    position: relative;
    width: 284px;
    height: 24px;
    background: url("../../assets/overview_images/tab-bottom-bg.png");
  }
  .map-index-button {
    position: relative;
    width: 284px;
    height: 74px;
    background: url("../../assets/overview_images/tab-index-unchecked.png");
    font-size: 32px;
    line-height: 74px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
  }
  .index-selected {
    background: url("../../assets/overview_images/tab-index-checked.png");
  }
  .sub-tab-guider {
    width: 149px;
    height: 50px;
    background: url("../../assets/overview_images/sub-tab-guider.png");
  }
  .sub-tab-border {
    width: 204px;
    height: 253px;
    background: url("../../assets/overview_images/sub-tab-border.png");
  }
  .sub-tab-content {
    text-align: center;
    color: #FFFFFF;
    font-size: 28px;
    cursor: pointer;
    width: 200px;
  }

  .dev-detail-block {
    /*position: absolute;*/
    /*right: 20px;*/
    /*bottom: 100px;*/
    width: 520px;
    height: 335px;
    color: #00FFFF;
    font-size: 24px;
    font-family: "Microsoft YaHei";
    padding: 45px 60px;
    line-height: 35px;
    background: url("../../assets/overview_images/dev-info.png");
    .dev-detail-span {
      margin-left: 20px;
    }
    .dev-detail-close::before {
      content: "\2716";
      position: relative;
      top: -20px;
      right: -410px;
      cursor: pointer;
    }
  }

  .dev-footer {
    position: absolute;
    bottom: 25px;
  }

  .dev-icon {
    width: 195px;
    height: 105px;
    vertical-align: middle;
    line-height: 65px;
    padding: 20px 30px !important;
    margin-left: 15px;
    cursor: pointer;
    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
  }

  .dev-icon img {
    height: 40px;
    vertical-align:middle;
  }
  .dev-icon span {
    font-size: 20px;
    color: #00D2FF;
    line-height: 65px;
    height: 65px;
    vertical-align:middle;
    float: right;
  }

  .dev-type-selected {
    background: url("../../assets/overview_images/dev-type-border-checked.png");
  }
  .dev-type-selected span {
    color: #f58a88 !important;
  }

  /*@media(max-width: 1440px) {*/
  /*  .main-title {*/
  /*    height: 68px;*/
  /*    padding-top: 20px;*/
  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
  /*  }*/
  /*  .main-title span {*/
  /*    font-size: 24px;*/
  /*  }*/
  /*  .main-title img {*/
  /*    margin-right: 15px;*/
  /*    width: 32px;*/
  /*    height: 32px;*/
  /*  }*/

  /*  .home-icon {*/
  /*    left: 18px;*/
  /*    width: 18px;*/
  /*    height: 18px;*/
  /*  }*/
  /*  .exit-icon {*/
  /*    right: 18px;*/
  /*    width: 18px;*/
  /*    height: 18px;*/
  /*  }*/

  /*  .home-icon img, .exit-icon img {*/
  /*    width: 18px;*/
  /*    height: 18px;*/
  /*  }*/

  /*  .dev-icon span {*/
  /*    font-size: 12px;*/
  /*  }*/
  /*}*/

  @media(max-width: 1440px) {
    .main-title {
      height: 65px;
      padding-top: 16px;
      background: url("../../assets/overview_images/title-background-1366.png");
    }
    .main-title span {
      font-size: 24px;
    }
    .main-title img {
      margin-right: 15px;
      width: 32px;
      height: 32px;
    }

    .home-icon {
      left: 16px;
      width: 16px;
      height: 16px;
    }
    .exit-icon {
      right: 16px;
      width: 16px;
      height: 16px;
    }

    .home-icon img, .exit-icon img {
      width: 20px;
      height: 20px;
    }

    .map-overview {
      margin-top: 35px;
      height: calc(90vh - 150px);
    }

    .point {
      width: 16px;
      height: 16px;
    }

    .statis-block {
      margin-top: 16px;
      font-size: 36px;
    }
    .sub-title {
      font-size: 24px;
    }
    .sub-data-block {
      width: 90px;
      height: 114px;
    }

    .dev-normal {
      background: url("../../assets/overview_images/dev-box-1366.png");
    }
    .dev-alarm {
      background: url("../../assets/overview_images/dev-box-1366.png");
    }
    .dev-offline {
      background: url("../../assets/overview_images/offline-1366.png");
    }
    .dev-closed {
      background: url("../../assets/overview_images/closed-1366.png");
    }

    .dev-status-block {
      top: 90px;
      left: 16px;
    }

    .alarm-now-block {
      top: 220px;
      left: 16px;
      width: 360px;
      .map-alarm-div-header {
        line-height: 32px;
        font-size: 20px;
      }
    }

    .alarm-now-block /deep/ .el-table th {
      padding: 8px 0px;
      font-size: 16px;
    }
    .alarm-now-block /deep/ .el-table td {
      padding: 5px 0px;
      font-size: 12px;
    }

    .map-tab {
      right: 16px;
      top: 90px;
      width: 215px;
      button {
        margin: 5px 0px;
      }
    }
    .tab-top {
      width: 213px;
      height: 18px;
      background: url("../../assets/overview_images/tab-top-bg-1366.png");
    }
    .tab-bottom {
      width: 213px;
      height: 18px;
      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
    }
    .map-index-button {
      width: 210px;
      height: 56px;
      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
      font-size: 24px;
      line-height: 56px;
    }
    .index-selected {
      background: url("../../assets/overview_images/tab-index-checked-1366.png");
    }

    .sub-tab-guider {
      width: 110px;
      height: 37px;
      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
    }
    .sub-tab-border {
      width: 150px;
      height: 186px;
      background: url("../../assets/overview_images/sub-tab-border-1366.png");
    }
    .sub-tab-content {
      font-size: 20px;
      cursor: pointer;
      width: 145px;
    }

    .dev-detail-block {
      width: 390px;
      height: 251px;
      font-size: 16px;
      padding: 30px 40px;
      line-height: 28px;
      background: url("../../assets/overview_images/dev-info-1366.png");
      .dev-detail-close::before {
        top: -12px;
        right: -312px;
      }
    }

    .dev-footer {
      bottom: 20px;
    }
    .dev-icon {
      width: 140px;
      height: 76px;
      line-height: 56px;
      padding: 10px 16px !important;
      margin-left: 15px;
      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
    }
    .dev-icon img {
      height: 32px;
    }
    .dev-icon span {
      font-size: 16px;
      line-height: 56px;
      height: 56px;
    }
    .dev-type-selected {
      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
    }
  }

</style>