<template>
  <div class="annotationInfo">
    <!-- 关闭按钮 -->
    <div class="closeButton">
      <CloseOutlined @click="closePathAnnotationInfo" style="font-size: 20px; color: white" />
    </div>

    <div class="annotationInfo_biaozhu_1">
      <a-row>
        <a-col :span="24">
          <div class="annotationTitle">标注信息</div>
        </a-col>
        <!-- 标题名：点、线、形、圈 -->
        <a-col :span="24">
          <div class="annotationTitle">
            <div class="annotationTitleButton_right">
              <AntDesignOutlined
                v-if="nowAnnotationData.type == 0"
                :style="{ color: nowAnnotationData.properties.color }"
              />
              <ExpandAltOutlined
                v-if="nowAnnotationData.type == 1"
                :style="{ color: nowAnnotationData.properties.color }"
              />
              <BorderOutlined
                v-if="nowAnnotationData.type == 2"
                :style="{ color: nowAnnotationData.properties.color }"
              />
              <LogoutOutlined
                v-if="nowAnnotationData.type == 3"
                :style="{ color: nowAnnotationData.properties.color }"
              />
            </div>
            <a-input
              v-model:value="nowAnnotationData.name"
              style="width: 60%"
              size="small"
            ></a-input>
            <div class="annotationTitleButton" @click="handlerLocation">
              <AimOutlined />
            </div>
            <div class="annotationTitleButton" @click="deleteAnnotation">
              <DeleteOutlined />
            </div>
          </div>
        </a-col>
        <!-- 颜色：点、线、形、圈 -->
        <a-col :span="6">
          <div class="annotationTitle">颜色</div>
        </a-col>
        <a-col :span="18">
          <div class="annotationContent">
            <div
              class="popoverClass"
              v-for="color in ['#2D8CF0', '#19BE6B', '#FF9900', '#E23C39', '#B620E0']"
              :key="color"
              :style="{ background: color }"
              @click="nowAnnotationData.properties.color = color"
            >
              <CheckOutlined
                v-if="nowAnnotationData.properties.color == color"
                style="color: white"
              />
            </div>
          </div>
        </a-col>
        <!-- 形态：线 -->
        <a-col :span="6" v-if="nowAnnotationData.type == 1">
          <div class="annotationTitle">形态</div>
        </a-col>
        <a-col :span="18" v-if="nowAnnotationData.type == 1">
          <div class="annotationContent" style="gap: 5%">
            <a-tooltip placement="top">
              <template #title> 线宽度 </template>
              <a-input
                v-model:value="nowAnnotationData.properties.line_width"
                style="width: 30%"
                @change="
                  nowAnnotationData.properties.line_width = parseFloat(
                    nowAnnotationData.properties.line_width.toString().replace(/[^-0-9]/g, ''),
                  )
                "
              >
                <template #prefix><AlignLeftOutlined /></template>
              </a-input>
            </a-tooltip>
            <a-tooltip placement="top">
              <template #title> 线头部样式 </template>
              <a-select
                v-model:value="nowAnnotationData.properties.line_start_cap"
                style="width: 30%"
                option-label-prop="children"
              >
                <a-select-option :value="0">
                  <div class="svg-container" v-html="line_start_cap_0"></div>
                </a-select-option>
                <a-select-option :value="1">
                  <div class="svg-container" v-html="line_start_cap_1"></div>
                </a-select-option>
                <a-select-option :value="2">
                  <div class="svg-container" v-html="line_start_cap_2"></div>
                </a-select-option>
                <a-select-option :value="3">
                  <div class="svg-container" v-html="line_start_cap_3"></div>
                </a-select-option>
              </a-select>
            </a-tooltip>
            <a-tooltip placement="top">
              <template #title> 线尾部样式 </template>
              <a-select
                v-model:value="nowAnnotationData.properties.line_end_cap"
                style="width: 30%"
                option-label-prop="children"
              >
                <a-select-option :value="0">
                  <div class="svg-container" v-html="line_end_cap_0"></div>
                </a-select-option>
                <a-select-option :value="1">
                  <div class="svg-container" v-html="line_end_cap_1"></div>
                </a-select-option>
                <a-select-option :value="2">
                  <div class="svg-container" v-html="line_end_cap_2"></div>
                </a-select-option>
                <a-select-option :value="3">
                  <div class="svg-container" v-html="line_end_cap_3"></div>
                </a-select-option>
              </a-select>
            </a-tooltip>
          </div>
        </a-col>
        <!-- 图标：点 -->
        <a-col :span="6" v-if="nowAnnotationData.type == 0">
          <div class="annotationTitle">图标</div>
        </a-col>
        <a-col :span="18" v-if="nowAnnotationData.type == 0">
          <div class="annotationContent">
            <div
              class="annotationContentButton"
              :style="
                nowAnnotationData.properties.iconname == iconname
                  ? 'outline: 2px solid #5cadff'
                  : ''
              "
              v-for="iconname in [
                'defaultIcon',
                'fireIcon',
                'peopleIcon',
                'warnIcon',
                'carIcon',
                'checkIcon',
                'closeIcon',
              ]"
              :key="iconname"
            >
              <div
                class="svg-container"
                v-html="getIcon(iconname)"
                @click="nowAnnotationData.properties.iconname = iconname"
              />
            </div>
          </div>
        </a-col>
        <!-- 字体：点、线、形、圈 -->
        <a-col :span="6">
          <div class="annotationTitle">字体</div>
        </a-col>
        <a-col :span="18">
          <div class="annotationContent">
            <a-radio-group
              v-model:value="nowAnnotationData.properties.font_size"
              button-style="solid"
              size="small"
            >
              <a-radio-button :value="16">小</a-radio-button>
              <a-radio-button :value="24">中</a-radio-button>
              <a-radio-button :value="32">大</a-radio-button>
            </a-radio-group>
          </div>
        </a-col>
      </a-row>
    </div>
    <div style="border-bottom: 1px solid #ffffff55; margin-left: 15px; margin-right: 15px"></div>
    <div class="annotationInfo_biaozhu_2">
      <a-row>
        <a-col :span="24">
          <div class="annotationTitle">
            测量数据
            <a-tooltip placement="top">
              <template #title> 只能测量出当前视窗范围内的数据 </template>
              <InfoCircleOutlined style="margin-left: 10px" />
            </a-tooltip>
          </div>
        </a-col>
        <!-- 经纬模式：点、圈 -->
        <a-col :span="6" v-if="[0, 3].includes(nowAnnotationData.type)">
          <div class="annotationTitle">经纬模式</div>
        </a-col>
        <a-col :span="18" v-if="[0, 3].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <a-radio-group v-model:value="modalType">
              <a-radio :value="0"><span style="color: white">十进制</span></a-radio>
              <a-radio :value="1"><span style="color: white">度分秒</span></a-radio>
            </a-radio-group>
          </div>
        </a-col>
        <!-- 经度：点 -->
        <a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
          <div class="annotationTitle">经度</div>
        </a-col>
        <a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <!-- 十进制 -->
            <a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[0]">
              <template #addonAfter>
                <span style="color: white">°</span>
              </template>
            </a-input>
            <!-- 度分秒 -->
            <a-input
              v-if="modalType == 1"
              v-model:value="decimalToDMS_0.degrees"
              style="max-width: 32px"
              @change="
                decimalToDMS_0.degrees = parseFloat(
                  decimalToDMS_0.degrees.toString().replace(/[^-0-9]/g, ''),
                )
              "
            />
            <span v-if="modalType == 1" style="margin: 2px; color: white">°</span>
            <a-input
              v-if="modalType == 1"
              v-model:value="decimalToDMS_0.minutes"
              style="max-width: 30px"
              @change="
                decimalToDMS_0.minutes = parseFloat(
                  decimalToDMS_0.minutes.toString().replace(/[^-0-9]/g, ''),
                )
              "
            />
            <span v-if="modalType == 1" style="margin: 2px; color: white">′</span>
            <a-input
              v-if="modalType == 1"
              v-model:value="decimalToDMS_0.seconds"
              style="width: 120px"
              @change="
                decimalToDMS_0.seconds = parseFloat(
                  decimalToDMS_0.seconds.toString().replace(/[^-0-9]/g, ''),
                )
              "
            />
            <span v-if="modalType == 1" style="margin: 2px; color: white">″</span>
          </div>
        </a-col>
        <!-- 纬度：点 -->
        <a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
          <div class="annotationTitle">纬度</div>
        </a-col>
        <a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <!-- 十进制 -->
            <a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[1]">
              <template #addonAfter>
                <span style="color: white">°</span>
              </template>
            </a-input>
            <!-- 度分秒 -->
            <a-input
              v-if="modalType == 1"
              v-model:value="decimalToDMS_1.degrees"
              style="max-width: 32px"
              @change="
                decimalToDMS_1.degrees = parseFloat(
                  decimalToDMS_1.degrees.toString().replace(/[^-0-9]/g, ''),
                )
              "
            />
            <span v-if="modalType == 1" style="margin: 2px; color: white">°</span>
            <a-input
              v-if="modalType == 1"
              v-model:value="decimalToDMS_1.minutes"
              style="max-width: 30px"
              @change="
                decimalToDMS_1.minutes = parseFloat(
                  decimalToDMS_1.minutes.toString().replace(/[^-0-9]/g, ''),
                )
              "
            />
            <span v-if="modalType == 1" style="margin: 2px; color: white">′</span>
            <a-input
              v-if="modalType == 1"
              v-model:value="decimalToDMS_1.seconds"
              style="width: 120px"
              @change="
                decimalToDMS_1.seconds = parseFloat(
                  decimalToDMS_1.seconds.toString().replace(/[^-0-9]/g, ''),
                )
              "
            />
            <span v-if="modalType == 1" style="margin: 2px; color: white">″</span>
          </div>
        </a-col>
        <!-- 高度：点 -->
        <a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
          <div class="annotationTitle">高度</div>
        </a-col>
        <a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <a-input v-model:value="nowAnnotationData.coordinates[2]">
              <template #addonAfter> <span style="color: white">m</span> </template>
            </a-input>
          </div>
        </a-col>
        <!-- 圆心经度：圈 -->
        <a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
          <div class="annotationTitle">圆心经度</div>
        </a-col>
        <a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <a-input v-model:value="nowAnnotationData.properties.centerPoint[0]">
              <template #addonAfter> <span style="color: white">°</span> </template>
            </a-input>
          </div>
        </a-col>
        <!-- 圆心纬度：圈 -->
        <a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
          <div class="annotationTitle">圆心纬度</div>
        </a-col>
        <a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <a-input v-model:value="nowAnnotationData.properties.centerPoint[1]">
              <template #addonAfter> <span style="color: white">°</span> </template>
            </a-input>
          </div>
        </a-col>
        <!-- 水平半径：圈 -->
        <a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
          <div class="annotationTitle">水平半径</div>
        </a-col>
        <a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <a-input v-model:value="nowAnnotationData.properties.radius">
              <template #addonAfter> <span style="color: white">m</span> </template>
            </a-input>
          </div>
        </a-col>
        <!-- 水平面积：形状、圈 -->
        <a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
          <div class="annotationTitle">水平面积</div>
        </a-col>
        <a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
              {{ horizontalArea }}㎡
            </span>
            <span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
              {{
                (
                  Math.PI *
                  nowAnnotationData.properties.radius *
                  nowAnnotationData.properties.radius
                ).toFixed(2)
              }}㎡
            </span>
          </div>
        </a-col>
        <!-- 水平周长：形状、圈 -->
        <a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
          <div class="annotationTitle">水平周长</div>
        </a-col>
        <a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
              {{ horizontalPerimeter }}m
            </span>
            <span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
              {{ (2 * Math.PI * nowAnnotationData.properties.radius).toFixed(1) }}
              m
            </span>
          </div>
        </a-col>
        <!-- 水平距离：线 -->
        <a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
          <div class="annotationTitle">水平距离</div>
        </a-col>
        <a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <span style="color: white; gap: 10px"> {{ horizontalDistance }}m </span>
          </div>
        </a-col>
        <!-- 直线距离：线 -->
        <a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
          <div class="annotationTitle">直线距离</div>
        </a-col>
        <a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <span style="color: white; gap: 10px"> {{ linearDistance }}m </span>
          </div>
        </a-col>
        <!-- 高度差：线、形 -->
        <a-col :span="6" v-if="[1, 2].includes(nowAnnotationData.type)">
          <div class="annotationTitle">高度差</div>
        </a-col>
        <a-col :span="18" v-if="[1, 2].includes(nowAnnotationData.type)">
          <div class="annotationContent">
            <span style="color: white; gap: 10px" v-if="[1, 2].includes(nowAnnotationData.type)">
              {{ heightDiff }}m
            </span>
          </div>
        </a-col>
        <!-- 简介：点、线、形、圈 -->
        <a-col :span="6">
          <div class="annotationTitle">简介</div>
        </a-col>
        <a-col :span="18">
          <div class="annotationContent">
            <a-textarea
              v-model:value="nowAnnotationData.remark"
              :rows="4"
              :maxlength="10"
              placeholder="请输入"
              allow-clear
            />
          </div>
        </a-col>
        <!-- 绘制者：点、线、形、圈 -->
        <a-col :span="6">
          <div class="annotationTitle">绘制者</div>
        </a-col>
        <a-col :span="18">
          <div class="annotationContent">
            <span style="color: white">{{ nowAnnotationData.createUserName }}</span>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, computed, onMounted } from 'vue';
  import * as mars3d from 'mars3d';
  import * as Cesium from 'mars3d-cesium';
  import {
    line_start_cap_0,
    line_start_cap_1,
    line_start_cap_2,
    line_start_cap_3,
    line_end_cap_0,
    line_end_cap_1,
    line_end_cap_2,
    line_end_cap_3,
    defaultIcon,
    fireIcon,
    peopleIcon,
    warnIcon,
    carIcon,
    checkIcon,
    closeIcon,
  } from './svg';
  import {
    CloseOutlined,
    DeleteOutlined,
    CheckOutlined,
    AimOutlined,
    AlignLeftOutlined,
    InfoCircleOutlined,
    AntDesignOutlined,
    ExpandAltOutlined,
    BorderOutlined,
    LogoutOutlined,
  } from '@ant-design/icons-vue';
  import { cloneDeep } from 'lodash-es';

  let map: mars3d.Map;
  const props = defineProps(['allAnnotationDataList', 'nowShowAnnotationData']);
  const emits = defineEmits([
    'setNowShowAnnotationData',
    'closePathAnnotationInfo',
    'handlerLocation',
    'deleteAnnotation',
  ]);
  const nowAnnotationData: any = ref(props.nowShowAnnotationData);

  function getIcon(iconname) {
    let returnIcon: any = null;
    switch (iconname) {
      case 'defaultIcon':
        returnIcon = defaultIcon;
        break;
      case 'fireIcon':
        returnIcon = fireIcon;
        break;
      case 'peopleIcon':
        returnIcon = peopleIcon;
        break;
      case 'warnIcon':
        returnIcon = warnIcon;
        break;
      case 'carIcon':
        returnIcon = carIcon;
        break;
      case 'checkIcon':
        returnIcon = checkIcon;
        break;
      case 'closeIcon':
        returnIcon = closeIcon;
        break;
    }
    return returnIcon.replaceAll('currentColor', '#ffffff');
  }

  // 经纬模式
  const modalType = ref<number>(0);
  // 度分秒-经度
  const decimalToDMS_0 = ref({
    degrees: 0,
    minutes: 0,
    seconds: 0,
  });
  // 度分秒-纬度
  const decimalToDMS_1 = ref({
    degrees: 0,
    minutes: 0,
    seconds: 0,
  });
  watch(
    () => modalType.value,
    (newValue) => {
      if (newValue == 0) {
        // 度分秒-经度 → 十进制-经度
        let { degrees, minutes, seconds } = decimalToDMS_0.value;
        let decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
        nowAnnotationData.value.coordinates[0] = decimal;
        // 度分秒-纬度 → 十进制-纬度
        degrees = decimalToDMS_1.value.degrees;
        minutes = decimalToDMS_1.value.minutes;
        seconds = decimalToDMS_1.value.seconds;
        decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
        nowAnnotationData.value.coordinates[1] = decimal;
      }
      if (newValue == 1) {
        // 十进制-经度 → 度分秒-经度
        const decimal1 = nowAnnotationData.value.coordinates[0];
        const degrees1 = Math.floor(decimal1);
        const minutesFull1 = (decimal1 - degrees1) * 60;
        const minutes1 = Math.floor(minutesFull1);
        const seconds1 = parseFloat((minutesFull1 - minutes1) * 60);
        decimalToDMS_0.value = {
          degrees: degrees1,
          minutes: minutes1,
          seconds: seconds1,
        };
        // 十进制-纬度 → 度分秒-纬度
        const decimal2 = nowAnnotationData.value.coordinates[1];
        const degrees2 = Math.floor(decimal2);
        const minutesFull2 = (decimal2 - degrees2) * 60;
        const minutes2 = Math.floor(minutesFull2);
        const seconds2 = parseFloat((minutesFull2 - minutes2) * 60);
        decimalToDMS_1.value = {
          degrees: degrees2,
          minutes: minutes2,
          seconds: seconds2,
        };
      }
    },
  );

  // 关闭
  function closePathAnnotationInfo() {
    emits('closePathAnnotationInfo');
  }
  // 移动到中心位置
  function handlerLocation() {
    emits('handlerLocation', {
      lng: props.nowShowAnnotationData.properties.centerPoint[0],
      lat: props.nowShowAnnotationData.properties.centerPoint[1],
    });
  }
  // 删除此标注
  function deleteAnnotation() {
    emits('deleteAnnotation', props.nowShowAnnotationData);
  }
  // 线-直线距离
  const linearDistance: any = ref();
  // 线-水平距离
  const horizontalDistance: any = ref();
  // 圆-水平面积
  const horizontalArea: any = ref();
  // 圆-水平周长
  const horizontalPerimeter: any = ref();
  // 高度差
  const heightDiff: any = ref();

  watch(
    () => nowAnnotationData.value,
    () => {
      emits('setNowShowAnnotationData', nowAnnotationData.value, false);
    },
    {
      deep: true,
    },
  );
  watch(
    () => props.nowShowAnnotationData,
    () => {
      nowAnnotationData.value = props.nowShowAnnotationData;
      // 线
      if (nowAnnotationData.value.type == 1) {
        // 直线距离
        linearDistance.value = mars3d.MeasureUtil.getDistance(
          nowAnnotationData.value.coordinates,
        ).toFixed(2);
        // 水平距离
        horizontalDistance.value = mars3d.MeasureUtil.getSurfaceDistance(
          nowAnnotationData.value.coordinates,
        ).toFixed(2);
        // 高度差
        let heightlist: any = [];
        nowAnnotationData.value.coordinates.forEach((item) => {
          heightlist.push(item[2]);
        });
        heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
      }
      // 多边形
      if (nowAnnotationData.value.type == 2) {
        // 水平面积
        horizontalArea.value = mars3d.MeasureUtil.getSurfaceArea(
          nowAnnotationData.value.coordinates[0],
        ).toFixed(2);
        // 水平周长
        horizontalPerimeter.value = mars3d.MeasureUtil.getSurfaceDistance(
          nowAnnotationData.value.coordinates[0],
        ).toFixed(2);
        // 高度差
        let heightlist: any = [];
        nowAnnotationData.value.coordinates[0].forEach((item) => {
          heightlist.push(item[2]);
        });
        heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
      }
    },
    {
      deep: true,
      immediate: true,
    },
  );
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .annotationInfo {
    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    position: relative;
    width: 100%;
    height: 100%;
    background: #232323;

    .annotationInfo_biaozhu_1 {
      padding: 15px;
    }
    .annotationInfo_biaozhu_2 {
      padding: 15px;
      overflow-y: auto;
      height: 650px;
    }
  }

  // 关闭按钮
  .closeButton {
    position: absolute;
    top: 30px;
    right: 20px;
    z-index: 200;
  }

  .annotationTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
    font-size: 14px;
    min-height: 45px;
    height: auto;
    width: 100%;
    flex-wrap: wrap;

    .annotationTitleButton_right {
      height: 20px;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 18px;
    }
    .annotationTitleButton {
      height: 20px;
      width: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
      font-size: 18px;
    }
  }
  .annotationContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 45px;
    height: auto;
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
  }

  .popoverClass {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin-right: 5px;
  }

  .svg-container {
    display: block;
  }

  ::v-deep .annotationContent .ant-input {
    padding: 0px !important;
  }

  ::v-deep .annotationContent .ant-select-selection-item {
    height: 20px !important;
  }

  .annotationContentButton {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
  }
</style>
