<!--
@ 作者: 秦东
@ 时间: 2024-04-18 14:08:56
@ 备注: 设置自建应用
-->
<script lang="ts" setup>
import { appMenuTreeInfo, appSetInfo } from "@/api/date/type";
import { gainAppEditPsge } from "@/api/DesignForm/requestapi";

import { Search } from "@element-plus/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue";
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue";
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue";
import OpenAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue";
import AppSetUp from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue";
import ReleaseApp from "@/views/sysworkflow/lowcodepage/appPage/releaseApp/index.vue";

const props = defineProps({
  drawerWith: {
    type: Number,
    default: 0,
  },
  formKey: {
    type: String,
    default: "",
  },
  isShow: {
    type: Boolean,
    default: false,
  },
  groupKey: {
    type: String,
    default: "",
  },
  pickAppInfo: {
    type: Object,
    default() {
      return {};
    },
  },
});
const emits = defineEmits([
  "update:isShow",
  "update:svgName",
  "refreshPage",
  "accessapp",
]);
const squareUrl = "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
const drawerOpenOrClose = ref(false);
const tabsActive = ref(3);
const menusTree = ref<appMenuTreeInfo[]>([]);
const appCont = reactive<appSetInfo>({
  appKey: "1",
  appName: "未知应用",
  appSvg: "",
  state: 1,
  uuid: "1",
  describe: "",
});
const menuParentKey = ref<string>("");
const menuGroupShow = ref(false); //添加菜单分组
const appPageKey = ref<string>(""); //自定义App表单Id
/**
@ 作者: 秦东
@ 时间: 2024-04-19 15:47:12
@ 功能: 选择选项
*/
const handleClick = () => {};
/**
@ 作者: 秦东
@ 时间: 2024-04-23 09:56:19
@ 功能: 关闭
*/
const closeAppDraw = () => {
  emits("update:isShow", false);
//   emits("refreshPage");
//   tabsActive.value = 1;
  checkedMenu.value = "";
  appPageKey.value = "";
  props.formKey = "";
  isNew.value = false;
};
onMounted(() => {
  // gainAppContent()
});
watch(
  () => props.isShow,
  (val: boolean) => {
    if (val) {
      gainAppContent();
    }
  }
);
/**
@ 作者: 秦东
@ 时间: 2024-04-23 15:23:31
@ 功能: 获取app信息
*/
const gainAppContent = () => {
  let sendInfo = {
    id: props.formKey.toString(),
  };
  gainAppEditPsge(sendInfo).then((data) => {
    // console.log("获取app信息---》",data)
    menusTree.value = data.data.menuTree;
    appCont.appKey = data.data.appKey;
    appCont.appName = data.data.appName;
    appCont.appSvg = data.data.appSvg;
    appCont.state = data.data.state;
    appCont.uuid = data.data.uuid;
  });
};

/**
@ 作者: 秦东
@ 时间: 2024-04-23 16:57:39
@ 功能: 添加菜单分组
*/
const addMenu = (key?: string) => {
  if (key) {
    menuParentKey.value = key;
  } else {
    menuParentKey.value = "";
  }
  menuGroupShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-05-06 11:09:44
@ 功能: 创建页面
*/
const saveAppFormIsShow = ref(false);
const isNew = ref(false);
const addAppPageForm = (key?: string) => {
  saveAppFormIsShow.value = true;
  isNew.value = true;
  // console.log("新建-->")
};

/**
@ 作者: 秦东
@ 时间: 2024-05-18 09:00:00
@ 功能: 操作表单页面
*/
const checkedMenu = ref<appMenuTreeInfo>("");
const openAppPageForm = (val: appMenuTreeInfo) => {
  checkedMenu.value = val;
};
/**
@ 作者: 秦东
@ 时间: 2024-05-20 13:27:37
@ 功能: 编辑app页面
*/
const editAppInfo = (id: string) => {
  appPageKey.value = id;
  saveAppFormIsShow.value = true;
  isNew.value = false;
};
/**
@ 作者: 秦东
@ 时间: 2024-05-20 16:20:08
@ 功能: 重新初始化app
*/
const openAppPageInit = ref(null);
const updataPageInit = () => {
  openAppPageInit.value.gainAppFormPageInit();
};
watch(
  () => tabsActive.value,
  (val: number) => {
    if (val == 1) {
      openAppPageInit.value.gainAppFormPageInit();
    }
  }
);
/**
@ 作者: 秦东
@ 时间: 2024-06-28 08:46:12
@ 功能: 访问前端页面
*/
const accessRunApp = () => {
  closeAppDraw();
  emits("accessapp", props.pickAppInfo);
};
</script>
<template>
  <div class="drawerClass">
    <el-drawer
      v-model="props.isShow"
      title="设置/编辑自定义表单"
      :with-header="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :size="props.drawerWith"
    >
      <div class="common-layout">
        <el-container>
          <el-header class="headerBox">
            <div>
              <el-space wrap>
                <el-avatar shape="square" :size="25" :src="appCont.appSvg" />
                <el-text>{{ appCont.appName }}</el-text>
                <el-tag v-if="appCont.state == 1" type="success">已启用</el-tag>
                <el-tag v-else type="danger">已禁用</el-tag>
              </el-space>
            </div>
            <div>
              <el-tabs
                v-model="tabsActive"
                :stretch="true"
                class="tabsMain"
                @tab-click="handleClick"
              >
                <el-tab-pane label="① 页面管理" :name="1"> </el-tab-pane>
                <el-tab-pane label="② 集成&自动化" :name="2"> </el-tab-pane>
                <el-tab-pane label="③ 应用设置" :name="3"> </el-tab-pane>
                <el-tab-pane label="④ 应用发布" :name="4"> </el-tab-pane>
              </el-tabs>
            </div>
            <div>
              <el-button plain size="small" @click="accessRunApp">访问</el-button>
              <el-button type="danger" size="small" @click="closeAppDraw">关闭</el-button>
            </div>
          </el-header>
          <el-container v-show="tabsActive == 1">
            <el-aside class="asideBox">
              <el-row>
                <el-col :span="24" class="asideBoxSearch">
                  <el-input
                    v-model="input2"
                    style="width: 180px"
                    placeholder="搜索"
                    :suffix-icon="Search"
                  />
                  <el-dropdown>
                    <el-button type="primary" class="fa fa-plus" />
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="addAppPageForm">
                          <el-row>
                            <el-col :span="24">
                              <el-space wrap>
                                <svg-icon
                                  style="color: #eebe77"
                                  prefix="icon"
                                  icon-class="liuChengBiaoDan"
                                />
                                新建页面
                              </el-space>
                            </el-col>
                            <el-col
                              :span="24"
                              style="padding-left: 20px; font-size: 12px"
                            >
                              数据收集、事件记录<br />任务协同、业务审批
                            </el-col>
                          </el-row>
                        </el-dropdown-item>
                        <el-dropdown-item divided @click="addMenu">
                          <el-row>
                            <el-col :span="24">
                              <el-space wrap>
                                <svg-icon
                                  style="color: #337ecc"
                                  prefix="icon"
                                  icon-class="fenZhu"
                                />
                                新建分组
                              </el-space>
                            </el-col>
                            <el-col
                              :span="24"
                              style="padding-left: 20px; font-size: 12px"
                            >
                              应用项目管理
                            </el-col>
                          </el-row>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-col>
              </el-row>
              <el-scrollbar class="scroBox">
                <AppMenus
                  v-model:menus-tree="menusTree"
                  v-model:app-page-key="appPageKey"
                  :form-key="props.formKey"
                  :group-key="props.groupKey"
                  :app-cont="appCont"
                  :drawer-with="props.drawerWith"
                  @open-app-page-form="openAppPageForm"
                />
                <CreateAppFormPage
                  v-if="saveAppFormIsShow"
                  v-model:is-show="saveAppFormIsShow"
                  v-model:app-page-key="appPageKey"
                  :is-new="isNew"
                  :drawer-with="props.drawerWith"
                  :form-key="props.formKey"
                  :app-cont="appCont"
                  :group-key="props.groupKey"
                  :menu-id="props.formKey"
                  @gain-sun-app-content="gainAppContent"
                  @update-init="updataPageInit"
                />
              </el-scrollbar>
            </el-aside>
            <el-main class="mainBox">
              <el-scrollbar class="scroBox">
                <OpenAppFormPage
                  ref="openAppPageInit"
                  :form-key="props.formKey"
                  :group-key="props.groupKey"
                  :app-cont="appCont"
                  :drawer-with="props.drawerWith"
                  :menus-info="checkedMenu"
                  @edit-app-info="editAppInfo"
                />
              </el-scrollbar>
            </el-main>
          </el-container>

          <el-container v-if="tabsActive == 2"> 集成与自动化 </el-container>
          <el-container v-if="tabsActive == 3">
            <AppSetUp :app-cont="appCont" :group-key="props.groupKey" />
          </el-container>
          <el-container v-if="tabsActive == 4">
            <ReleaseApp :app-cont="appCont" :group-key="props.groupKey" />
          </el-container>
        </el-container>
      </div>
      <AppMenuGroup
        v-model:is-show="menuGroupShow"
        :menu-parent-key="menuParentKey"
        :app-cont="appCont"
        @update-menu="gainAppContent"
      />
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.common-layout {
  .el-header {
    padding-left: 10px;
    padding-right: 10px;
  }
  .headerBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f2f3;
    :deep(.el-tabs__nav-wrap::after) {
      position: static !important;
    }
    :deep(.el-tabs__header) {
      margin: 0 0 1px 0;
    }
  }
  .asideBox {
    width: 250px;

    border-right: 1px solid #f1f2f3;
    height: calc(100vh - 40px);
    .asideBoxSearch {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 10px;
    }
    .scroBox {
      height: calc(100vh - 95px);
      .el-menu {
        border-right: 0px;
      }
      li {
        padding-left: 10px;
        padding-right: 10px;
      }
      .menuBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .textCenter {
          display: flex;
          align-items: center;
        }
      }
      .el-menu-item {
        height: 40px;
      }
      .el-menu-item.is-active {
        color: var(--el-menu-active-color);
        background-color: #e4e4e4e4;
      }
      .el-menu-item:hover {
        background-color: #f1f1f1f1 !important;
      }
    }
  }
  .el-main {
    padding: 10px;
  }
  .mainBox {
    background-color: #f1f2f3;
    padding: 0px;
    .scroBox {
      height: calc(100vh - 40px);
    }
  }
}
</style>
