<template>
  <div class="fullHeight pages">
    <div class="title" v-if="contentShow">
      <div class="title_l flex">
        <!-- <img v-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="icon" />
        <span>{{$t('message.companyDiagram.pageTitle')}}</span> -->
        <img v-if="systemInfo.platformLogo" :src="systemInfo.platformLogo" class="logo" height="25" />
        <img v-else-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="logo" height="25" />
        <span v-if="company != 'nanchang'" style="cursor: pointer" @click="back">{{systemInfo.platformName}} </span>
        <span v-if="company != 'nanchang'"> - </span>
        <span v-if="company != 'nanchang'">供应商管理首页</span>
        <!-- 南昌地铁头部样式 -->
        <span v-if="company == 'nanchang'" style="cursor: pointer" @click="back">{{$t('message.companyDiagram.pageTitle')}}</span>
      </div>
      <!-- <div class="title_near flex" v-if="![1,2].includes($store.state.userInfo.accountType)">
        <userChange></userChange>
      </div> -->
      <div class="title_near-tow flex" v-if="![11,1,2].includes($store.state.userInfo.accountType) && workSpaceShow">
        <div class="divider-line"></div>
        <centerChange></centerChange>
      </div>
      <div
        class="title_r flex"
      >
        <account></account>
      </div>
    </div>
    <div class="menuBox" v-if="contentShow">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#5181F6"
        router
      >
      <div
          v-for="(item, index) in menuList"
          :key="index"
          class="menuInnerBox"
        >
          <el-menu-item class="firstLevelMenu"
            v-if="!hasSubMenu(item.menuList)"
            :index="item.modulePath"
          >
            {{ item.moduleName}}
          </el-menu-item>
          <el-submenu
            :index="item.modulePath"
            v-else
          >
            <template slot="title">{{
              item.moduleName
            }}</template>
            <el-menu-item
              :index="data.path"
              v-for="(data, i) in item.menuList"
              :key="i"
              >{{ data.menuName }}</el-menu-item
            >
          </el-submenu>
        </div>
        <!-- <el-menu-item :index="item.modulePath" v-for="(item,index) in menuList" :key="index">{{item.moduleName}}</el-menu-item> -->
      </el-menu>
    </div>
    <div class="pageContainer" v-if="contentShow">
      <div class="pageDataContainer">
        <router-view></router-view>
      </div>
    </div>
    <!-- 选择组织 -->
    <el-dialog
      title="选择组织"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="selectGroupDialog"
    >
      <div class="content-list" :style="{height: groupListData.length > 4?'300px':'auto'}">
        <vue-scroll style="height: 100%;">
          <div
            class="content-list-item"
            v-for="(item, index) in groupListData"
            :key="index"
            @click="selectedGroupData(item)"
          >
            <!-- <i class="el-icon-trophy-1"></i> -->
            <img src="@/assets/images/headerImg/icon3.png" />
            <span>{{ item.companyName }}</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </vue-scroll>
        <!-- <div class="content-list-item" @click="selectedGroupData()">
          <img src="@/assets/images/headerImg/icon4.png" />
          <span>{{ $store.state.userInfo.account }}</span>
          <div>个人租户</div>
          <i class="el-icon-arrow-right"></i>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import account from "@/components/account.vue";
import userChange from "@/components/userChange.vue";
import centerChange from "@/components/centerChange.vue";
import { getGroupListByCompanyApi, jumpLargeUserInfoApi } from "@/assets/js/api/loginSign.js";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
import {
  getNewUserAllModulePageApi,
} from "@/assets/js/api/jxjadmin.js";
export default {
  data() {
    return {
      groupListData: [],
      selectGroupDialog: false,
      contentShow: false,
      LOGO_white:LOGO_white,
      currentUrl:'',
      menuList:[
        { moduleName: '首页', modulePath: "/supplierIndex" }
      ],
        systemInfo:{
            "loginBackgroundImage": "",
            "loginLogo": "",
            "platformLogo": "",
            "platformName": "智慧工地云平台"
        },
      workSpaceShow: false
    };
  },
  components:{
    account,
    userChange,
    centerChange
  },
  created() {
    if (this.$store.state.selectedGroupSn && this.$store.state.projectSn) {
      this.selectGroupDialog = false;
      this.contentShow = true;
    }
    this.getGroupTreeData();
    this.company = COMPANY;
    console.log(COMPANY)
    if(this.$store.state.projectSn){
      this.getModuleList();
    }
  },
  mounted(){
    // this.getAllModule()
    if(localStorage.getItem('systemInfo')){
      this.systemInfo=JSON.parse(localStorage.getItem('systemInfo'))
    }
    // document.title='企业后台'
    console.log('mounted',this.$route.path)
    
  },
  methods: {
    // 查询全部模块(拿到工作流的模块菜单)
    getModuleList() {
      getNewUserAllModulePageApi({
        projectSn: this.$store.state.projectSn,
        moduleType: 7,
        userId: this.$store.state.userInfo.userId,
      }).then((res) => {
        let all = res.result.moduleList;
        if (all.length == 0) {
          this.workSpaceShow = false;
          return;
        } else {
          this.workSpaceShow = true;
        }
      });
    },
    //获取详情
    getDataDateils() {
      let data = {
        projectSn: this.projectSn,
      };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          this.$store.commit("setProDetail", res.result);
        }
      });
    },
    // 默认选中已选中组织的第一个项目
    selectedDefaultProject(obj) {
      if (obj.list && obj.list.length > 0) {
        obj.list.map((item) => {
          this.selectedDefaultProject(item);
        });
      } else {
        this.projectSn = this.$store.state.projectSn || "";
        if (!this.projectSn) {
          // 加判断是为了在循环中只选中第一个
          this.projectSn = obj.sn;
          console.log(obj,'我的2356789')
          // 修改全局projectSn
          this.$store.commit("setProjectSn", obj.sn);
          this.contentShow = true;
          this.getDataDateils();
        }
      }
    },
    // 点击选中组织
    selectedGroupData(item) {
      console.log(item,666777888)
      let data = {
        token: this.$store.state.userInfo.token,
        headquartersSn: item.companySn
      };
      jumpLargeUserInfoApi(data).then((res) => {
        console.log(res,'重新获取信息');
        if(res.result){
          this.$store.commit("setUserInfo", res.result);
          if (item) {
            this.selectedDataSn = item.companySn;
            this.$store.commit("setSelectedGroupSn", item.companySn); // 存储选中的组织Sn
            this.selectedDefaultProject(item);
          } else {
            let storeVal = this.$store.state.userInfo;
            this.selectedDataSn = storeVal.headquartersSn;
            this.$store.commit("setSelectedGroupSn", storeVal.headquartersSn); // 存储选中的组织Sn
            // this.selectedDefaultProject(storeVal.userInfo);
          }
          this.selectGroupDialog = false;
        }
      });
    },
    getGroupTreeData() {
      let data = {
        userId: this.$store.state.userInfo.userId,
        // headquartersSn: this.$store.state.userInfo.headquartersSn
      };
      getGroupListByCompanyApi(data).then((res) => {
        // console.log(res);
        if (res.code == 200 && res.result) {
          if(res.result.length > 0){
            this.groupListData = res.result;
            this.$store.commit("setGroupTreeList", res.result); // 存储组织树数据
            if(!this.$store.state.projectSn){
              this.selectGroupDialog = true;
            }
          } else {
            this.$store.commit("setGroupTreeList", []); // 存储组织树数据
            this.selectGroupDialog = false;
            this.contentShow = true;
          }
        }
      });
    },
    hasSubMenu(list) {
      //用于判断有没有下级菜单
      let onoff = false;
      // console.log("list", list);
      if (list && list.length > 0) {
        list.forEach((element) => {
          if (element.menuName) {
            onoff = true;
            return;
          }
        });
      }
      // console.log("onoff", onoff);
      return onoff;
    },
    getAllModule(){
            var half = this.$store.state.userInfo.menuAuthority.moduleList
            half.forEach(element => {
                if(element.moduleType==3){
                    this.menuList.push(element)
                }
            });
    //   getAllModuleApi({moduleType:4}).then(res => {
    //       if (res.success) {
    //           var all = res.result
    //           all.forEach((element,index) => {
    //             all[index].operation=false
    //             half.forEach(element2 => {
    //               if(element2.moduleId==element.moduleId){
    //                 all[index].operation=true
    //                 all[index].menuList=element2.menuList
    //               }
    //             });
    //           });
    //           this.menuList=all
    //       }
    //   })
    },
    handleSelect(url) {
      // this.$store.commit('setCurrentUrl',url)
      // this.$store.dispatch('currentUrl',url)
    },
    back() {
      this.$router.push("/firm/projectManage")
    }
  },
};
</script>
<style lang="less" scoped>
.el-menu.el-menu--horizontal {
  box-sizing: border-box;
  padding: 0 30px 4px;
  border-bottom: none;
}
.el-menu--horizontal {
  .el-menu-item,
  /deep/.el-submenu__title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    letter-spacing: 0;
    height: 44px;
    line-height: 44px;
    padding: 0;
    margin-right: 80px;
    &:hover,
    &:focus {
      background-color: transparent;
    }
    &:hover {
      color: #5181f6;
    }
  }
}
/deep/.el-submenu__title{
  padding-right: 20px!important;
  .el-submenu__icon-arrow{
    right: 0px;
  }
}
.el-menu--horizontal .firstLevelMenu.is-active,/deep/.is-active .el-submenu__title {
  border-bottom: 3px solid #409eff;
}
.menuInnerBox {
  display: inline-block;
}
// .el-menu.el-menu--horizontal {
//   box-sizing: border-box;
//   padding: 0 162px 4px;
//   border-bottom: none;
// }
// .el-menu--horizontal > .el-menu-item {
//   font-family: PingFangSC-Medium;
//   font-size: 14px;
//   letter-spacing: 0;
//   height: 44px;
//   line-height: 44px;
//   padding: 0;
//   margin-right: 70px;
// }
// .el-menu--horizontal > .el-menu-item.is-active {
//   border-bottom: 3px solid #409eff;
// }
// /deep/.el-submenu__title{
//   padding-right: 20px!important;
//   .el-submenu__icon-arrow{
//     right: 0px;
//   }
// }
// .el-menu--horizontal .firstLevelMenu.is-active,/deep/.is-active .el-submenu__title {
//   border-bottom: 3px solid #409eff;
// }
// .menuInnerBox {
//   display: inline-block;
// }
.menuBox{
  position: relative;
}
.title {
  width: 100%;
  color: #fff;
  background-image: linear-gradient(#262d47, #343d5f);
  box-sizing: border-box;
  padding: 0 23px;
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: flex-end
}
.title_l {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  margin-right: 50px;
  img {
    margin-right: 14px;
  }
}
.title_near{
  margin-right: 50px;
}
.title_near-tow{
  .divider-line{
    width: 1px;
    height: 16px;
    background: #FFFFFF;
    margin-right: 50px;
  }
}
.title_r {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 弹框选择内容
.content-list {
  &-item {
    .flex();
    padding: 10px 15px;
    border: 1px solid #dadbdb;
    border-radius: 5px;
    cursor: pointer;
    img {
      width: 30px;
      height: 30px;
    }
    // >div{
    //   border: 1px solid #7299F8;
    //   border-radius: 5px;
    //   background-color: #E3F6FF;
    //   padding: 5px 15px;
    //   color: #5A88F7;
    // }
    > span:nth-child(2) {
      margin: 0px 15px 0px 10px;
    }
    > div {
      padding: 3px 10px;
      color: #79acfa;
      background-color: #e4f5ff;
      border: 1px solid #99c3fb;
      border-radius: 5px;
      margin-top: 2px;
      font-size: 10px;
    }
    /deep/.el-icon-arrow-right {
      margin-left: auto;
    }
  }
  &-item:not(:last-child) {
    margin-bottom: 10px;
  }
}
/deep/.el-dialog {
  width: 25%;
  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 15px;
  }
}
</style>