<template>
  <div v-if="title || !disabled" class="type-toper">
    <div :class="['type-title', { 'no-title': !title }]">{{ title }}</div>
    <div v-if="!disabled" class="type-options">
      <el-dropdown placement="bottom-end">
        <div class="btn">
          <el-icon :size="16">
            <MoreFilled />
          </el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-if="btns.includes('edit')" @click="editFun">
              <el-link type="primary">编辑</el-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="btns.includes('del')" @click="delFun">
              <el-link type="danger">删除</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MoreFilled } from '@element-plus/icons-vue';

interface Props {
  title: string;
  btns?: any;
  disabled: boolean;
}

withDefaults(defineProps<Props>(), {
  title: '',
  btns: [],
  disabled: false,
});

const emit = defineEmits(['edit', 'del']);

const editFun = () => {
  emit('edit');
};

const delFun = () => {
  emit('del');
};
</script>

<style lang="scss" scoped>
.type-toper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  .type-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--el-text-color-secondary);
    background-color: var(--el-border-color-light);
    padding: 0 10px;
    height: 100%;
    border-radius: 4px 0 4px 0;
    &.no-title {
      background: none;
    }
  }
  .type-options {
    padding: 0 20px;
    .btn {
      color: var(--el-text-color-primary);
      cursor: pointer;
    }
  }
}
</style>
