<template>
  <div>
    <dm-layout is-app :first-menu-code="menuCode" :force-show-aside="showLeft" :class="{ 'hide-left': !showLeft }">
      <!-- maside插槽 替换asidemenu title -->
      <div slot="maside">
        <!-- :hide-timeout="100000" -->
        <el-dropdown class="m-title" :hide-on-click="false" v-if="project.includes('card')">
          <div class="el-dropdown-link">
            <div><p class="ellipsis">{{ currentAreaName || '未选择域' }}</p><i class="el-icon-arrow-down el-icon--right"></i></div>
          </div>
          <el-dropdown-menu slot="dropdown" class="m-title-menu">
            <el-dropdown-item v-for="(item, idx) in areaSubList" :key="`${item.areaId}-${idx}`" :class="{ checked: item.areaId === currentAreaId }">
              <dl @click="setCurrentApp(item)">
                <dd>
                  <span>{{ item.areaName }}</span>
                  <el-tag v-if="item.deleteFlag" effect="plain" class="ml5" type="info">已删除</el-tag>
                </dd>
              </dl>
              <i class="el-icon-check select-icon"></i>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <aside-menu style="margin-top:10px" ref="asideMenu" />
      </div>
      <!-- bread插槽 -->
      <div slot="bread">
        <div class="app-list__wrapper" v-if="appListVisible && appList.length !== 0" style="position:absolute">
          <span>当前福利支持以下应用使用：</span>
          <ul class="app-list">
            <li v-for="(item, idx) in appList" :key="idx" @click="goLink(item)">
              <img :src="item.iconUrl" draggable="false" />
              <span :title="item.appName" class="ellipsis-100">{{ item.appName }}</span>
            </li>
          </ul>
        </div>
        <app-info :code="moduleCode" />
      </div>
    </dm-layout>
    <el-dialog :visible="noAreaWarnVisible && project.includes('card')" append-to-body width="500px" :close-on-press-escape="false" :close-on-click-modal="true" :show-close="false"  lock-scroll>
      <div class="text-center">
        <p class="gray02 fz16" style="display:flex;justify-content: center;align-items: center;"><i class="el-icon-warning fz30 mr5 warning-color"></i>暂无资源权限</p>
        <p class="fz13 gray03 mt20">没有资源权限，如：可操作的会员卡、服务号等，请联系管理员进行配置</p>
      </div>
      <span slot="footer">
        <div class="text-center pb20">
          <el-button @click="$router.push('/index');">返回首页</el-button>
        </div>
      </span>
    </el-dialog>
    <switch-page />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import asideMenu from './aside-menu.vue';
import switchPage from '@/components/libs/switch-page';
import { reRreshRoute } from '@/utils/index';
import { dealMkStorage } from '@/utils/common';
import commonApi from '@/api/common.js';
const { getSubappList, getWelfareAppList }  = commonApi;
// const { getAppInfo, loginUserMenuOfApp, getSubappList }  = commonApi;
export default {
  name: 'Layout',
  components: {
    asideMenu,
    switchPage
  },
  data() {
    return {
      noAreaWarnVisible: false, // 没有域list警告(子应用列表请求后为空显示)
      appList: [],
    };
  },
  mounted() {
    this.init();
    this.getAppList();
  },
  methods: {
    goLink(item) {
      localStorage.setItem('appApplicationId', item.applicationId);
      window.open(item.authorizeUrl, '_blank', 'noopener');
    },
    getAppList() {
      getWelfareAppList().then(res => {
        this.appList = res.result || [];
      });
    },
    // 处理提交创建子应用的回调
    handleSubApp({ type, areaId, reason }) {
      this.addSubResVisible = true;
      this.$refs.addSubRes.setData({ type, areaId, reason });
    },
    // 添加子应用
    addSubApp() {
      this.subAppDialogVisible = true;
    },
    // 设置当前子应用
    setCurrentApp({ areaId }) {
      // 【ID1024023】 产品需求：应用右上角切换服务号或会员卡后跳转至当前应用的首页，不再停留在当前页面
      this.$router.push('/' + this.$route.path.split('/')[1]);
      // if (this.$route.meta.type && this.$route.meta.type !== 'add') {
      //   this.$tips({ message: '当前页不可切换状态', type: 'warning' });
      //   return;
      // }
      this.$store.commit('setCurrentSubApp', areaId);
    },
    async init() {
      const moduleCode = this.moduleCode;

      // 获取域列表
      const subApp = await getSubappList();
      this.$store.commit('setSubAppList', subApp.result.result || []);
      if(this.areaSubList.length) {
        try {
          const areaId = this.$route.query.areaId || ''; // url中代入的aredId
          if(areaId && this.areaSubList.map(v => v.areaId).includes(areaId)) {
            // url存在且在list中存在  设置为url中指定的数据
            this.$store.commit('setCurrentSubApp', areaId); // 设置当前子应用id
            return;
          }
          const mCodeValue = dealMkStorage(moduleCode);
          if(mCodeValue && this.areaSubList.some(v => v.areaId == mCodeValue)) {
            // 存在 且在当前子应用list里（防止切换账号）
            this.$store.commit('setCurrentSubApp', mCodeValue); // 设置当前子应用id
          } else {
            // 不存在
            this.$store.commit('setCurrentSubApp', this.areaSubList[0].areaId); // 设置当前子应用id
          }
        } catch (error) {
          this.$store.commit('setCurrentSubApp', this.areaSubList[0].areaId); // 设置当前子应用id
        }
      } else {
        this.noAreaWarnVisible = true;
      }

    }
  },
  computed: {
    ...mapState([
      'default_areaId',
      'currentAreaName',
      'currentAreaId',
      'areaSubList',
      'project',
      'menu',
      'extraHideLeft',
      'appInfo',
      'lock',
      'moduleCode'
    ]),
    showLeft() {
      return !(this.project == '' || this.project == 'index');
    },
    appListVisible() {
      let routes = [ '/gic-card/list', '/card-package/list', '/gift-manage/real-gift', '/gift-manage/virtual-gift' ];
      return routes.some(i => i.indexOf(this.$route.path) > -1);
    }
  },
  watch: {
    currentAreaId(newv, oldV) {
      // 有左侧的根据监听currentAreaId的变化
      reRreshRoute();
    },
  }
};
</script>


<style lang="scss" scoped>
.app-list {
  display: flex;
  margin-left: 8px;
  &__wrapper {
    color: #606266;
    font-size: 13px;
    position: absolute;
    left: 200px;
    display: flex;
    margin-top: -5px;
    align-items: center;
  }
  img {
    width: 24px;
    height: 24px;
  }
  li {
    height: 28px;
    background-color: #F5F7FA;
    border-radius: 2px;
    padding: 0 8px 0 3px;
    display: flex;
    align-items: center;
    cursor: pointer
  }
  li + li {
    margin-left: 10px;
  }
  li:hover {
    transition: transform 0.2s ease;
    transform: translateY(-2px);
  }
}
.simu-el-item {
  margin-top: 6px;
  padding-left: 20px;
  cursor: pointer;
  color: #909399;
  font-size: 13px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e4e7ed;
}
.tips {
  div {
    height: 22px;
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
    &.lighter {
      opacity: 0.8;
    }
  }
}
.m-title {
  display: block;
  // height: 50px;
  line-height: 50px;
  .el-dropdown-link {
    display: block;
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(48, 49, 51, 1);
    line-height: 22px;
    margin: 14px 20px;
    > div {
      max-width: 100%;
      display: inline-block;
      position: relative;
      p {
        padding-right: 10px;
      }
      i {
        position: absolute;
        right: -8px;
        top: 5px;
      }
    }
  }
}
.m-title-menu {
  left: 22px !important;
  /deep/ {
    .el-dropdown-menu__item {
      position: relative;
      padding-right: 50px;
      &.checked {
        color: $blue;
        background-color: #ecf5ff;
      }
    }
    .popper__arrow {
      left: 36px !important;
    }
  }
  dl {
    padding: 10px 0 10px;
    dd {
      height: 14px;
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
      color: $gray02;
      display: flex;
      align-items: center;
    }
    dt {
      line-height: 17px;
      margin-top: 6px;
      /deep/ label {
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: $gray03;
        line-height: 17px;
      }
    }
  }
  .checked .select-icon {
    display: block;
  }
  .select-icon {
    position: absolute;
    right: 10px;
    top: 30%;
    font-size: 14px;
    display: none;
    color: $blue;
  }
  /deep/ .exp.el-dropdown-menu__item--divided {
    height: 40px;
    line-height: 34px;
  }
  .exp {
    color: $gray02 !important;
    height: 34px;
    line-height: 34px;
    &:hover {
      background: $gray-disable;
    }
  }
}
.layout.hide-left {
  padding-left: 0 !important;
  /deep/ {
    .dm-aside-menu {
      display: none;
    }
    .dm-bread {
      padding-left: 20px !important
    }
  }
}
.lock-block {
  text-align: center;
  span.png {
    width:42px;
    height: 42px;
    background: url('../../assets/images/yqts.png') center center;
    display: inline-block;
  }
}
</style>
