<template>
  <div class="content">
    <table>
      <tr>
        <th class="title">机场名称:</th>
        <th>{{ detail.name }}</th>

      </tr>
      <tr>
        <th class="title">机场状态:</th>
        <th>{{ status }}</th>
      </tr>
      <tr>
        <th class="title">可选挂载:</th>
        <th>{{ mountedName }}</th>
      </tr>
    </table>
    <div class="deviceInfo">
      <div
        v-for="(item,index) in indicatorList"
        :key="index"
        class="item"
      >
        <img :src="item.icon">
        <div class="value">{{ item.indicatorValue }}</div>
        <div class="name">{{ item.indicatorName }}</div>
      </div>
    </div>
    <div class="monitorList">
      <div class="innerMonitor">
        <div class="monitorName">机场内部监控</div>
        <!-- <img src="../../../assets/images/webScreen.png" @click="videoShowStyle"> -->
        <videoPlay
          v-bind="innerMonitorOptions"
          style="z-index:1"
        />
      </div>
      <div class="innerMonitor">
        <div class="monitorName">机场外部监控</div>
        <!-- <img src="../../../assets/images/webScreen.png" @click="outerVideoShowStyle"> -->
        <videoPlay
          v-bind="outsideMonitorOptions"
          style="z-index:1"
        />
      </div>

    </div>
  </div>
</template>
<script>

import { reactive, toRefs, watch } from 'vue'
import { getAirportInfo } from '@/api/dashboard/index.js'
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
export default {
  name: 'OneMap',
  components: { videoPlay },
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  setup(props) {
    const data = reactive({
      detail: props.data,
      indicatorList: [
        { icon: new URL('../../../assets/images/wind.png', import.meta.url).href, indicatorValue: null, indicatorName: '风速' },
        { icon: new URL('../../../assets/images/north.png', import.meta.url).href, indicatorValue: null, indicatorName: '风向' },
        { icon: new URL('../../../assets/images/atmosPressure.png', import.meta.url).href, indicatorValue: null, indicatorName: '大气压力' },
        { icon: new URL('../../../assets/images/airHumidity.png', import.meta.url).href, indicatorValue: null, indicatorName: '空气湿度' },

        { icon: new URL('../../../assets/images/airTemperature.png', import.meta.url).href, indicatorValue: null, indicatorName: '空气温度' }],
      innerMonitorOptions: {
        width: '256px',
        height: '198px',
        control: true, // 是否显示控制
        controlBtns: [

          'fullScreen'
        ], // 显示所有按钮,

        src: ''

      },
      status: null,
      mountedName: null,
      outsideMonitorOptions: {
        width: '256px',
        height: '198px',
        control: true, // 是否显示控制
        controlBtns: [

          'fullScreen'
        ], // 显示所有按钮,
        src: ''

      }

    })

    watch(() => props.data, (value) => {
      if (JSON.stringify(value) !== '{}') {
        // console.log(props.data)
        data.detail = props.data
        data.innerMonitorOptions.src = data.detail.internalMonitorUrl
        data.outsideMonitorOptions.src = data.detail.externalMonitorUrl
        getAirportInfo({
          airportId: data.detail.id
        })
          .then(res => {
            if (res.code === 0) {
              console.log(res, '机场详情')
              data.mountedName = res.data.mountName
              const status = parseFloat(res.data.status)
              switch (status) {
                case 1:
                  data.status = '空闲'
                  break
                case 2:
                  data.status = '执行飞行中'
              }
              data.indicatorList.map((item, index) => {
                switch (index) {
                  case 0:
                    item.indicatorValue = res.data.wspd
                    break
                  case 1:
                    item.indicatorValue = res.data.wdir
                    break
                  case 2:
                    item.indicatorValue = res.data.hpa
                    break
                  case 3:
                    item.indicatorValue = res.data.hum
                    break
                  case 5:
                    item.indicatorValue = res.data.tmp
                }
              })
            }
          })
      }
    })
    const videoShowStyle = () => {
      data.innerMonitorOptions.webFullScreen = !data.innerMonitorOptions.webFullScreen
      // data.innerMonitorOptions.width = '500px'
      // data.innerMonitorOptions.webFullScreen = true
    }
    const outerVideoShowStyle = () => {
      data.outsideMonitorOptions.webFullScreen = !data.outsideMonitorOptions.webFullScreen
    }
    return {
      ...toRefs(data),
      videoShowStyle,
      outerVideoShowStyle
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100vw;
  height: 100vh;
}

.layer-management {
  height: calc(100vh - 84%);
  position: absolute;
  width: 100px;
  /* margin-right: 10px; */
  left: 100px;
  top: 100px;
  background-color: rgba(0, 0, 0, 0.6);
}
.content {
  box-sizing: border-box;
  padding: 25px 5px;
}
table {
  width: 100%;
  height: 90px;
  font-size: 15px;
  font-family: Noto Sans SC-Regular, Noto Sans SC;
  font-weight: 400;
  border-collapse: collapse;
  background: #2c2c2c;
  .title {
    color: #8b8b8b;
  }
}
table,
td,
th {
  border: 1px solid #707070;
  color: white;
  font-weight: 400;
}
.deviceInfo {
  margin-top: 5px;
  width: 100%;
  height: 83px;
  background: #2c2c2c;
  display: flex;
  justify-content: space-between;
  .item {
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .value {
      font-size: 14px;
      font-family: Noto Sans SC-Regular, Noto Sans SC;
      font-weight: 400;
      color: #ffffff;
    }
    .name {
      font-size: 15px;
      font-family: Noto Sans SC-Regular, Noto Sans SC;
      font-weight: 400;
      color: #8b8b8b;
    }
  }
}
.monitorList {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  .innerMonitor {
    position: relative;
    width: 256px;
    height: 198px;
    .monitorName {
      position: absolute;
      bottom: 8px;
      left: 10px;
      font-size: 14px;
      font-family: Noto Sans SC-Regular, Noto Sans SC;
      font-weight: 400;
      color: #ffffff;
      z-index: 100;
    }
    img {
      position: absolute;
      right: 10px;
      bottom: 8px;
      z-index: 100;
    }
  }
}
</style>

