<template>
  <div class="props">
    <div v-if="pen.events && pen.events.length">
      <t-collapse
        v-model="openedCollapses"
        :borderless="true"
        :expand-on-row-click="true"
        expand-icon-placement="left"
      >
        <t-collapse-panel v-for="(item, i) in pen.events" :value="i">
          <template #header>
            <div @click.stop class="head">
              <t-select v-model="item.name" :options="options" autoWidth />
            </div>
          </template>
          <template #headerRightContent>
            <t-space size="small" @click.stop>
              <t-popconfirm
                content="确认删除该交互事件吗"
                placement="left"
                @confirm="pen.events.splice(i, 1)"
              >
                <t-icon name="delete" class="hover" />
              </t-popconfirm>
            </t-space>
          </template>

          <Actions :data="pen.events[i]" />
        </t-collapse-panel>
      </t-collapse>
      <t-divider />
      <div class="p-16">
        <t-dropdown
          :options="options"
          @click="addEvent"
          :minColumnWidth="254"
          :maxHeight="360"
        >
          <t-button class="w-full" style="height: 30px">
            添加交互事件
          </t-button>
        </t-dropdown>
      </div>
    </div>
    <div class="flex column center blank" v-else>
      <img src="/img/blank.png" />
      <div class="gray center">还没有交互事件</div>
      <div class="mt-8">
        <t-dropdown
          :options="options"
          @click="addEvent"
          :minColumnWidth="150"
          :maxHeight="360"
        >
          <t-button style="height: 30px"> 添加交互事件 </t-button>
        </t-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  getCurrentInstance,
  onBeforeMount,
  onUnmounted,
  reactive,
  ref,
  toRaw,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import axios from 'axios';
import { debounce } from '@/services/debouce';

import Actions from './Actions.vue';
import { updatePen } from './pen';

const route = useRoute();
const router = useRouter();

const {
  proxy: { $forceUpdate },
}: any = getCurrentInstance();

const { pen } = defineProps<{
  pen: any;
}>();

const options = ref<any>([
  {
    value: 'click',
    content: '单击',
  },
  {
    value: 'dblclick',
    content: '双击',
    divider: true,
  },
  {
    value: 'enter',
    content: '鼠标移入',
  },
  {
    value: 'leave',
    content: '鼠标移出',
    divider: true,
  },
  {
    value: 'active',
    content: '获得焦点',
  },
  {
    value: 'inactive',
    content: '失去焦点',
    divider: true,
  },
  {
    value: 'mousedown',
    content: '鼠标按下',
  },
  {
    value: 'mouseup',
    content: '鼠标抬起',
    divider: true,
  },
  {
    value: 'message',
    content: '监听消息',
  },
]);

const openedCollapses = ref([0]);

onBeforeMount(() => {
  if (!pen.events) {
    pen.events = [];
  }

  for (const item of options.value) {
    item.label = item.content;
  }
});

const addEvent = (e: any) => {
  pen.events.push({ name: e.value });
};

onUnmounted(() => {});
</script>
<style lang="postcss" scoped>
.props {
  height: 100%;

  .blank {
    height: 70%;
    img {
      padding: 16px;
      opacity: 0.9;
    }
  }

  .head {
    :deep(.t-select) {
      width: fit-content;

      .t-input {
        border-color: transparent;
      }
    }
  }

  .banner {
    background-color: var(--color-background-input);
    padding: 0 12px;
  }
}
</style>
