<template>
  <div class="recordNewBuild_div">
    <div class="recordNewBuild_title">
      <span style="margin-left: 15px; font-size: 16px; font-weight: bold">新建检测</span>
    </div>
    <div class="recordNewBuild_choose">
      <a-row>
        <a-col :span="24" style="margin-top: 10px">
          <div style="font-size: 14px">检测名称</div>
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <a-input v-model:value="newBuildRecord.name" style="width: 100%"></a-input>
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <div style="font-size: 14px">检测对象</div>
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <a-button type="primary" style="width: 100%" @click="openModalChooseObject">
            <PlusOutlined />选择对象
          </a-button>
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <div style="font-size: 14px">
            动态物过滤
            <a-tooltip placement="bottom">
              <template #title>
                <span>选中项不被认定为变化区域</span>
              </template>
              <InfoCircleOutlined style="font-size: 14px; margin-left: 5px" />
            </a-tooltip>
          </div>
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <div class="recordNewBuild_filter">
            <div
              class="car"
              :style="{
                background: newBuildRecord.filterCar ? '#2d8cf0' : '#3c3c3c',
              }"
              @click="newBuildRecord.filterCar = !newBuildRecord.filterCar"
            >
              车
            </div>
          </div>
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <div style="font-size: 14px">
            最小变化区域过滤
            <a-tooltip placement="bottom">
              <template #title>
                <span>变化区域像素占照片像素比例小于下列设置值，不将其认定为变化区域</span>
              </template>
              <InfoCircleOutlined style="font-size: 14px; margin-left: 5px" />
            </a-tooltip>
            （0.01-50%）</div
          >
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <div class="recordNewBuild_minChange">
            <div
              class="button"
              :class="{ disabled: newBuildRecord.num == 0.01 }"
              @click="removeRecordNum"
            >
              <MinusOutlined style="font-size: 20px; color: #ffffff" />
            </div>
            <div class="numDiv">
              <span v-if="!numInputFlag" class="numSpan" @click="focusInput">
                {{ newBuildRecord.num }}
              </span>
              <a-input
                ref="focusInputRef"
                v-if="numInputFlag"
                v-model:value="newBuildRecord.num"
                style="width: 26%"
                @blur="blurInput"
                @keypress.enter="blurInput"
              />
              <span style="margin-left: 10px; font-size: 18px; color: #ffffff">%</span>
            </div>
            <div
              class="button"
              :class="{ disabled: newBuildRecord.num == 50 }"
              @click="addRecordNum"
            >
              <PlusOutlined style="font-size: 20px; color: #ffffff" />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="recordNewBuild_buttons">
      <div class="cancelDiv" @click="closeIsNewBuildStatus">取消</div>
      <div class="startDiv" :class="{ disabled: !newBuildRecord.data }">开始检测</div>
    </div>

    <!-- width="100%"
      wrap-class-name="full-modal"
       -->

    <a-modal
      v-model:open="modalChooseObjectOpen"
      width="80%"
      :centered="true"
      :closable="false"
      :footer="null"
      :destroyOnClose="true"
      :keyboard="false"
      :mask="false"
      :maskClosable="false"
    >
      <ModalChooseObject @closeModalChooseObject="closeModalChooseObject" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick, watch } from 'vue';
  import { ModalChooseObject } from './comparison';
  import { PlusOutlined, MinusOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
  import { cloneDeep } from 'lodash-es';
  import dayjs from 'dayjs';

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

  // 选择对象弹窗
  const modalChooseObjectOpen = ref(false);
  // 选择对象弹窗-开启
  function openModalChooseObject() {
    modalChooseObjectOpen.value = true;
  }
  // 选择对象弹窗-关闭
  function closeModalChooseObject() {
    console.log(123);

    modalChooseObjectOpen.value = false;
  }

  // 最小变化区域过滤----------------------------------------------------------------------
  const numInputFlag = ref(false);
  const focusInputRef = ref();
  // input鼠标聚焦
  function focusInput() {
    numInputFlag.value = true;
    nextTick(() => {
      if (focusInputRef.value && focusInputRef.value.focus) {
        focusInputRef.value.focus();
      }
    });
  }
  // input鼠标聚焦后离开or点击Enter
  function blurInput() {
    numInputFlag.value = false;
    // 检测是否是数字
    if (/^-?\d+(\.\d+)?$/.test(newBuildRecord.value.num.toString())) {
      if (newBuildRecord.value.num > 50) {
        // 不能大于50
        newBuildRecord.value.num = 50;
      } else if (newBuildRecord.value.num < 0.01) {
        // 不能小于0.01
        newBuildRecord.value.num = 0.01;
      } else {
        // 保存小数点后两位
        let newnum = cloneDeep(newBuildRecord.value.num);
        newBuildRecord.value.num = parseFloat(parseFloat(newnum).toFixed(2));
      }
    } else {
      // 不是数字
      newBuildRecord.value.num = 0.01;
    }
  }
  // 最小变化区域过滤-减少
  function removeRecordNum() {
    let newnum = cloneDeep(newBuildRecord.value.num);
    if (newnum == 0.01) {
      return;
    }
    newnum -= 0.01;
    newBuildRecord.value.num = parseFloat(newnum.toFixed(2));
  }
  // 最小变化区域过滤-增加
  function addRecordNum() {
    let newnum = cloneDeep(newBuildRecord.value.num);
    if (newnum == 50) {
      return;
    }
    newnum += 0.01;
    newBuildRecord.value.num = parseFloat(newnum.toFixed(2));
  }

  // ----------------------------------------------------------------------
  const newBuildRecordClone = {
    name: '变化检测_',
    filterCar: false,
    num: 0.05,
  };
  const newBuildRecord = ref(cloneDeep(newBuildRecordClone));

  onMounted(() => {
    // 默认名
    newBuildRecord.value.name = newBuildRecord.value.name + dayjs().format('YYYY-MM-DD HH:mm:ss');
  });

  // 关闭新建检测记录弹窗
  function closeIsNewBuildStatus() {
    emit('closeIsNewBuildStatus');
  }
</script>
<style lang="less" scoped>
  .recordNewBuild_div {
    position: relative;
    width: 100%;
    height: 100%;
  }
  // 标题
  .recordNewBuild_title {
    position: relative;
    top: 0px;
    left: 0px;
    color: #ffffff;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #ffffff55;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    // justify-content: space-between;
  }
  // 检测选项
  .recordNewBuild_choose {
    margin-left: 15px;
    margin-right: 15px;
    display: block;
    align-items: center;
    justify-content: flex-start;
  }
  .car {
    width: 100px;
    height: 30px;
    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
  }
  // 最小变化区域过滤
  .recordNewBuild_minChange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 41px;

    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      background: #3c3c3c;
      border-radius: 2px;

      &:hover {
        background: #5d5f61;
      }
    }

    .button.disabled {
      cursor: not-allowed;
      opacity: 0.5;
      background-color: #ccc;
    }

    .numDiv {
      width: calc(100% - 70px);
      display: flex;
      align-items: center;
      justify-content: center;

      .numSpan {
        color: #2d8cf0;
        font-size: 26px;
        font-weight: bold;

        &:hover {
          text-decoration: underline;
          text-decoration-color: #2d8cf0;
        }
      }
    }
  }
  // 取消和开始检测按钮
  .recordNewBuild_buttons {
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #ffffff55;
    width: 100%;
    height: 68px;
    gap: 20px;

    .cancelDiv {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #3c3c3c;
      width: 40%;
      height: 32px;
      border-radius: 5px;

      &:hover {
        background: #5d5f61;
      }
    }

    .startDiv {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0960bd;
      width: 40%;
      height: 32px;
      border-radius: 5px;

      &:hover {
        background: #2a7dc9;
      }
    }

    .startDiv.disabled {
      cursor: not-allowed;
      opacity: 0.5;
      background-color: #27486b;
      // color:
    }
  }
</style>
