<template>
  <n-drawer v-bind="getDrawerOptions" @update:show="updateVisible">
    <n-drawer-content closable title="飞行坐标">
      <data-table
        ref="tableRef"
        :columns="columns"
        :data="tableData"
        :row-key="(row) => row.id"
        :scroll-x="2200"
        size="large"
      />
    </n-drawer-content>
  </n-drawer>
</template>
<script>
import { reactive, computed, toRefs, watch, ref } from 'vue'
import dataTable from '@/components/DataTable/index.vue'
import { getCoordinate } from '@/api/inspection/alltask.js'
export default {
  name: 'TaskCoordinate',
  components: { dataTable },
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const data = reactive({
      columns: [
        {
          title: '序号',
          key: 'key',
          render: (_, index) => {
            return `${index + 1}`
          },
          align: 'center',
          minWidth: 50
        },
        {
          title: '云盒SN号',
          key: 'boxSn',
          align: 'center',
          minWidth: 100
        },
        {
          title: '经度',
          key: 'lng',
          align: 'center',
          minWidth: 100
        },
        {
          title: '纬度',
          key: 'lat',
          align: 'center',
          minWidth: 150
        },
        {
          title: '海拔高度（米）',
          key: 'altitude',
          align: 'center',
          minWidth: 100
        },
        {
          title: '相对高度（米）',
          key: 'ultrasonic',
          align: 'center',
          minWidth: 100
        },
        {
          title: '俯仰角（度）',
          key: 'pitch',
          align: 'center',
          minWidth: 150
        },
        {
          title: '横滚角（度）',
          key: 'roll',
          align: 'center',
          minWidth: 100
        },
        {
          title: '航向角（度）',
          key: 'yaw',
          align: 'center',
          minWidth: 100
        },
        {
          title: '空速（米/秒）',
          key: 'airspeed',
          align: 'center',
          minWidth: 150
        },
        {
          title: '地速（米/秒）',
          key: 'velocity',
          align: 'center',
          minWidth: 100
        },
        {
          title: '时间戳',
          key: 'ultrasonic',
          align: 'center',
          minWidth: 100
        }
      ],
      tableData: []
    })

    /* 获取抽屉的信息 */
    const getDrawerOptions = computed(() => {
      return {
        show: props.visible,
        width: '100%',
        placement: 'right'
      }
    })

    const tableRef = ref(null)

    const loadDataTable = async function() {
      const id = props.id
      const res = await getCoordinate(id)
      if (res.code === 0) {
        data.tableData = res.data
      }
    }

    watch(() => props.visible, (value) => {
      if (value) {
        loadDataTable()
      }
    })

    const updateVisible = function() {
      emit('update:visible', false)
    }

    return {
      getDrawerOptions,
      ...toRefs(data),
      tableRef,
      loadDataTable,
      updateVisible
    }
  }
}
</script>
<style scoped>
</style>
