<script setup>
//飞行前的检查面板
import {
  ref,
  h,
  defineAsyncComponent,
  onMounted,
  onUnmounted,
  watch,
  toRaw,
  defineProps,
  reactive,
} from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
import { beforeCheckApi } from '@/apis/common'

const props = defineProps({
  row: Object, //当前数据
})
let isChecked = ref(false)
let checkTime = null
let isFirstQuery = false //是否是第一次请求
let checkTimeNum = ref(0) //花费的检测时间
let checkTimeNum_timeout = null
let processInfoList = ref([]) //进度列表
let processTitle = ref('')
let processStatus = ref(null)
let precent = ref(0)
let progressStatus = ref('')

const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '20px',
    color: '#ffffff',
  },
  spin: true,
})
//开始计时
const startTimeFn = () => {
  checkTimeNum.value++
  checkTimeNum_timeout = setTimeout(() => {
    startTimeFn()
  }, 1000)
}
//自检请求
const checkFn = async (row) => {
  if (row) {
    let params = {
      airportId: row.id,
      taskId: row.task[0].taskId,
      // taskId: 4454,
    }
    //先隐藏下面
    let res = await beforeCheckApi(params)

    if (res.code == 0) {
      /*测试数据
      res = {
        code: 0,
        msg: '操作成功',
        data: {
          description: '[地面站]无人机起飞成功',
          progressPercentage: 100,
          elapsedSeconds: 114,
          taskStartTime: '2025-08-22 15:11:03',
          taskStartTimestampMs: 1755846663000,
          status: 'success',
          steps: [
            {
              description: '[综管]航线飞行任务接收成功',
              time: '15:11:03',
              diffSeconds: '',
              status: 'success',
            },
            {
              description: '[机巢]机巢设备自检通过',
              time: '15:11:12',
              diffSeconds: '9s',
              status: 'success',
            },
            {
              description: '[机巢]机场气象环境检查通过',
              time: '15:11:13',
              diffSeconds: '1s',
              status: 'success',
            },
            {
              description: '[机巢]升平台成功',
              time: '15:11:40',
              diffSeconds: '27s',
              status: 'success',
            },
            {
              description: '[机巢]打开灯光成功',
              time: '15:11:40',
              diffSeconds: '0s',
              status: 'success',
            },
            {
              description: '[机巢]打开图传成功',
              time: '15:11:41',
              diffSeconds: '1s',
              status: 'success',
            },
            {
              description: '[机巢]无人机开机成功',
              time: '15:11:43',
              diffSeconds: '2s',
              status: 'success',
            },
            {
              description: '[机巢]出舱成功',
              time: '15:11:56',
              diffSeconds: '13s',
              status: 'success',
            },
            {
              description: '[地面站]无人机连接成功',
              time: '15:11:56',
              diffSeconds: '0s',
              status: 'success',
            },
            {
              description: '[地面站]获取无人机环境检查成功',
              time: '15:12:45',
              diffSeconds: '49s',
              status: 'success',
            },
            {
              description: '[地面站]无人机写入航线',
              time: '15:12:48',
              diffSeconds: '3s',
              status: 'success',
            },
            {
              description: '[综管]无人机起飞条件检查成功',
              time: '15:12:53',
              diffSeconds: '5s',
              status: 'success',
            },
            {
              description: '[地面站]无人机起飞成功',
              time: '15:12:57',
              diffSeconds: '',
              status: 'success',
            },
          ],
        },
        traceId: '',
      }
      */

      processInfoList = res.data.steps

      //总共花费的时间
      if (!isFirstQuery) {
        checkTimeNum.value = Number(res.data.elapsedSeconds)
      }

      processTitle.value = res.data.description
      processStatus.value = res.data.status
      precent.value = res.data.progressPercentage
      // console.log(processStatus.value)
      // console.log(res.data)

      if (precent.value == 100) {
        clearTimeout(checkTime)
        return
      }
      if (processStatus.value == 'error') {
        progressStatus.value = 'exception' //进度条设置为红色
        clearTimeout(checkTime)
        return
      }
      if (!isFirstQuery) {
        //第一次进入
        isFirstQuery = true
        if (processStatus.value != 'error' && precent.value != 100) {
          startTimeFn()
        }
      }

      checkTime = setTimeout(() => {
        checkFn(row)
      }, 1000)
    }
  }
}

//临时代码啊
// checkFn({
//   id: 1,
//   task: [
//     {
//       taskId: 2,
//     },
//   ],
// })
//临时代码啊

watch(
  () => props.row,
  (val) => {
    if (val.task.length > 0 && !isChecked.value) {
      if (val.task[0].id) {
        //自检请求
        checkFn(val)
        //watch里面不再执行此操作
        isChecked.value = true
      }
    }
  },
  { deep: true },
)

onMounted(() => {})
onUnmounted(() => {
  clearTimeout(checkTime)
  clearTimeout(checkTimeNum_timeout)
})
</script>

<template>
  <div class="p-2.5">
    <div class="flex flex-row items-center justify-between mt-4">
      <span>
        <span class="text-[18px] text-[#ffffff] font-medium text-xl">TAKEOFF PREPARING</span>
        <span
          v-if="processStatus == 'success' && precent == 100"
          class="success_text text-xl text-[#50d890] ml-3"
          >SUCCESS</span
        >
        <span v-if="processStatus == 'error'" class="fail_text text-xl text-[#F12626] ml-3"
          >FAILED</span
        >
      </span>

      <a-spin :indicator="indicator" v-if="precent != 100 && processStatus != 'error'" />
      <span
        class="iconfont icon-baocuo text-[#F12626] text-xl"
        v-if="processStatus == 'error'"
      ></span>
      <span
        class="iconfont icon-duihao2 text-[#50d890] text-xl"
        v-if="processStatus == 'success' && precent == 100"
      ></span>
    </div>
    <a-progress
      :percent="precent"
      :status="progressStatus"
      :show-info="false"
      trailColor="#ffffff"
    />

    <div class="flex flex-row items-center justify-between text-sm">
      <span>
        <span class="text-[#ffffff] text-base">耗时:</span>
        <span class="text-[#3BA3FB] ml-2 text-base">{{ checkTimeNum }}S</span>
      </span>

      <span>
        <span class="text-[#ffffff] text-base">{{ processTitle }}</span>
        <!-- <span class="text-[#FFA800] ml-2">50s</span> -->
      </span>
    </div>

    <div
      v-if="processInfoList.length > 0"
      :class="
        processStatus == 'error'
          ? 'errorBox w-full mt-6 py-3 px-2 border border-[#F12626] rounded-bl-md rounded-br-md'
          : 'w-full mt-6 py-3 px-2 border border-[#394C73] rounded-bl-md rounded-br-md'
      "
    >
      <div
        class="w-full grid grid-cols-10 gap-0 py-2"
        v-for="(item, index) in processInfoList"
        :key="index"
      >
        <span
          class="iconfont icon-duihao2 text-[#50d890] col-span-1 text-xl"
          v-if="item.status == 'success'"
        ></span>
        <span
          class="iconfont icon-chahao text-[#F12626] col-span-1 text-xl"
          v-else-if="item.status == 'error'"
        ></span>
        <span class="iconfont icon-biaoqian text-[#ffffff] col-span-1 text-xl" v-else></span>

        <span class="text-[#FFA800] text-base col-span-2">{{ item.time }}</span>

        <span class="text-[#50d890] text-base col-span-5" v-if="item.status == 'success'">{{
          item.description
        }}</span>
        <span class="text-[#F12626] text-base col-span-5" v-else-if="item.status == 'error'">{{
          item.description
        }}</span>
        <span class="text-[#ffffff] text-base col-span-5" v-else>{{ item.description }}</span>
        <span class="text-[#ffffff] text-base col-span-2 text-right" v-if="item.diffSeconds != ''"
          >耗时{{ item.diffSeconds }}</span
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.success_text {
  font-weight: 500;
  color: #3ba3fb;
  background: linear-gradient(0deg, #5d8ad2 0%, #50d890 0%, #70da78 56.0791015625%, #a4e567 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fail_text {
  font-weight: 500;
  //color: #ffffff;
  //background: linear-gradient(0deg, #de4747 0%, #f12626 100%);
  //-webkit-background-clip: text;
  //-webkit-text-fill-color: transparent;
}
.errorBox {
  box-shadow: inset 0 0 5px 5px rgba(255, 0, 0, 0.5);
}
</style>
