<template>
  <n-card>
    <div class="card__title">
      <p class="card__title--left">机场状态</p>
      <p class="card__title--right">
        <n-form
          inline
          :label-width="80"
          :model="videoForm"
          label-placement="left"
        >
          <n-form-item label="机场选择：" path="airportId">
            <n-select v-model:value="videoForm.airportId" :options="airOptions" @update:value="getAirportInfo" />
          </n-form-item>
        </n-form>
      </p>
    </div>
    <div class="card__video">
      <div class="video__item">
        <VideoPlayer id="video-inner" ref="videoRef" :use-empty="true">
          <template #empty>
            <div class="video__item--empty">
              <img src="@/assets/images/lose-control.png">
              <p>暂无信号</p>
            </div>
          </template>
        </VideoPlayer>
      </div>
      <div class="video__item">
        <div class="item__weather">
          <ul>
            <li v-for="(item,index) in weatherList" :key="index">&nbsp;{{ item.label }}:&nbsp;{{ item.value }}&nbsp;</li>
          </ul>
        </div>
        <BaseMap ref="mapRef" :coordinate="coordinate" />
      </div>
    </div>
  </n-card>
</template>

<script>
import { dataToSelect } from '@/utils/handleData.js'
import { airportList, airportWeather } from '@/api/dashboard/index.js'
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import BaseMap from '@/components/BaseMap/BaseMap.vue'
import { ref, reactive, toRefs, nextTick } from 'vue'
import { gcj02towgs84 } from '@/utils/coordinate-util.js'

export default {
  name: 'TaskCard',
  components: { VideoPlayer, BaseMap },
  setup() {
    const mapRef = ref()
    const videoRef = ref()
    const data = reactive({
      videoForm: {
        airportId: null
      },
      airOptions: [],
      airOptionsAll: [],
      weatherList: [],
      coordinate: [108.94043, 31.008173]
    })

    /**
     * @description: 获取机场数据
     * @param {*} res
     * @return {*}
     */
    const loadAirport = (async function() {
      const res = await airportList({ page: 1, limit: 60 })
      if (res.code === 0) {
        data.airOptionsAll = res.data
        // console.log(data.airOptionsAll)
        data.airOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
        data.videoForm.airportId = res.data[0].id
        getAirportInfo(res.data[0].id)
      }
    })()

    async function getAirportInfo(id) {
      const airItem = data.airOptionsAll.find((item) => { return item.id === id })
      const coordinate = gcj02towgs84(parseFloat(airItem?.longitude), parseFloat(airItem?.latitude))
      markPoint(coordinate)
      const res = await airportWeather(id)
      if (res.code === 0) {
        const parm = res.data.wth?.parm || []
        data.weatherList = parm.length !== 0 ? [
          // { label: '天气', value: '' },
          { label: '气温', value: (parm.tmp / 10).toFixed(1) + ' ℃' },
          { label: '湿度', value: (parm.hum / 10).toFixed(1) + ' RH' },
          { label: '风度', value: (parm.wspd / 10).toFixed(1) + ' m/s' },
          { label: '风向', value: (parm.wdir).toFixed(1) + ' °' }
        ] : []
        videoRef.value.disposeVideo()
        nextTick(() => {
          initPlayer()
        })
      }
    }

    /* 地图标点 */
    const markPoint = function(coordinate) {
      try {
        mapRef.value.getLayer(coordinate)
      } catch (e) {
        markPoint(coordinate)
      }
    }

    function initPlayer() {
      const row = data.airOptionsAll.find((item) => { return item.id === data.videoForm.airportId })
      const options = {
        width: '100%',
        height: '100%',
        source: row?.flvExternalMonitorUrl,
        isLive: true
      }
      videoRef.value?.init(options)
    }

    return {
      ...toRefs(data),
      mapRef,
      videoRef,
      loadAirport,
      getAirportInfo
    }
  }
}

</script>
<style scoped lang='scss'>
.card__title{
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  .card__title--left{
    font-size: 18px;
    padding-left: 8px;
    border-left: 4px solid rgba(24, 144, 255, 1);
  }
  .card__title--right{
    .n-select{
      width: 180px;
    }
  }
}
.card__video{
  display: flex;
  height: calc(100% - 55px);
  .video__item{
    width: calc(50% - 10px);
    position: relative;
    &:first-child{
      margin-right: 20px
    }
    .video__item--empty{
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(3, 3, 3, 1);
      img{
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%,-50%);
      }
      p{
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translate(-50%,-50%);
        font-size: 12px;
        color: rgba(255, 255, 255, 1);
      }
    }
    .item__weather{
      position: absolute;
      z-index: 100;
      padding: 5px 6px;
      font-size: 12px;
      right: 0;
      color: rgba(255, 255, 255, 1);
      background: rgba(0, 0, 0, 0.4);
    }
  }
}
::v-deep(.n-form){
  .n-form-item-feedback-wrapper{
    display: none;
  }
}
</style>
