<template>
  <div class="top_menu-layout">
    <div class="top_menu-header" v-if="systemKey&&systemKey!=='app-thirdmall'">
      <router-link key="collapse" class="top_menu-header-logo" to="/">
        <img v-if="limitInfo.app_icon" :src="limitInfo.app_icon" class="sidebar-logo-h5">
        <h1 class="sidebar-title">{{ limitInfo.app_title }} </h1>
      </router-link>
      <div class="top_menu-header-right">
        <el-switch
          v-model="showMarket"
          active-text="开启"
          inactive-text="关闭"
          @change="handleSwitchChange">
        </el-switch>
      </div>
    </div>
    <transition name="topMenuFade">
      <div  class="top_menu-container">
        <!-- <div v-if="showMarket" class="top_menu-sidebar">
          <TopNavMenu/>
        </div> -->
        <div class="top_menu-main">
          <AppMain />
        </div>
      </div>
    </transition>
    <!-- <div v-else class="hide_market">
      <div class="app-container__image">
        <img src="@/assets/system.png"/>
      </div>
    </div> -->
  </div>
</template>

<script>
import TopNavMenu from "./TopNavMenu"
import Logo from "./Sidebar/Logo.vue"
import AppMain from "./AppMain"
import { mapState, mapActions,mapMutations } from  'vuex';
import setting from "../../../settings"
export default {
  name: 'TopMenuLayout',
  components: {
    TopNavMenu,
    Logo,
    AppMain
  },
  computed:{
    ...mapState(['logo','title']),
    isReady(){
      return this.$store.state.layoutReady
    }
  },
  data() {
    return {
      showMarket: true,
      limitInfo: {},
      systemKey:'',
    }
  },
  created(){
    console.log(setting,'aaa')
    this.systemKey = setting.system;
    if(this.systemKey!=='app-thirdmall'){
      if(!this.smscoreDetail) return this.$message.error('schema 未配置 smscoreDetail');
      if(this.isReady===undefined){
        this.smscoreDetail().then(res => {
          this.limitInfo = Object.assign({}, res.data, {
            app_icon: this.getImageFullPath(res.data.app_icon)
          });
          this.showMarket = res.data.is_open === "Y";
          this.handleRouter();
        }).catch(err => {
          this.$message.error('获取配置失败');
        })
      }else{
        this.$store.dispatch('smscoreDetail', {})
          .then(res => {
            this.limitInfo = Object.assign({}, res, {
              app_icon: this.getImageFullPath(res.app_icon)
            });
            this.showMarket = res.is_open === "Y";
            if(!this.isReady){
              this.handleRouter();
            }
            this.SET_LAYOUT_READY(true)
          }).catch(err => {
            console.log(err,'err')
            this.$message.error('获取配置失败');
          })
        }
        
    }
  },
  methods:{
    ...mapActions("partnerSmscore",['smscoreDetail', "smscoreSwitch"]),
    ...mapMutations(['SET_LAYOUT_READY']),
    handleSwitchChange(flag){
      console.log(this.limitInfo.app_title,'limitInfo.app_titlelimitInfo.app_title');
      if(!flag){
        this.$confirm(`确定关闭${this.limitInfo.app_title}功能吗？关闭后，全部${this.limitInfo.app_title}规则将自动失效`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.handleSwitchApi(flag);
        }).catch(() => {
          this.showMarket = !flag;
        })
      }else{
        this.handleSwitchApi(flag);
      }
    },
    handleSwitchApi(flag){
      if(!this.smscoreSwitch) return this.$message.error('schema 未配置 smscoreSwitch');
      let is_open = flag ? "Y" : "N";
      this.smscoreSwitch({is_open}).then(res => {
        this.showMarket = flag;
        this.handleRouter();
      }).catch(err => {
        this.$message.error('操作失败');
      })
    },
    handleRouter(){
      if(this.showMarket){
        this.$router.replace({path: setting.home});
      }else{
        this.$router.replace({path: setting.index});
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.topMenuFade-enter-active {
  transition: opacity 1.5s;
}

.topMenuFade-enter,
.topMenuFade-leave-to {
  opacity: 0;
}
.top_menu-layout{
  .top_menu-header{
    position: fixed;
    z-index: 999;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    padding: 0 20px;
    .top_menu-header-logo{
      display: flex;
      align-items: center;
      .sidebar-title{
        font-size: 16px;
      }
      .sidebar-logo-h5{
        width: auto;
        height: 30px;
        margin-right: 10px;
      }
    }
    .top_menu-header-right{
      display: flex;
      align-items: center;
    }
  }
  .top_menu-container{
    padding: 20px;
    .top_menu-sidebar{
      border-bottom: 1px solid #DDDDDD;
      ::v-deep .sub-iconfont{
        display: none !important;
      }
      ::v-deep .el-menu.el-menu--horizontal{
        display: flex;
        border-bottom: none;
      }
      ::v-deep .el-submenu__title{
        padding: 0 40px 0 20px;
      }
    }
    .top_menu-main{
      min-height: 100%;
      position: relative;
      margin-top: 50px;
    }
  }
  .hide_market{
    .app-container__image{
      max-width: 500px;
      margin: 100px auto;
      & > img {
        width: 100%;
      }
    }
  }
}
</style>
