<template>
  <div class="body" :style="{padding : useridL ? '20px' : ''}" >
    <div class="barList">
        <div style="cursor: pointer;" @click="cutPage(index)" :class="[pageEnd == index ? 'Selected' : '']" v-for="(i, index) in barList"
            :key="index">
            {{ i.name }}
        </div>
    </div>
    <div class="db_bg">
      <div class="db_body">
        <baseData v-if="pageEnd == 0" :oid="oidL ? oidL : oid" :org="orgL ? orgL : org" :key="opl"></baseData>
        <AIApp v-if="pageEnd == 1" :oid="oidL ? oidL : oid" :org="orgL ? orgL : org" :userid="useridL ? useridL : userid" :key="opl"></AIApp>
        <teaing v-if="pageEnd == 2" :oid="oidL ? oidL : oid" :org="orgL ? orgL : org" :key="opl"></teaing>
        <teaMange v-if="pageEnd == 3" :oid="oidL ? oidL : oid" :org="orgL ? orgL : org" :key="opl"></teaMange>
      </div>
    </div>
  </div>
</template>

<script>
import baseData from "./baseData";
import AIApp from "./AIApp";
import teaing from "./teaing";
import teaMange from "./teaMange";
export default {
  name:'dataBoardNew',
  props:['oid','org','userid'],
  components: {
    baseData,
    AIApp,
    teaing,
    teaMange,
  },
  mounted(){
    console.log('oid',this.oid);
  },
  watch:{
    oid(newL){
      console.log(newL);
      this.opl++
    }
  },
  data() {
    return {
      oidL: this.$route.query.oid,
      orgL: this.$route.query.org,
      useridL: this.$route.query.userid,
      opl:0,
      barList: [
          { name: '基础数据', ind: 1 },
          { name: 'AI应用', ind: 2 },
          { name: '常规教学', ind: 3 },
          { name: '教师管理', ind: 4 },
      ] ,
      pageEnd: 0
    };
  },
  methods: {
    cutPage(val) {
        this.pageEnd = val
    },
  }
};
</script>

<style scoped>
.body {
  height: 100%;
  width: 100%;
  overflow: auto;
  /* min-width: 1550px; */
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.db_bg {
  width: 100% ;
  border-radius: 8px;
  overflow: auto;
  /* padding: 0 30px; */
  box-sizing: border-box;
}


.logoTop {
  position: absolute;
  left: 30px;
}


.db_body {
  width: 100%;
}
.dataExponent {
    width: 100%;
    height: 120px;
    display: grid;
    background: #fff;
    border-radius: 20px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
    align-items: center;
}

.dataExponentCon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
    border-right: 1px solid #D9D9D9;
}

.dataExponentCon:nth-child(4) {
    border: none;
}

.dataExponentConTit {
    font-family: PingFang SC;
    font-size: 14px;
    line-height: 100%;
    color: #969BA3;
}

.dataExponentConNum {
    height: 45px;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 32px;
    line-height: 45px
}
.barList {
    display: flex;
    align-items: end;
    gap: 42px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    /* padding: 0 30px; */
    box-sizing: border-box;
    /* height: 50px; */
    color: #969BA3;
    flex-shrink: 0;
}

.barList>div {
    cursor: pointer;
    height: 23px;
    line-height: 23px;
}

.Selected {
    color: #0663FE;
    border-bottom: 2px solid #0663FE;
}
</style>