<template>
  <div>
    <div class="title"> 详细信息 </div>
    <div class="info">
      <a-row>
        <a-col :span="7">
          <span class="infotitle">图片名称</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue" v-if="editNameFlag">
            {{ props.nowPreviewRecord.name }}
            <EditOutlined style="font-size: 20px; color: #07aaed" @click="editNameChange" />
          </span>
          <span class="infovalue" v-if="!editNameFlag">
            <a-input
              v-model:value="editName"
              size="small"
              @keypress.enter="pressEnterNameFunction"
              @blur="editNameBlur"
            />
          </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">照片类型</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.imgtype }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">任务名称</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.taskname }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">航线名称</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.airlineName }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">照片分辨率</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">
            {{ props.nowPreviewRecord.width + '*' + props.nowPreviewRecord.height }}
          </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">照片大小</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.size }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄飞机</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.photographFeiji }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄负载</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.photographNumber }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄人员</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.photographMan }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄时间</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.photographTime }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">标签</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue" v-if="addLabelFlag">
            <a-tag color="success" v-for="la in props.nowPreviewRecord.label" :key="la">
              {{ la }}
            </a-tag>
            <PlusSquareOutlined style="font-size: 20px; color: #07aaed" @click="addLabelChange" />
          </span>
          <span class="infovalue" v-if="!addLabelFlag">
            <a-tag
              color="success"
              v-for="la in props.nowPreviewRecord.label"
              :key="la"
              closable
              @close="deleteLabel(la)"
            >
              {{ la }}
            </a-tag>
            <a-input
              v-model:value="newLabelName"
              size="small"
              placeholder=""
              @keypress.enter="pressEnterLabelFunction"
              @blur="addLabelBlur"
            />
          </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">涂鸦总数</span>
        </a-col>
        <a-col :span="17">
          <span class="infovalue">{{ props.nowPreviewRecord.label }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">照片位置</span>
        </a-col>
        <a-col :span="17">
          <span class="infobutton">
            <EnvironmentOutlined style="font-size: 20px; color: #07aaed" @click="flyPoint" />
          </span>
        </a-col>
        <a-col :span="24">
          <div class="map">
            <Map ref="mapRef" :nowPreviewRecord="props.nowPreviewRecord" />
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { EditOutlined, PlusSquareOutlined, EnvironmentOutlined } from '@ant-design/icons-vue';
  import { orgPosGroup } from '@/api/demo/system';
  import { Map } from './preview';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const props = defineProps(['nowPreviewRecord']);
  const emit = defineEmits(['reloadTable']);

  // 修改名称--------------------------------
  const editNameFlag = ref(true);
  const editName = ref(props.nowPreviewRecord.name.split('.').slice(0, -1).join('.'));
  function editNameChange() {
    editNameFlag.value = false;
  }
  // 修改名称方法
  async function pressEnterNameFunction() {
    let query = {
      id: props.nowPreviewRecord.id,
      newName: editName.value + '.' + props.nowPreviewRecord.name.split('.').pop(),
    };
    props.nowPreviewRecord.name =
      editName.value + '.' + props.nowPreviewRecord.name.split('.').pop();
    editNameFlag.value = true;
    emit('reloadTable');
    return;
    // 调用接口
    const data = await orgPosGroup(query);
    if (data) {
      editNameFlag.value = true;
      emit('reloadTable');
      return createMessage.success('修改名称成功');
    } else {
      return createMessage.error('修改名称失败');
    }
  }
  function editNameBlur() {
    editNameFlag.value = true;
    editName.value = props.nowPreviewRecord.name.split('.').slice(0, -1).join('.');
  }

  // 标签--------------------------------
  const addLabelFlag = ref(true);
  const newLabelName = ref('');
  function addLabelChange() {
    addLabelFlag.value = false;
  }
  // 添加标签方法
  async function pressEnterLabelFunction() {
    if (!newLabelName.value) {
      return;
    }
    if (!props.nowPreviewRecord.label.includes(newLabelName.value)) {
      props.nowPreviewRecord.label.push(newLabelName.value);
      let query = {
        id: props.nowPreviewRecord.id,
        newLabel: props.nowPreviewRecord.label,
      };
      addLabelFlag.value = true;
      emit('reloadTable');
      newLabelName.value = '';
      return;
      // 调用接口
      const data = await orgPosGroup(query);
      if (data) {
        addLabelFlag.value = true;
        emit('reloadTable');
        return createMessage.success('修改名称成功');
      } else {
        return createMessage.error('修改名称失败');
      }
    } else {
      return createMessage.error('此标签已存在！');
    }
  }

  function deleteLabel(value) {
    props.nowPreviewRecord.label = props.nowPreviewRecord.label.filter((item) => item !== value);
    emit('reloadTable');
  }
  function addLabelBlur() {
    addLabelFlag.value = true;
    newLabelName.value = '';
  }

  // 地图--------------------------------
  const mapRef = ref();
  function flyPoint() {
    mapRef.value?.flyToPoint([props.nowPreviewRecord.lng, props.nowPreviewRecord.lat]);
  }
</script>
<style lang="less" scoped>
  .title {
    position: relative;
    width: 50%;
    height: 60px;
    font-size: 15px;
    color: white;
    display: flex;
    align-items: center;
  }
  .info {
    position: relative;
    width: 90%;
    height: 480px;

    .infotitle {
      font-size: 15px;
      color: #ffffff;
      display: flex;
      align-items: center;
      height: 40px;
      margin-left: 10px;
    }

    .infovalue {
      font-size: 15px;
      color: #ffffff;
      display: flex;
      align-items: center;
      height: 40px;
    }

    .infobutton {
      font-size: 10px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: right;
      height: 40px;
    }
  }

  .map {
    width: 100%;
    height: 300px;
    margin-left: 10px;
  }
</style>
