<!--
 * @Author: Devin
 * @Date: 2023-01-11 16:29:53
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-23 16:39:57
 * @Description: demo入口文件
-->
<template>
  <common-layer
    :menu-list="menuList"
    :user-info="userInfo"
    :header-info="headerInfo"
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    :breads="breadData"
    @handle-change-collapse="handleChangeCollapse"
  >
    <!-- <template #breadLeft>
      <div>左侧说明文件</div>
    </template>
    <template #breadRight>
      <el-button size="small" type="primary">右侧插槽位置</el-button>
    </template> -->
  </common-layer>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import logoImg from './assets/images/logo.svg';
import { getSystemConfig } from './api/flow';

const store = useStore();
const route = useRoute();

const routeMetaBread = computed(() => route.meta.breadcrumb);
const breadData = computed(() => store.getters.breadData);

console.log(store);

const menuList = ref<any>([
  {
    label: '流程编排',
    name: 'flow-system',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/flow-system'
  },
  {
    label: '子流程管理',
    name: 'sub-flow',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/sub-flow'
  },
  {
    label: '上线管理',
    name: 'manager',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/manager'
  }
]);

const headerInfo = ref<any>({
  title: '快键 服务逻辑编排',
  logo: logoImg
});

const userInfo = ref<any>({
  userAccount: 'deployer'
});
const commonds = ref<any>([
  { label: '个人中心', commond: 'user' },
  { label: '退出登录', commond: 'logout' }
]);
const asideWidth = ref<any>('260px');
const isCollapse = ref<any>(false);

function handleChangeCollapse(collapse: any) {
  isCollapse.value = collapse;
  if (isCollapse.value) {
    asideWidth.value = '70px';
  } else {
    asideWidth.value = '260px';
  }
}

const exposePath = <any>['/flow-module', '/flow-detail'];

// 查询全局配置
function getGlobalConfig() {
  getSystemConfig().then((res) => {
    if (res.resultCode === '0') {
      localStorage.setItem('GLOBAL_CONFIG', JSON.stringify(res.result));
    } else {
      localStorage.setItem('GLOBAL_CONFIG', '{}');
    }
  });
}

getGlobalConfig();
watch(
  route,
  () => {
    console.log(route.path);
    console.log(exposePath.includes(route.path));

    if (!exposePath.includes(route.path)) {
      store.commit('setBreadData', routeMetaBread.value);
    }
  },
  { deep: true }
);
</script>

<style>
html,
body {
  height: 100%;
}
#app {
  height: 100%;
  background-color: #f9f9f9;
  font-size: 12px;
  font-family: 'PingFang SC';
  user-select: none;
}
</style>