<template>
  <div class="p-2 auto-overflow-y">
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="65%" append-to-body class="ml-0 mr-0 pl-0 pr-0" @close="close">
      <div class="menu-container">
        <div v-for="(item, index) in allVisibleMenus" :key="index" :class="selected == item.menuId ? 'selected' : ''" @click="clickDiv(item)">
          <el-button type="primary" link style="width: 1.88rem; height: 1.88rem; position: absolute; right: 0rem" @click="settings(item)">
            <template #icon>
              <el-icon v-if="item.selected && item.selected == true" :size="20" color="red"><RemoveFilled /></el-icon>
              <el-icon v-else :size="20" color="green"><CirclePlusFilled /></el-icon>
            </template>
          </el-button>
          <img :src="'/src/assets/icons/svg/' + item.icon + '.svg'" />
          <br />
          <span>{{ item.menuName }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { getVisibleMenus } from '@/api/system/menu';
import { MenuVO2 } from '@/api/system/menu/types';
import { delMenu, addMenu, getCommonMenu } from '@/api/system/userUseMenu';

// 对话框
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const allVisibleMenus = ref<MenuVO2[]>([]);
/** 窗体打开事件 */
const open = async (data?: string) => {
  dialog.visible = true;
  dialog.title = '设置常用功能';
  getVisibleMenus().then((res) => {
    // 获取已经选择的设置数据
    let allVisibleMenusCopy = res.data;
    // 请求接口，在进行一步设置selected的值
    getCommonMenu().then((res) => {
      if (res.data && res.data.length > 0) {
        allVisibleMenusCopy.forEach((item2) => {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].menuId == item2.menuId) {
              item2.selected = true;
              break;
            }
          }
        });
      }
      allVisibleMenus.value = allVisibleMenusCopy;
    });
  });
};

// 提供 open 方法，用于打开弹窗
defineExpose({ open });

/** 触发父组件的事件 */
/** 定义 success 事件，用于操作成功后的回调 */
const emit = defineEmits(['close']);

const close = async () => {
  emit('close');
  dialog.visible = false;
};

// 选中的值
const selected = ref();

const settings = (item: MenuVO2) => {
  selected.value = item.menuId;
  if (item.selected && item.selected == true) {
    item.selected = false;
    // 调用删除接口
    delMenu(item.menuId).then((res) => {
      if (res.code == 200) {
        proxy?.$modal.msgSuccess('移除成功');
      }
    });
  } else {
    item.selected = true;
    // 调用添加接口
    addMenu({ menuId: item.menuId }).then((res) => {
      if (res.code == 200) {
        proxy?.$modal.msgSuccess('添加成功');
      }
    });
  }
};
const clickDiv = (item: MenuVO2) => {
  selected.value = item.menuId;
};
</script>
<style lang="scss" scoped>
img {
  width: 70px;
  height: 70px;
}

.el-dialog__body div.menu-container {
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
}

.el-dialog__body div.menu-container div {
  padding: 10px 0;
  width: 120px;
  height: 120px;
  border: 1px solid #dfe9f6;
  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 10px;
  position: relative;
}

.el-dialog__body div.menu-container div:hover {
  border: 1px solid #95c3ff;
  background: #cae4ff;
}

.selected {
  border: 1px solid #95c3ff;
  background: #cae4ff;
}
</style>
