<template>
  <div>
    <div class="setting-box" @click="handleSetting">
      <div
        :class="{
          'inner-box': true,
          'border-top': borderShowType[0],
          'border-right': borderShowType[1],
          'border-bottom': borderShowType[2],
          'border-left': borderShowType[3],
        }"
      ></div>
    </div>
    <div class="border-setting" v-show="isShowBox">
      <div
        v-for="(item, index) in borderShowType"
        :key="index"
        @click="handleClick(index)"
        :class="{ 'content-box': item }"
      ></div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { cloneDeep } from 'lodash-es';

  const props = defineProps({
    borderShowType: {
      type: Array,
      default: [true, true, true, true],
    },
  });

  const emit = defineEmits(['update:borderShowType']);
  const isShowBox = ref(false);
  const handleSetting = () => {
    isShowBox.value = !isShowBox.value;
  };

  const handleClick = (index) => {
    const borderInfo = cloneDeep(props.borderShowType);
    borderInfo[index] = !borderInfo[index];

    emit('update:borderShowType', borderInfo);
  };
</script>
<style lang="less" scoped>
  .setting-box {
    width: 25px;
    height: 25px;
    border: 2px solid #ccc;
    padding: 3px;

    .inner-box {
      height: 100%;
      width: 100%;
      border: 1px dashed #ccc;
    }
  }

  .border-left {
    border-left: 1px solid #ccc !important;
  }

  .border-right {
    border-right: 1px solid #ccc !important;
  }

  .border-top {
    border-top: 1px solid #ccc !important;
  }

  .border-bottom {
    border-bottom: 1px solid #ccc !important;
  }

  .border-setting {
    position: absolute;
    right: 30px;
    width: 70px;
    height: 70px;
    background: #fff;
    z-index: 999;

    > div {
      position: absolute;
      border: 1px solid #8c8c8c;
      border-radius: 2px;
      box-sizing: content-box;

      &:nth-child(1) {
        width: 30px;
        height: 10px;
        left: 18px;
        top: 5px;
      }

      &:nth-child(2) {
        width: 10px;
        height: 30px;
        top: 20px;
        right: 5px;
      }

      &:nth-child(3) {
        width: 30px;
        height: 10px;
        left: 18px;
        bottom: 5px;
      }

      &:nth-child(4) {
        width: 10px;
        height: 30px;
        top: 20px;
        left: 5px;
      }
    }

    .content-box {
      &:nth-child(1)::after {
        content: '';
        display: block;
        width: 160%;
        margin-left: -26%;
        margin-top: 4px;
        border: 1px solid #8c8c8c;
      }

      &:nth-child(2)::after {
        content: '';
        display: block;
        height: 150%;
        margin-top: -90%;
        margin-left: 4px;
        width: 2px;
        background: #8c8c8c;
      }

      &:nth-child(3)::after {
        content: '';
        display: block;
        width: 160%;
        margin-left: -26%;
        margin-top: 4px;
        border: 1px solid #8c8c8c;
      }

      &:nth-child(4)::after {
        content: '';
        display: block;
        height: 150%;
        margin-top: -90%;
        margin-left: 4px;
        width: 2px;
        background: #8c8c8c;
      }
    }
  }
</style>
