<template>
  <div class="app-container">
    <div class="top">
      <div class="title">探测系统</div>

      <div class="items">
        <div
            class="item"
            :class="{ click: itemsId === 1 }"
            @click="setItemsId(1)"
        >
          <span>主界面</span>
        </div>

        <div
            class="item"
            :class="{ click: itemsId === 2 }"
            @click="setItemsId(2)"
        >
          <span>区域标定</span>
        </div>

        <div
            class="item"
            :class="{ click: itemsId === 3 }"
            @click="setItemsId(3)"
        >
          <span>软件设置</span>
        </div>

        <div
            class="item"
            :class="{ click: itemsId === 4 }"
            @click="setItemsId(4)"
        >
          <span>历史记录</span>
        </div>
      </div>
    </div>
    <div class="left">
      <Ruler
          ref="rulerRef"
          :width="areaData.width"
          :height="areaData.height"
          :boxPos="boxPos"
          :dots="dots"
          :dotIndex="dotIndex"
      />
    </div>

    <div class="right">
      <div v-if="itemsId === 1" class="tabsItem">
        <!-- 区域选择 -->
        <el-card shadow="always">
          <el-form inline :model="form1" class="demo-form-inline">
            <el-form-item>
              <el-select
                  v-model="form1.region"
                  placeholder="请选择机场名称"
                  style="width: 200px"
                  clearable
                  @change="selectUpdate"
              >
                <el-option
                    v-for="i in options1"
                    :key="i.id"
                    :label="i.name"
                    :value="i.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select
                  v-model="form1.region1"
                  placeholder="请选择区域名称"
                  style="width: 200px"
                  clearable
              >
                <el-option
                    v-for="i in options2"
                    :key="i.id"
                    :label="i.name"
                    :value="i.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="getAreaData">获取区域</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 雷达启动控制 -->
        <el-card shadow="always" style="margin-top: 12px">
          <el-button
              type="primary"
              :disabled="radarWorkState === 1"
              @click="StartWorkBtn"
          >
            启动雷达
          </el-button>
          <el-button
              type="danger"
              :disabled="radarWorkState === 0"
              @click="StopWorkBtn"
          >
            关闭雷达
          </el-button>
          <el-button type="warning" @click="RestartWorkBtn">重启雷达</el-button>
          <el-button type="info" @click="ShutDownWorkBtn">关闭雷达</el-button>
        </el-card>

        <!-- 通讯状态 -->
        <el-card shadow="always" style="margin-top: 12px">
          <div
              v-if="radarWorkState === 1"
              style="width: calc(50% - 60px); position: relative; border-radius: 5px; background-color: #01CE69; height: 44px; display: inline-block; padding: 0 20px; margin-right: 20px;"
          >
          <span
              style="position: absolute; top: 50%; transform: translateY(-50%); left: 20%; color: #fff; letter-spacing: 2px;"
          >雷达通讯状态</span
          >
            <el-icon
                size="20px"
                style="position: absolute; top: 50%; transform: translateY(-50%); right: 40px;"
            >
              <success-filled color="#fff"/>
            </el-icon>
          </div>

          <div
              v-if="radarWorkState === 0"
              style="width: calc(50% - 60px); position: relative; border-radius: 5px; background-color: #E8370D; height: 44px; display: inline-block; padding: 0 20px; margin-right: 20px;"
          >
          <span
              style="position: absolute; top: 50%; transform: translateY(-50%); left: 20%; color: #fff; letter-spacing: 2px;"
          >雷达通讯状态</span
          >
            <el-icon
                size="20px"
                style="position: absolute; top: 50%; transform: translateY(-50%); right: 40px;"
            >
              <warning-filled color="#fff"/>
            </el-icon>
          </div>

          <div
              v-if="true"
              style="width: calc(50% - 60px); position: relative; border-radius: 5px; background-color: #01CE69; height: 44px; display: inline-block; padding: 0 20px; margin-right: 20px;"
          >
          <span
              style="position: absolute; top: 50%; transform: translateY(-50%); left: 20%; color: #fff; letter-spacing: 2px;"
          >雷达扫描状态</span
          >
            <el-icon
                size="20px"
                style="position: absolute; top: 50%; transform: translateY(-50%); right: 40px;"
            >
              <success-filled color="#fff"/>
            </el-icon>
          </div>

          <div
              v-if="false"
              style="width: calc(50% - 60px); position: relative; border-radius: 5px; background-color: #E8370D; height: 44px; display: inline-block; padding: 0 20px; margin-right: 20px;"
          >
          <span
              style="position: absolute; top: 50%; transform: translateY(-50%); left: 20%; color: #fff; letter-spacing: 2px;"
          >雷达扫描状态</span
          >
            <el-icon
                size="20px"
                style="position: absolute; top: 50%; transform: translateY(-50%); right: 40px;"
            >
              <warning-filled color="#fff"/>
            </el-icon>
          </div>

        </el-card>

        <!-- 目标表格1 -->
        <el-card shadow="always" style="margin-top: 12px;position:relative;">
          <div style="position: absolute;right: 30px;top: 20px;z-index: 100;">
            <el-popover placement="bottom" :width="300" trigger="click">
              <template #reference>
                <el-button style="margin-right: 16px">批量处理</el-button>
              </template>
              <el-button style="margin-right: 16px" @click="batchDisposal">处置</el-button>
              <el-button style="margin-right: 16px" @click="batchDel">删除</el-button>
              <el-button style="margin-right: 16px" @click="batchShild">固定物</el-button>
            </el-popover>
          </div>
          <el-table
              ref="table1Ref"
              highlight-current-row
              :data="tableData1.slice((currentPage1 - 1) * pageSize1, currentPage1 * pageSize1)"
              style="width: 100%"
              @row-click="table1Current"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column prop="Lon" label="目标经度" width="100"/>
            <el-table-column prop="Lat" label="目标纬度" width="100"/>
            <el-table-column prop="Strength" label="强度信息" width="100"/>
            <el-table-column label="处理方式" show-overflow-tooltip width="200" fixed="right">
              <template #default="scope">
                <el-button type="primary" @click.stop="openHandleObstacleDialog(scope)" link>处置</el-button>
                <el-popconfirm
                    class="box-item"
                    title="确定删除这个点位吗？"
                    placement="top"
                    @confirm="delPoint(scope)"
                >
                  <template #reference>
                    <el-button type="primary" @click.stop link>删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button type="primary" @click.stop="openShildDialog(scope)" link>固定物</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:current-page="currentPage1"
              v-model:page-size="pageSize1"
              :pager-count="4"
              :page-sizes="[10,20,50,100, 200, 300, 400]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData1.length"
          />
        </el-card>

        <!-- 目标表格2 -->
        <el-card shadow="always" style="margin-top: 12px">
          <el-table
              highlight-current-row
              :data="tableData2"
              style="width: 100%"
          >
            <!--            <el-table-column type="selection" width="55"/>-->
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column prop="name" label="名称" width="100"/>
            <el-table-column prop="lon" label="目标经度" width="100"/>
            <el-table-column prop="lat" label="目标纬度" width="100"/>
            <el-table-column prop="strength" label="强度信息" width="100"/>
            <el-table-column label="处理方式" show-overflow-tooltip width="160" fixed="right">
              <template #default="scope">
                <el-button type="primary" link @click.stop="openShildDialog1(scope)">修改</el-button>
                <el-popconfirm
                    class="box-item"
                    title="确定删除这个点位吗？"
                    placement="top"
                    @confirm="delShildItem(scope)"
                >
                  <template #reference>
                    <el-button type="primary" @click.stop link>删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:current-page="currentPage2"
              v-model:page-size="pageSize2"
              :pager-count="4"
              :page-sizes="[10,20,50,100, 200, 300, 400]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
              @change="getShildTableList"
          />
        </el-card>
      </div>
      <div v-if="itemsId === 2" class="tabsItem">
        <el-card shadow="always">
          <el-form inline :model="form5" class="demo-form-inline">
            <el-form-item>
              <el-input
                  v-model="form5.region"
                  placeholder="请输入机场名称"
                  style="width: 200px"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                  v-model="form5.region1"
                  placeholder="请输入区域名称"
                  style="width: 200px"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </el-form>

          <el-form
              inline
              :model="form6"
              class="demo-form-inline"
              style="margin-top: 12px"
          >
            <el-form-item>
              <el-select
                  v-model="form6.region"
                  placeholder="请选择机场名称"
                  style="width: 200px"
                  clearable
                  @change="select2Update"
              >
                <el-option
                    v-for="i in options1"
                    :key="i.id"
                    :label="i.name"
                    :value="i.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select
                  v-model="form6.region1"
                  placeholder="请选择区域名称"
                  style="width: 200px"
                  clearable
                  @change="select3Update"
              >
                <el-option
                    v-for="i in options2"
                    :key="i.id"
                    :label="i.name"
                    :value="i.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="getArea2">确定</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="always" style="margin-top: 12px">
          <div
              v-for="(i, k) in regionLabeling"
              :key="k"
              style="margin-bottom: 12px"
          >
            <el-input
                disabled
                v-model="i.name"
                placeholder="点位名称"
                style="width: 100px"
            />
            <el-input
                v-model="i.lon"
                placeholder="经度"
                style="width: 150px; margin-left: 20px"
            />
            <el-input
                v-model="i.lat"
                placeholder="纬度"
                style="width: 150px; margin-left: 20px"
            />
            <el-button
                type="primary"
                @click="getPoint(k)"
                style="margin-left: 20px"
            >
              获取
            </el-button>
            <el-button
                type="danger"
                @click="DeleteCData({ id: parseFloat(i.id) }).then(() => getArea2())"
                style="margin-left: 20px"
            >
              删除
            </el-button>
          </div>

          <el-button
              type="primary"
              style="text-align: center"
              @click="                     InsertCListData([{
                      name: `点位${regionLabeling.length + 1}`,
                      lon: '1',
                      lat: '1',
                      fodAreaId: form6.region1,
                      fodAirId: form6.region
                    }]).then(() => {
                      getArea2()
                    }) "
          >
            添加
          </el-button>
        </el-card>

        <div style="text-align: center; margin-top: 12px">
          <el-button
              type="primary"
              style="margin-left: 20px"
              @click="saveAreaPoint"
          >
            提交
          </el-button>
        </div>
      </div>
      <div v-if="itemsId === 3" class="tabsItem">
        <!-- 成像设置 -->
        <div>成像设置</div>
        <el-form :model="parasSignalproForm" inline label-width="auto" label-position="top">
          <el-form-item
              v-for='(key, idx) in ["imaging_rangemin", "imaging_rangemax", "imaging_rangeres", "imaging_azimuthlength", "imaging_azimuthres"]'
              :key="idx"
              :label="key"
              style="width: calc(33% - 32px)"
          >
            <el-input
                v-model="parasSignalproForm.imaging[key]"
            />
          </el-form-item>
        </el-form>

        <!-- 检测设置 -->
        <div>检测设置</div>
        <el-form :model="parasSignalproForm" inline label-width="auto" label-position="top">
          <el-form-item
              v-for='(key, idx) in ["alpha", "decstartr", "decwidth", "sk_r", "sk_a", "lk_r", "lk_a"]'
              :key="idx"
              :label="key"
              style="width: calc(33% - 32px)"
          >
            <el-input
                v-model="parasSignalproForm.dectection[key]"
            />
          </el-form-item>

          <el-form-item style="width: 100%">
            <div style="text-align: center; width: 100%">
              <el-button type="primary" @click="saveParasSignalproForm">保存</el-button>
            </div>
          </el-form-item>
        </el-form>

        <!-- 路线设置 -->
        <div>路线设置</div>
        <el-form :model="parasPosForm" inline label-width="auto" label-position="top">
          <el-form-item style="width: calc(33% - 32px)" label="路线数量">
            <el-input-number
                v-model="parasPosForm.runwaynum.startpos_num"
                :precision="0"
                :step="1"
                :min="0"
                @change="updateRunwayNum"
            />
          </el-form-item>

          <div
              v-for="(item, k) in parasPosForm.runwaynum.startpos_num ? Array(parasPosForm.runwaynum.startpos_num) : []"
              :key="k"
              style="width: 100%"
          >
            <div>路线{{ k + 1 }}设置</div>
            <el-form-item
                v-for='(field, idx) in ["startpos_lon_a", "startpos_lat_a", "startpos_alt_a", "startpos_lon_b", "startpos_lat_b", "startpos_alt_b", "startpos_ori"]'
                :key="idx"
                :label="field"
                style="width: calc(33% - 32px); display: inline-block"
            >
              <el-input
                  v-model="parasPosForm.runwayedges[k][field]"
              />
            </el-form-item>
          </div>

          <el-form-item style="width: 100%">
            <div style="text-align: center; width: 100%">
              <el-button type="primary" @click="saveParasPosForm">保存</el-button>
            </div>
          </el-form-item>
        </el-form>

        <!--屏蔽信息设置-->
        <div>屏蔽信息设置</div>
        <el-form :model="shieldInfoForm" inline label-width="auto" label-position="top">
          <el-form-item style="width: calc(33% - 32px)" label="偏差值">
            <el-input v-model="shieldInfoForm.deviation"/>
          </el-form-item>
          <el-form-item style="width: calc(33% - 32px)" label="范围">
            <el-input v-model="shieldInfoForm.shielding"/>
          </el-form-item>


          <el-form-item style="width: 100%">
            <div style="text-align: center; width: 100%">
              <el-button type="primary" @click="saveShieldInfoForm">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="itemsId === 4" class="tabsItem">
        <!-- 时间范围选择 -->
        <el-card shadow="always">
          <el-date-picker
              v-model="date1"
              type="datetimerange"
              range-separator="到"
              start-placeholder="选择开始时间"
              end-placeholder="选择结束时间"
              style="width: calc(100% - 20px)"
          />
        </el-card>

        <!-- 区域选择 -->
        <el-card shadow="always" style="margin-top: 12px">
          <el-form inline :model="form3" class="demo-form-inline">
            <el-form-item v-for="(key, idx) in regionKeys" :key="idx">
              <el-select
                  v-model="form3[key]"
                  :placeholder="key === 'region2' ? '请选择固定目标' : key === 'region' ? '请选择机场' : '请选择区域'"
                  style="width: 170px"
                  clearable
              >
                <el-option
                    v-for="option in getOptions(key)"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 检测输入 -->
        <el-card shadow="always" style="margin-top: 12px">
          <el-form inline :model="form4" class="demo-form-inline">
            <el-form-item>
              <el-input
                  v-model="form4.input1"
                  placeholder="请输入检测序号"
                  style="width: 170px"
              />
            </el-form-item>

            <el-form-item>
              <el-date-picker
                  v-model="form4.date1"
                  type="date"
                  placeholder="选择检测时间"
                  clearable
                  style="width: 170px"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                  v-model="form4.input2"
                  placeholder="请输入检测人员"
                  style="width: 170px"
              />
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 数据表格 -->
        <el-card shadow="always" style="margin-top: 12px">
          <el-table :data="tableData2" style="width: 100%">
            <el-table-column label="序号" type="index" width="60"/>
            <el-table-column prop="coordinate" label="目标坐标" width="120"/>
            <el-table-column label="告警等级" width="160">
              <template #default="scope">
                <el-rate :model-value="scope.row.rate" disabled/>
              </template>
            </el-table-column>
            <el-table-column label="处理状态" show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.type === 1">已处理</span>
                <span v-else-if="scope.row.type === 2">不处理</span>
                <span v-else-if="scope.row.type === 3">未发现</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>

    <el-button style="position: fixed;top: 10px;right: 10px" type="primary" @click="toAdmin">管理</el-button>

    <el-dialog v-model="dialog1" title="处置障碍物" width="500">
      <el-form :model="dialog1Form">
        <el-form-item label="发现时间" label-width="120px">
          <el-input v-model="dialog1Form.time" disabled autocomplete="off"/>
        </el-form-item>
        <el-form-item label="处理信息描述" label-width="120px">
          <el-input
              v-model="dialog1Form.text"
              style="width: 100%"
              :rows="2"
              type="textarea"
          />
        </el-form-item>
        <el-form-item label="处理照片" label-width="120px">
          <el-upload @click.stop="onSubmit"
                     ref="uploadRef"
                     :http-request="uploadFiles"
                     :file-list="dialog1Form.fileList.concat({type:'camera'})"
                     list-type="picture-card">

            <template #trigger>
              <el-icon>
                <Plus/>
              </el-icon>
            </template>

            <template #file="{ file }">
              <div v-if="file.type !=='camera'">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in/></el-icon>
                  </span>
                  <span
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                  >
                    <el-icon><Download/></el-icon>
                  </span>
                  <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                  >
                    <el-icon><Delete/></el-icon>
                  </span>
                </span>
              </div>
              <div @click="openCamera" v-if="file.type ==='camera'" style="border:none" class="el-upload--picture-card">
                <el-icon>
                  <Camera/>
                </el-icon>
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog1 = false">关闭</el-button>
          <el-button type="primary" @click="handleObstacle">
            处理
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="imgDialog">
      <img width="100%" :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>

    <el-dialog v-model="shildDialog">
      <el-form :model="shildForm">
        <el-form-item label="固定物名称" label-width="120px">
          <el-input v-model="shildForm.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="偏差值" label-width="120px">
          <el-input v-model="shildForm.deviation" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="屏蔽范围" label-width="120px">
          <el-input v-model="shildForm.shielding" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="shildDialog = false">关闭</el-button>
          <el-button type="primary" @click="addShildItem">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <input
        ref="cameraInput"
        type="file"
        accept="image/*"
        capture="camera"
        style="display: none"
        @change="handleCameraChange"
    />
  </div>
</template>
<script setup lang="jsx">
import Ruler from "@/components/ruler.vue";
import {onMounted, ref, watch} from "vue";
import {
  addShildData,
  DeleteCData,
  delShildData,
  getAllAirPort,
  GetAllCData,
  getArea,
  getParasPos,
  getParasSignalpro, GetSetting,
  getShildList,
  InserDealObstacleModel,
  InsertCListData, PosSetting,
  RestartWork,
  setParasPos,
  setParasSignalpro,
  ShutDownWork,
  StartWork,
  StopWork,
  UpdateCData,
  UpdateFodScopeData,
  UpdateImage,
  updateShildData
} from "@/api/api";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";


const router = useRouter();

const rulerRef = ref()

const getSocket = () => {

  //   const socket = new WebSocket("ws://192.168.1.123:7789/ws");
  const socket = new WebSocket("ws://192.168.1.123:7789/ws");

  // 2. 连接成功时触发
  socket.addEventListener("open", () => {
    console.log("✅ WebSocket 连接成功");
  });

  // 3. 接收消息
  socket.addEventListener("message", (event) => {
    processData(JSON.parse(event.data))
  });

  // 4. 连接关闭时触发
  socket.addEventListener("close", () => {
    console.log("❌ WebSocket 已关闭");
  });

  // 5. 出错时触发
  socket.addEventListener("error", (error) => {
    console.error("⚠️ WebSocket 出错:", error);
  });
}

const processData = (data) => {
  if (data.FodName === '雷达信息') {
    radarWorkState.value = data.radar_work_state
  }
  if (data.FodName === '图像数据') {
  }
  if (data.FodName === 'fod信息') {
    console.log('障碍物信息', data)
    setDot(data)
  }
  if (data.ty === 3) {
  }
  if (data.FodName === '车辆信息') {
    currentPosition.value = {
      lon: data.Longitude,
      lat: data.Latitude,
    }
    const rectInfo = calcRectangleFromPoints(areaPoints.value);
    const point = {
      lon: data.Longitude,
      lat: data.Latitude,
      rotate: data.HeadingAngle
    };
    const local = correctDeviation(getLocalPositionRelativeToP4(point, areaPoints.value, rectInfo))


    boxPos.value = local

  }
};

// 默认方法
const onSubmit = (e) => {
  console.log(e)
}

// 当前菜单id
const itemsId = ref(1)
// 菜单id跳转
const setItemsId = (e) => {
  itemsId.value = e
}
// 雷达状态
const radarWorkState = ref(0)
// 车辆位置
const boxPos = ref({x: 100, y: 150, rotate: 0})
// 左侧区域宽高
const areaData = ref({
  width: 500,
  height: 1000,
  angle: 0
})
// 障碍物点位
const dots = ref([])
// 当前的目标障碍物
const dotIndex = ref(-1)
// 跳转到管理界面
const toAdmin = () => {
  router.push('/serve')
}
// 检测&成像设置
const parasSignalproForm = ref({
  imaging: {},
  dectection: {}
})
// 路线设置
const parasPosForm = ref({
  runwaynum: {
    startpos_num: 1
  },
  runwayedges: [
    {
      startpos_lon_a: '',
      startpos_lat_a: '',
      startpos_alt_a: '',
      startpos_lon_b: '',
      startpos_lat_b: '',
      startpos_alt_b: '',
      startpos_ori: ''
    }
  ]
})
// 屏蔽信息设置
const shieldInfoForm = ref({
  deviation: '',
  shielding: '',
})
// 获取配置文件
const getOption = () => {
  getParasPos().then((e) => {
    parasPosForm.value = {
      runwaynum: e.runwaynum,
      runwayedges: e.runwayedges,
    }
  })
  getParasSignalpro().then((e) => {
    parasSignalproForm.value = {
      imaging: e.imaging,
      dectection: e.dectection,
    }
  })
  GetSetting().then((e) => {
    shieldInfoForm.value = {
      deviation: e.deviation,
      shielding: e.shielding,
    }
  })
}

// 保存成像&检测设置
const saveParasSignalproForm = () => {
  setParasSignalpro(parasSignalproForm.value).then(e => {
  })
}
// 保存路线设置
const saveParasPosForm = () => {
  setParasPos(parasPosForm.value).then(e => {
  })
}
// 保存屏蔽信息
const saveShieldInfoForm = () => {
  PosSetting(shieldInfoForm.value).then((e) => {
  })
}
// 更新路线数量
const updateRunwayNum = (e) => {
  let arr = new Array(e).fill(0)
      .map((item, index) => {
        if (index <= parasPosForm.value.runwayedges.length - 1) {
          return JSON.parse(JSON.stringify(parasPosForm.value.runwayedges[index]))
        } else {
          return {
            startpos_lon_a: '',
            startpos_lat_a: '',
            startpos_alt_a: '',
            startpos_lon_b: '',
            startpos_lat_b: '',
            startpos_alt_b: '',
            startpos_ori: ''
          }
        }
      })
  parasPosForm.value.runwayedges = JSON.parse(JSON.stringify(arr))
}

// 启动雷达
const StartWorkBtn = () => {
  StartWork()
  // rulerRef.value.setDot([], true)
  setDot([], true)
  tableData1.value = []
}
// 停止雷达
const StopWorkBtn = () => {
  StopWork()
}
// 重启雷达
const RestartWorkBtn = () => {
  RestartWork()
}
// 关闭雷达
const ShutDownWorkBtn = () => {
  ShutDownWork()
}

const form1 = ref({})
const form2 = ref({})
const form3 = ref({})
const form4 = ref({})
const form5 = ref({})
const form6 = ref({})

// 固定物
// 固定物列表
const tableData2 = ref([])
// 当前页
const currentPage2 = ref(1)
// 每页数量
const pageSize2 = ref(10)
const total2 = ref(0)
const shildDialog = ref(false)
const shildForm = ref({})
// 打开固定物模态框
const openShildDialog = (e) => {
  shildDialog.value = true
  shildForm.value = {
    $index: e.row.$index,
    lon: e.row.Lon,
    lat: e.row.Lat,
    strength: e.row.Strength,
    name: Math.random().toString().split('.')[1],
    deviation: shieldInfoForm.value.deviation,
    shielding: shieldInfoForm.value.shielding,
  }
}
const openShildDialog1 = (e) => {
  shildDialog.value = true
  shildForm.value = e.row
}
// 设置固定物
const addShildItem = () => {
  if (shildForm.value.id) {
    updateShildData(shildForm.value).then(e => {
      shildDialog.value = false
      shildForm.value = {}
      getShildTableList()
    })
  } else {
    tableData1.value.splice((currentPage1.value - 1) * pageSize1.value + shildForm.value.$index, 1);
    addShildData(shildForm.value).then(e => {
      shildDialog.value = false
      shildForm.value = {}
      getShildTableList()
    })
  }
}
// 删除固定物
const delShildItem = (e) => {
  delShildData(e.row).then(e => {
    getShildTableList()
  })
}
// 获取固定物列表
const getShildTableList = () => {
  getShildList({
    pageIndex: currentPage2.value,
    pageSize: pageSize2.value,
  }).then((e) => {
    tableData2.value = e.data
    total2.value = e.totalCount

  })
}

// 障碍物列表
const tableData1 = ref([{Lon:1},{Lon:2}])
// 上传图片
const uploadRef = ref(null)
const uploadFiles = async (e) => {
  const res = await UpdateImage({files: [e.file]})
}
// 图片放大
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  imgDialog.value = true
}
// 图片下载
const handleDownload = (file) => {
  console.log(file)
}
// 图片删除
const handleRemove = (file) => {
  console.log(file)
  dialog1Form.value.fileList = dialog1Form.value.fileList.filter(e => e.url !== file.url)
}
// 拍照
const cameraInput = ref(null)
const openCamera = () => {
  cameraInput.value?.click()
}
const handleCameraChange = (e) => {
  const file = e.target.files[0]
  if (!file) return
  const url = URL.createObjectURL(file)
  UpdateImage({files: [file]})
  dialog1Form.fileList.value.push({
    name: file.name,
    url,
    raw: file
  })
  // 重置 input
  e.target.value = ''
}
// 处置模态框
const dialog1 = ref(false)
const dialog1Form = ref({})
const dialogImageUrl = ref('')
const imgDialog = ref(false)
// 删除
const delPoint = (e) => {
  // tableData1.value.splice((currentPage1.value - 1) * pageSize1.value + e.$index, 1);
  let arr = JSON.parse(JSON.stringify(tableData1.value))
  arr.splice((currentPage1.value - 1) * pageSize1.value + e.$index, 1);
  tableData1.value = arr ||[]
  if((currentPage1.value - 1) * pageSize1.value + e.$index === dotIndex.value ){
    console.log(123)
    dotIndex.value = -1
  }
}
// 当前页
const currentPage1 = ref(1)
// 每页数量
const pageSize1 = ref(10)

// 打开处置模态框
const openHandleObstacleDialog = (e) => {
  console.log(e.row)
  dialog1.value = true
  dialog1Form.value = {
    index: e.$index,
    time: e.row.time,
    longitude: e.row.Lon,
    latitude: e.row.Lat,
    strength: e.row.Strength,
    fileList: [{url: 'https://dummyimage.com/640x360'}, {url: 'https://placehold.co/600x400/png'}]
  }
}
// 确定处理
const handleObstacle = () => {
  InserDealObstacleModel({
    longitude: dialog1Form.value.longitude,
    latitude: dialog1Form.value.latitude,
    strength: dialog1Form.value.strength,
    files: dialog1Form.value.fileList.map(e => e.url),
    findTime: dialog1Form.value.time,
  }).then(e => {
    dialog1.value = false
    tableData1.value.splice((currentPage1.value - 1) * pageSize1.value + dialog1Form.value.index, 1);
  })
}

// 批量处理
const table1Ref = ref()
const batchDisposal = () => {
  let datas = table1Ref.value.getSelectionRows()
  datas.forEach((row) => {
    InserDealObstacleModel({
      longitude: row.Lon,
      latitude: row.Lat,
      strength: row.Strength,
      files: [],
      findTime: '',
    })
    tableData1.value = tableData1.value.filter(item => row.index !== item.index);
  })
  getShildTableList()
}
// 批量删除
const batchDel = () => {
  let datas = table1Ref.value.getSelectionRows()
  datas.forEach((row) => {
    tableData1.value = tableData1.value.filter(item => row.index !== item.index);
  })
}
// 批量固定
const batchShild = () => {
  let datas = table1Ref.value.getSelectionRows()
  datas.forEach((row) => {
    addShildData({
      lon: row.Lon,
      lat: row.Lat,
      strength: row.Strength,
      name: Math.random().toString().split('.')[1],
      deviation: shieldInfoForm.value.deviation,
      shielding: shieldInfoForm.value.shielding,
    })
    tableData1.value = tableData1.value.filter(item => row.index !== item.index);
  })
  getShildTableList()
}

const date1 = ref([])
const currentPosition = ref({})
const DEG_TO_RAD = Math.PI / 180;

function lonLatToXY(lon, lat, lat0) {
  const R = 111320; // 每度约等于 111.32 km
  const cosLat = Math.cos(lat0 * DEG_TO_RAD);
  return {x: lon * R * cosLat, y: lat * R};
}

function calcRectangleFromPoints(points) {
  if (!points || points.length !== 4) throw new Error("必须传入4个点");
  const p1raw = points.find(p => p.name === "点位1") || points[0];
  const p2raw = points.find(p => p.name === "点位2") || points[1];
  const p3raw = points.find(p => p.name === "点位3") || points[2];
  const p4raw = points.find(p => p.name === "点位4") || points[3];

  const lat0 = (points.reduce((s, p) => s + p.lat, 0) / points.length);
  const p1 = lonLatToXY(p1raw.lon, p1raw.lat, lat0);
  const p2 = lonLatToXY(p2raw.lon, p2raw.lat, lat0);
  const p3 = lonLatToXY(p3raw.lon, p3raw.lat, lat0);
  const p4 = lonLatToXY(p4raw.lon, p4raw.lat, lat0);

  const dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);

  const top = dist(p2, p3);
  const bottom = dist(p4, p1);
  const left = dist(p4, p3);
  const right = dist(p1, p2);

  const trapezoid = Math.abs(top - bottom) / Math.max(top, bottom) > 0.05;
  const width = trapezoid ? (top + bottom) / 2 : bottom;
  const height = trapezoid ? (left + right) / 2 : right;

  const bottomAngleRad = Math.atan2(p1.y - p4.y, p1.x - p4.x);
  const angleDeg = bottomAngleRad * 180 / Math.PI;
  return {
    width: Number(width.toFixed(2)),
    height: Number(height.toFixed(2)),
    angle: Number(angleDeg.toFixed(6))
  };
}

function getLocalPositionRelativeToP4(point, rectPoints, rectInfo) {
  if (!rectInfo || typeof rectInfo.angle !== 'number') {
    throw new Error("rectInfo.angle 必须是由 calcRectangleFromPoints 得到的角度");
  }

  const lat0 = rectPoints.reduce((a, b) => a + b.lat, 0) / rectPoints.length;
  const p4raw = rectPoints.find(p => p.name === "点位4") || rectPoints[3];

  const p4 = lonLatToXY(p4raw.lon, p4raw.lat, lat0);
  const p = lonLatToXY(point.lon, point.lat, lat0);

  const dx = p.x - p4.x;
  const dy = p.y - p4.y;

  const rad = -rectInfo.angle * DEG_TO_RAD;
  const x_local = dx * Math.cos(rad) - dy * Math.sin(rad);
  const y_local = dx * Math.sin(rad) + dy * Math.cos(rad);

  const rotate_local = ((point.rotate ?? 0) + rectInfo.angle + 360) % 360;

  return {
    x: Number(x_local.toFixed(2)),
    y: Number(y_local.toFixed(2)),
    rotate: Number(rotate_local.toFixed(2))
  };
}

// 偏差值
const deviationValue = ref({})
// 设置偏差值
const getDeviationValue = (e) => {
  if (!e) return
  const rectInfo = calcRectangleFromPoints(areaPoints.value);
  const local = getLocalPositionRelativeToP4(e, areaPoints.value, rectInfo);
  deviationValue.value = local;
}
// 修正偏差
const correctDeviation = (e) => {
  let numH = deviationValue.value.y
  let numW = deviationValue.value.x
  let Ratio = e.y / numH
  return {
    ...e,
    x: e.x - numW * Ratio
  }
}
const getPoint = (k) => {
  regionLabeling.value[k].lon = currentPosition.value.lon || 0
  regionLabeling.value[k].lat = currentPosition.value.lat || 0
}
const setDot = (e, re) => {
  let fodInfo = e.DarDatas.filter(v => v.Lon !== 0 && v.Lat !== 0)
  tableData1.value = [...tableData1.value, ...fodInfo.map((v, k) => {
    return {...v, index: tableData1.value.length + k}
  })]
}
const table1Current = (e, v) => {
  if (dotIndex.value === e.index) {
    dotIndex.value = -1
  } else {
    dotIndex.value = e.index || 0
  }
}


const options1 = ref([])
const options2 = ref([])
const getTableData = async () => {
  await getAllAirPort().then(e => {
    options1.value = e.data
  })
}
const selectUpdate = (val) => {
  form1.value.region = val
  getArea({airId: val}).then(e => {
    options2.value = e.data
  })
}
const select2Update = (val) => {
  form6.value.region = val
  getArea({airId: val}).then(e => {
    options2.value = e.data
  })
}
const select3Update = (val) => {
  form6.value.region1 = val
}

// 区域标定页面获取区域信息
const getArea2 = () => {
  GetAllCData({areaId: form6.value.region1}).then((res) => {
    regionLabeling.value = res.data
  })
}
// 区域标定信息
const regionLabeling = ref([])
// 区域点位信息
const areaPoints = ref([])
// 保存区域信息
const saveAreaPoint = () => {
  let arr = []
  regionLabeling.value.forEach((v, k) => {
    arr.push(UpdateCData(v))
  })
  Promise.all(arr).then(() => {
    areaPoints.value = JSON.parse(JSON.stringify(regionLabeling.value))
    ElMessage.success('保存成功')
    let data = calcRectangleFromPoints(areaPoints.value)
    areaData.value = data
    getDeviationValue(areaPoints.value.find(e => e.name === '点位3'))

  }).catch((err) => {
    ElMessage.error(err)
  })
}

// 主界面获取区域信息
const getAreaData = () => {
  GetAllCData({areaId: form1.value.region1}).then((res) => {
    areaPoints.value = res.data
    let data = calcRectangleFromPoints(res.data)
    areaData.value = data
    getDeviationValue(res.data.find(e => e.name === '点位3'))

    const sorted = res.data.sort((a, b) => {
      const numA = parseInt(a.name.replace(/[^\d]/g, ''), 10);
      const numB = parseInt(b.name.replace(/[^\d]/g, ''), 10);
      return numA - numB;
    });
    const letters = ['a', 'b', 'c', 'd'];
    const result = {};
    sorted.forEach((item, index) => {
      const key = letters[index];
      result[`${key}Lon`] = item.lon;
      result[`${key}Lat`] = item.lat;
    });
    UpdateFodScopeData(result)
  })
}


const testFun = () => {

  areaPoints.value = [
    {
      name: '点位1',
      lon: 120.263824,
      lat: 36.985199,
    },
    {
      name: '点位2',
      lon: 120.271545,
      lat: 36.9816399,
    },
    {
      name: '点位3',
      lon: 120.271736,
      lat: 36.9818535,
    },
    {
      name: '点位4',
      lon: 120.264008,
      lat: 36.985424,
    },
  ]
  let data = calcRectangleFromPoints(areaPoints.value)
  areaData.value = data
  getDeviationValue(areaPoints.value.find(e => e.name === '点位3'))
  let data1 = {
    lon: 120.2716405,
    lat: 36.9817467,
    rotate: 303
  }
  const getLocal = () => {
    const rectInfo = calcRectangleFromPoints(areaPoints.value);

    const local = correctDeviation(getLocalPositionRelativeToP4(data1, areaPoints.value, rectInfo))
    boxPos.value = local
  }
  getLocal()
  let fx = 1
  setInterval(() => {
    data1.lon += fx * -0.0077245 * 0.01 / 60
    data1.lat += fx * 0.0035648 * 0.01 / 60
    getLocal()
  }, 1000 / 60)
  setInterval(() => {
    fx *= -1
  }, 1000 * 80)
}
const getDotsData = () => {
  dots.value = [...tableData1.value.map((v, k) => {
    const rectInfo = calcRectangleFromPoints(areaPoints.value);
    const point = {
      lon: v.Lon,
      lat: v.Lat,
      rotate: 0,
    };
    return {
      ...correctDeviation(getLocalPositionRelativeToP4(point, areaPoints.value, rectInfo)),
      type: v.Status
    }
  }).filter(v => v)]
}
watch(() => [tableData1.value, areaPoints.value], (oldVal, newVal) => {
  getDotsData()
}, {deep: true})
onMounted(() => {
  getTableData()
  getSocket()
  getOption()
  getShildTableList()
  testFun()
  getDotsData()
})


</script>
<style>
.app-container {
  width: 1080px;
  min-width: 1080px;
  height: 100vh;
  margin: 0 auto;
}

.top {
  width: 100%;
  height: 80px;
  font-size: 24px;
  background-color: #202227;
  position: relative;
}

.items {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 120px;
  height: 100%;
  color: #8C9A9C;
  line-height: 56px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
}

.item span {
  display: inline-block;
  height: 100%;
}

.item.click span,
.item:hover span {
  color: #0D52BF;
  border-bottom: 2px solid #0D52BF;
}

.title {
  line-height: 80px;
  color: #fff;
  margin-left: 20px;
  display: inline-block;
  text-align: left;
}

.left {
  display: inline-block;
  height: calc(100vh - 80px);
  width: 34%;
  vertical-align: top;
}

.right {
  padding: 20px 20px 0 20px;
  display: inline-block;
  height: calc(100vh - 80px - 20px);
  width: calc(66% - 40px);
  background-color: #F6F7FB;
  overflow: auto;
}
</style>