<template>
  <div class="cameraGroups__decoration"></div>

  <div class="cameraGroups">
    <div class="createGroup" @click="handleCreateGroup">
      <div class="createGroupIcon">
        <img src="@/assets/icons/nine-square-grid/add.png" />
      </div>
      <div>添加监控区域</div>
    </div>

    <div class="createGroupInput" v-show="showCreateGroupInput">
      <img class="folderIcon" src="@/assets/icons/nine-square-grid/folder-white.png" />
      <el-input
        v-model="inputNewGroupName"
        class="GroupNameInput"
        placeholder="为此区域命名"
        maxlength="15"
        show-word-limit
        ref="groupNameInputRef"
        @blur="handleEnterGroupName()"
        @keyup.enter="$event.target.blur()"
      />
    </div>

    <div class="groupList">
      <el-scrollbar>
        <el-collapse v-model="activeGroup">
          <div v-for="cameraGroup in cameraGroupList" :key="cameraGroup.id">
            <CameraGroup :cameraGroup="cameraGroup" :activeGroup="activeGroup" />
          </div>
        </el-collapse>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue';
  import { ElInput, ElScrollbar, ElCollapse } from 'element-plus';
  import { useRoute } from 'vue-router';
  import CameraGroup from './CameraGroup.vue';
  import { useCameraGroupList } from '@/store/modules/useCameraGroupList';
  import { storeToRefs } from 'pinia';

  const route = useRoute();
  const activeGroup = ref(['']);
  const showCreateGroupInput = ref(false);
  const inputNewGroupName = ref('');
  const groupNameInputRef = ref();
  const { cameraGroupList } = storeToRefs(useCameraGroupList());
  const { saveOrUpdateCameraGroupAll, queryCameraGroupListByTypeAndSourceId } = useCameraGroupList();

  function handleCreateGroup() {
    showCreateGroupInput.value = !showCreateGroupInput.value;
    if (showCreateGroupInput.value) {
      checkGroupName();

      nextTick(() => {
        groupNameInputRef.value.focus();
      });
    }
  }

  function handleEnterGroupName() {
    checkGroupName();
    saveOrUpdateCameraGroupAll(inputNewGroupName.value, 8, Number(route.query.id));
    activeGroup.value = [inputNewGroupName.value]; // 添加区域后展开区域
    inputNewGroupName.value = '';
    showCreateGroupInput.value = false;
  }

  function checkGroupName() {
    if (inputNewGroupName.value === '') {
      let maxSuffix = 0;
      cameraGroupList.value.map((x) => {
        if (x.groupName.startsWith('新建区域')) {
          const suffix = Number(x.groupName.replace('新建区域', ''));
          // 过滤区域名后缀不是数字的区域
          if (!isNaN(suffix)) {
            if (suffix > maxSuffix) {
              maxSuffix = suffix;
            }
          }
        }
      });

      if (maxSuffix !== 0) {
        const newDefaultGroupNameIndex = maxSuffix + 1;

        inputNewGroupName.value = '新建区域' + newDefaultGroupNameIndex;
      } else {
        inputNewGroupName.value = '新建区域1';
      }
    }
  }

  onMounted(() => {
    queryCameraGroupListByTypeAndSourceId(8, Number(route.query.id));
  });
</script>

<style lang="scss" scoped>
  .cameraGroups__decoration {
    height: 5px;
    margin-bottom: 20px;
    border-radius: 8px 8px 0 0;
    background-color: #1777ff;
  }

  .cameraGroups {
    height: calc(100% - 25px);
    color: #333333;
    padding: 0px 16px;
    padding-right: 4px;
    transition: all 0.3s ease;

    .createGroup {
      height: 24px;
      width: 120px;
      display: flex;
      margin-right: 12px;
      margin-bottom: 12px;
      color: #333333;
      font-size: 14px;
      line-height: 24px;
      cursor: pointer;

      .createGroupIcon {
        margin-right: 12px;
        position: relative;

        img {
          height: 24px;
          width: 24px;
        }

        &::after {
          content: '+';
          position: absolute;
          top: -1px;
          left: 0;
          right: 0;
          font-size: 20px;
          font-weight: 500;
          color: #1777ff;
          text-align: center;
        }
      }
    }

    .createGroupInput {
      height: 32px;
      display: flex;
      align-items: center;
      background-color: #1677ff;
      border-radius: 4px;
      margin-bottom: 12px;
      padding-right: 6px;
      color: #333333;
      font-size: 14px;
      line-height: 24px;
      .folderIcon {
        height: 24px;
        margin-right: 12px;
      }
      .GroupNameInput {
        height: 24px;
      }
    }
    .groupList {
      height: 80%;

      padding: 0 0px;
      overflow: auto;
    }
  }

  :deep(.el-collapse) {
    border: 0px;
  }
  :deep(.el-collapse-item__arrow) {
    margin-right: 12px;
    color: #333333;
  }

  :deep(.el-collapse-item__wrap) {
    background: transparent;
    border-bottom: transparent;
  }
  :deep(.el-collapse-item__content) {
    padding: 0px;
    margin-right: 10px;
  }
  :deep(.el-collapse-item__header) {
    background: #f4f7ff;
    border: 0px;
    flex-direction: row-reverse;
    padding-left: 12px;
    margin-right: 10px;
  }
</style>
