<template>
    <div class="KanBan">
        <div class="top">
          <div class="topCon">
            <div class="title">
              <span v-if="userinfo.orgName">{{userinfo.orgName}}</span >
              <span style="color: #0663FE;font-weight: 600;">{{ userinfo.schoolName }}</span>
              <span style="color: #0663FE;cursor: pointer;font-weight: 600;" v-if="isIndex2 == 2" @click="gotoli">返回校区</span>

            </div>
            <div class="person">
              <div class="person_name">
                <img
                 @click="openData()"
                style="width: 40px;height: 40px;object-fit: cover;border-radius: 50%; cursor: pointer;" 
                :src="userinfo.headportrait ? userinfo.headportrait : require('../../assets/img/toux2.png')" alt="">
                <div class="personInfo">
                  <div class="personInfoTit">
                    {{  userinfo.username }}
                  </div>
                  <div class="personInfoBri">
                    {{ userSuffix(userinfo.accountNumber) }}
                  </div>
                </div>
              </div>
              <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
            </div>
          </div>
        </div>
        <div class="midBlo">
            <div class="buttonArea">
                <div :style="{width: '500px',display: 'flex',justifyContent : userinfo.role == 1 && userinfo.rrole == 1 && userinfo.type ==1? 'space-between' : 'center'}">
                    <div class="btnDiv"  :class="{ active: isActive === 1 }" >
                        <div v-if="userinfo.role == 1 && userinfo.rrole == 1 && userinfo.type ==1" @click="setActive(1)">
                            数据看板
                        </div>
                    </div>
                    <div class="btnDiv" :class="{ active: isActive === 2 }" @click="setActive(2)">集团特色</div>
                    <div class="btnDiv" :class="{ active: isActive === 3 }" >
                        <div v-if="userinfo.role == 1 && userinfo.rrole == 1 && userinfo.type ==1"  @click="setActive(3)">
                            校区入口
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mainArea">
                <div v-if="(isActive === 1 || isActive === 2) && schList.length">
                    <schoolArea :schId="schId" :schOrg="schOrg" :schList="schList" @cutSch="cutSch"/>
                </div>

                <div class="right_content">
                    <div class="Con" v-if="isActive === 1">
                        <!-- <AdataKanban></AdataKanban> -->
                         <dataBoardNew :oid="schId" :org="schOrg" :userid="userinfo.userid"/>
                    </div>
                    <div class="Con" v-if="isActive === 2">
                        <AschoolFeature :schId="groupoId" :schOrg="grouporgCopy"></AschoolFeature>
                    </div>
                    <div class="Con" v-if="isActive === 3">
                        <AquickEntrance :key="isActive"></AquickEntrance>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import schoolArea from '../../components/schoolArea.vue';
// import AdataKanban from './components/AdataKanban';
import dataBoardNew from './components/dataBoardNew';

import AquickEntrance from './components/AquickEntrance';
import AschoolFeature from './components/AschoolFeature';
import { mapGetters, mapActions } from 'vuex';
import { loginOut } from '@/api/user';
import store from '../../store'
import { API_CONFIG } from "../../common/apiConfig.js";

export default {
    name:'kanBan',
    components: {
        schoolArea,
        // AdataKanban,
        dataBoardNew,
        AquickEntrance,
        AschoolFeature
    },
    computed: {
    ...mapGetters(['userinfo','userinfo2','fromL','appSign']),
    // 去除账号后缀
    userSuffix(){
      return function(val) {
        let userName = JSON.parse(JSON.stringify(val))
        const regEmail = new RegExp("^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
        
        // // 判断用户输入账户带不带后缀
        if (!regEmail.test(userName)) {
          console.log('111');
        } else {
          const parts = userName.split('@');
          userName = parts[0];
        }
        return userName
      }
    },
  },
    data() {
        return {
            isActive: 1,
            isIndex2:'',
            schId:'',
            schOrg:'',
            schList:[],
            groupoId:'',
            grouporg:'',
            grouporgCopy:'',

        }
    },
    methods: {
        cutSch(val){
            console.log('val',val);
            this.schId = val.oid
            this.schOrg = val.org
            // 这是为了获取集团特色总览数据的org
            //  this.isActive == 2 是为了使this.groupoId = '',不然学校只有一个校区的时候修改总览就会出现错误（会把校区的给修改了）
            if(!val.org && this.isActive == 2){
                console.log('555');
                
                this.grouporgCopy = this.grouporg
                this.groupoId = ''
            }else{
                console.log('666');
                
                this.grouporgCopy = val.org
                this.groupoId = val.oid
            }
        },
        ...mapActions({
            logout: 'user/logout'
        }),
        // 返回首页
        async gotoli(){
            await store.commit('user/SET_AppSIGN', '')

            this.$router.push('/homepageL');
        },
        // 退出登录
        async handleLogout() {
            this.$confirm('确定退出吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                loginOut()
                .then(async () => {
                    this.$message({
                    message: '退出成功',
                    type: 'success'
                    });
                    await this.logout();
                    // this.$router.push('/login');
                })
                .catch(err => {
                    console.error(err);
                });
            }).catch(() => {
                // 取消操作
            });
        },
        // 查询同级查询学校列表
        getSchoolList(){
            let params = [
                {
                    functionName: API_CONFIG.getliyuanorgPid.functionName,
                    org:this.userinfo.org
                },
            ];

            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {
                    console.log('res',res);
                    // console.log('JSON.parse(res.data[0][0].json)',JSON.parse(res.data[0][0].json));
                    
                    if (res.data != 0) {
                        let data = JSON.parse(res.data[0][0].json).admin.school.list
                        this.grouporg = res.data[0][0].id
                        this.schList = data
                    }
                    
                })
                .catch((err) => {
                    console.log(err);
                    this.$message.error("获取校区栏失败");
                });
        },
        // 导航栏切换
        setActive(Index) {
             if(!this.schOrg && this.userinfo.org && Index == 2){
                console.log('555');
                
                this.grouporgCopy = this.grouporg
                this.groupoId = ''
            }else{
                console.log('666');
                
                this.grouporgCopy = this.schOrg
                this.groupoId = this.schId
            }
            this.isActive = Index; 
        }
    },
    mounted() {
        const index = this.$route.query.index; // 123
        console.log(index);
        // 超级管理员登录进入页面，默认展示第一个校区的数据看板
        if (this.userinfo.role == 1 
        && this.userinfo.rrole == 1 
        && this.userinfo.type ==1 
        && this.fromL.admin.school.list  //判断这个是，一般默认为展示第一个校区，没有校区的话展示自己的校区
        && this.fromL.admin.school.list[0]
        && this.fromL.admin.school.list[0].children
        && this.fromL.admin.school.list[0].children.length) {
            console.log('111');
            // this.schList = this.fromL.admin.school.list
            this.schId = this.fromL.admin.school.list[0].children[0].schoolid
            this.groupoId = this.fromL.admin.school.list[0].children[0].schoolid
            this.schOrg = this.fromL.admin.school.list[0].children[0].orgid
            this.grouporgCopy = this.fromL.admin.school.list[0].children[0].orgid

        }else{
            console.log('222');
            this.schId = this.userinfo.organizeid
            this.groupoId = this.userinfo.organizeid
            this.schOrg = this.userinfo.org
            this.grouporgCopy = this.userinfo.org
        }

        // 查询组织pid  和为了获取集团特色总览数据的org

        // bar侧边栏的数据只有组织才有，如果获取的是学校的json,则不会有bar
        if (this.userinfo.org) {
            this.getSchoolList()
        }


        if (index == 2) {
            this.isActive = 2
            this.isIndex2 = 2
        }else if (index == 1) {
            this.isIndex2 = 2
        }
        
        
    }
}
</script>
<style scoped>
.top{
  width: 100%;
  display: flex;
  height: 60px;
  box-sizing: border-box;
  padding-right: 10px;
}
.midBlo{
    height: calc(100% - 60px);
    overflow: hidden;
}
.topCon{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.title{
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #969BA3;
  display: flex;
  gap: 11px;
  display: flex;
}
.person{
  display: flex;
  align-items: center;
}
.person_name{
  display: flex;
  gap: 9px;
}
.personInfo{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0 2px;
  box-sizing: border-box;
}
.personInfoTit{
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: #000000;
}
.personInfoBri{
  font-family: PingFang SC;
  font-weight: 300;
  font-size: 10px;
  line-height: 100%;
  color: #969BA3;
}
.KanBan {
    background-color: #FAFAFA;
    /* 设置高度为视口高度 */
    height: 100%;
    padding: 0  120px;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.KanBan_top {
    border-radius: 10px;
    width: 69vw;
    height: 144px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Con{
    width: 100%;
}
.top_textArea {
    margin-left: 23px;
}

.top_title {
    font-size: 30px;
    font-weight: bold;
    display: flex;
    margin-bottom: 8px;
}

.top_title div {
    color: #0354d7;
    margin: 0 7px;
}

.imgArea {
    margin-right: 23px;
}

.imgArea img {
    width: 96px;
    height: 96px;
}

.buttonArea {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-bottom: 1px #e7e7e7 solid;
}

.btnDiv {
    height: 48px;
    width: 72px;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    /* margin-left: 15px; */
    cursor: pointer;
}


.btnDiv.active {
    font-weight: 600;
    border-bottom: 3px #0663FE solid;
}

.mainArea {
    width: 100%;
    margin-top: 30px;
    display: flex;
    gap: 30px;
    height: 100%;
}
.right_content{
    width: 100%;
    height: calc(100% - 101px);
    overflow: auto;
    overflow: auto;
    padding-right: 10px;
    padding-bottom: 50px;
    box-sizing: border-box;
}


</style>