<template>
  <div class="main_root">
    <div class="schoolInfo">
      <div class="school_top">按班级</div>
      <div
        @click="selectClass(schoolInfo)"
        :class="[
          'schoolname',
          curClass.id === schoolInfo.id && curClass.type === schoolInfo.type
            ? 'active'
            : ''
        ]"
      >
        全部班级
        <span
          v-if="schoolInfo.hasst"
          class="ivu-icon iconfont icon-ding-mianxing"
        ></span>
      </div>
      <div class="class_list">
        <div v-for="item in schoolInfo.children" :key="item.id">
          <div
            :class="[
              curClass.id === item.id && curClass.type === item.type
                ? 'active'
                : ''
            ]"
            :title="item.name"
            @click="selectClass(item)"
          >
            {{ item.name }}
            <span
              v-if="item.hasst"
              class="ivu-icon iconfont icon-ding-mianxing"
            ></span>
          </div>
        </div>
      </div>
    </div>
    <div class="user_list">
      <div class="login_type">
        <div @click="toggle(1)" :class="[strategy == 1 ? 'active' : '']">
          公共策略
        </div>
        <div @click="toggle(2)" :class="[strategy == 2 ? 'active' : '']">
          个人策略
        </div>
      </div>
      <PublicStrategy
        :curClass="curClass"
        v-if="strategy === 1"
        @refresh="init()"
      ></PublicStrategy>
      <PersonalStrategy
        :curClass="curClass"
        v-else-if="strategy === 2"
      ></PersonalStrategy>
    </div>
    <Spin fix v-if="showLoading" style="background-color: transparent">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </Spin>
  </div>
</template>

<script>
import PublicStrategy from "./publicStrategy.vue";
import PersonalStrategy from "./personalStrategy";
import { class_list_strategy } from "@/api/stPad";
export default {
  components: {
    PublicStrategy,
    PersonalStrategy
  },
  data() {
    return {
      userInfo: {},
      showLoading: false,
      schoolInfo: {
        name: "",
        id: 0,
        hasst: 0,
        children: []
      },
      curClass: {
        id: 0,
        name: ""
      },
      strategy: 0
    };
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  created() {
    this.userInfo = JSON.parse(
      localStorage.getItem("xh_control_userInfo")
    ).content;
    this.init();
  },
  methods: {
    selectClass(item) {
      this.curClass = item;
    },
    toggle(type) {
      this.strategy = type;
    },
    init() {
      this.showLoading = true;
      class_list_strategy({
        schoolid: this.powerParams.objectid,
        st: "pad"
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          this.schoolInfo = res.obj;
          this.schoolInfo.schoolid = this.schoolInfo.id;
          if (this.schoolInfo.children.length > 0) {
            this.schoolInfo.children.forEach((item) => {
              item.schoolid = this.schoolInfo.id;
            });
          }
          if (!this.curClass.id) {
            this.curClass = this.schoolInfo;
          }
          this.strategy = this.strategy ? this.strategy : 1; //渲染页面
        } else {
          this.$Message.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  display: flex;
  .school_top {
    line-height: 38px;
    height: 38px;
    border-bottom: 1px solid #e9f0f9;
    color: #798cb5;
    text-align: center;
    font-weight: 500;
  }
  .schoolInfo {
    width: 200px;
    flex: none;
    overflow-y: auto;
    border-radius: 15px;
    margin-right: 16px;
    height: 100%;
    padding: 10px;
    background-color: white;
    .schoolname {
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      position: relative;
      margin: 10px 0;
    }
    .class_list {
      div {
        line-height: 30px;
        height: 30px;
        text-align: center;
        cursor: pointer;
        position: relative;
      }
    }
    .active {
      border-radius: 6px;
      color: #339dff;
      background: #dbeeff;
    }
  }
  .icon-ding-mianxing {
    color: #339dff;
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 6px;
  }
  .user_list {
    width: calc(100% - 216px);
    padding: 16px;
    height: 100%;
    overflow-y: auto;
    border-radius: 15px;
    background-color: white;
    .login_type {
      padding-left: 5px;
      margin-bottom: 16px;
      height: 30px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      div {
        width: 66px;
        text-align: center;
        color: #7c8db5;
        font-size: 16px;
        font-family: "SourceHanSansCN";
        cursor: pointer;
        &:first-of-type {
          margin-right: 20px;
        }
      }
      .active {
        color: #339dff;
        position: relative;
        &::after {
          display: block;
          content: "";
          height: 2px;
          width: 76px;
          background-color: #339dff;
          position: absolute;
          top: 24px;
          left: -5px;
        }
      }
    }
  }
}
</style>
