<style lang="less" scoped>
  @import './Authorization.less';
</style>
<style lang="less">
  .auth-box .ivu-drawer-content {
    border-left:1px solid #383838;
    background-color:#404040;
  }
  .auth-box .ivu-drawer-header {
    border-color:#424242;
  }
  .auth-box .ivu-drawer-body {
    box-sizing:content-box;
  }
  .auth-rule .ivu-select-selection {
    border-color:#AAAAAA;
    margin:0px 5px;
  }
  .auth-rule .ivu-input {
    border-color: #AAAAAA;
    text-align:center;
  }
  .auth-rule .ivu-collapse,.ivu-collapse-content {
    background:none;
    border:none;
  }
  .auth-rule .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header {
    border:none;
    padding-left:2px;
  }
    .auth-rule .ivu-collapse > .ivu-collapse-item {
      border:none;
    }
  .auth-rule .ivu-icon-ios-arrow-forward:before {
    content:"";
  }
  .auth-rule .ivu-collapse-item-active .collapse-header-label {
    border-left:3px solid white;
  }
  .auth-rule .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header > i {
    display:none;
  }
  .auth-rule .ivu-collapse-item-active .ivu-collapse-content-box {
    border-bottom:1px solid #AAAAAA;
  }
</style>
<template>
    <Drawer title="服务授权管理"
            v-model="show"
            width="420"
            :transfer="!flag"
            @on-close="close"
            inner
            class-name="sc-content" class="auth-box">
      <p slot="header" style="color:#a5a5a5;">{{$t('stuAccount.authTitle')}}</p>
      <div class="auth-info">
        <h3 class="auth-info-title">
          {{$t('stuAccount.authTitle1')}}
        </h3>
        <p class="auth-info-discreption">{{$t('stuAccount.authDiscraption')}}</p>
        <div class="auth-info-count-item">
          <span class="auth-info-label">{{$t('stuAccount.authCount')}}</span>
          <span class="auth-info-num">356</span>
        </div>
        <div class="auth-info-count-item">
          <span class="auth-info-label">{{$t('stuAccount.alreadyUse')}}</span>
          <span class="auth-info-num">287</span>
        </div>
        <div class="auth-info-count-item">
          <span class="auth-info-label">{{$t('stuAccount.mayUse')}}</span>
          <span class="auth-info-num">69</span>
        </div>
      </div>
      <div class="auth-rule">
        <p class="auth-info-discreption">{{$t('stuAccount.authNum')}}</p>
        <!--<div class="auth-rule-item">
          <div class="auth-rule-label">套用至所有当前节选项目</div>
          <div class="auth-rule-btn">套用</div>
        </div>
        <div class="auth-rule-item">
          <div class="auth-rule-label">
            <span>套用至所有当前节选目标</span>
            <Input size="small" placeholder="—" style="width: 50px;border-color:#AAAAAA;" />
            <span>至</span>
            <Input size="small" placeholder="—" style="width: 50px" />
            <span>项</span>
          </div>
          <div class="auth-rule-btn">套用</div>
        </div>
        <div class="auth-rule-item">
          <div class="auth-rule-label">
            <span>套用至</span>
            <Select size="small" v-model="list" style="width:140px" placeholder="请选择学制">
              <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span>所有项目</span>
          </div>
          <div class="auth-rule-btn">套用</div>
        </div>
        <div class="auth-rule-item">
          <div class="auth-rule-label">
            <span>套用至</span>
            <Select size="small" v-model="list" style="width:140px" placeholder="请选择学级">
              <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span>所有项目</span>
          </div>
          <div class="auth-rule-btn">套用</div>
        </div>
        <div class="auth-rule-item">
          <div class="auth-rule-label">
            <span>套用至</span>
            <Select size="small" v-model="list" style="width:140px" placeholder="请选择班级">
              <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span>所有项目</span>
          </div>
          <div class="auth-rule-btn">套用</div>
        </div>
        <div class="auth-rule-item">
          <div class="auth-rule-label">套用至全校所有项目</div>
          <div class="auth-rule-btn">套用</div>
        </div>-->
        <Collapse  accordion>
          <Panel name="1">
            <div class="collapse-header-box">
              <span class="collapse-header-label">小学使用数</span><span class="collapse-header-num">188</span>
            </div>
            <div slot="content" class="auth-num-item">
              <ul>
                <li>
                  <span>一年级使用数</span>
                  <span>58</span>
                </li>
                <li>
                  <span>二年级使用数</span>
                  <span>46</span>
                </li>
                <li>
                  <span>三年级使用数</span>
                  <span>86</span>
                </li>
                <li>
                  <span>四年级使用数</span>
                  <span>35</span>
                </li>
                <li>
                  <span>五年级使用数</span>
                  <span>48</span>
                </li>
                <li>
                  <span>六年级使用数</span>
                  <span>78</span>
                </li>
              </ul>
            </div>
          </Panel>
          <Panel name="2">
            <div style="display:inline-block;" class="collapse-header-box">
              <span class="collapse-header-label">初中使用数</span><span class="collapse-header-num">135</span>
            </div>
            <div slot="content" class="auth-num-item">
              <ul>
                <li>
                  <span>一年级使用数</span>
                  <span>58</span>
                </li>
                <li>
                  <span>二年级使用数</span>
                  <span>46</span>
                </li>
                <li>
                  <span>三年级使用数</span>
                  <span>86</span>
                </li>
              </ul>
            </div>
          </Panel>
          <Panel name="3">
            <div style="display:inline-block;" class="collapse-header-box">
              <span class="collapse-header-label">高中使用数</span><span class="collapse-header-num">89</span>
            </div>
            <div slot="content" class="auth-num-item">
              <ul>
                <li>
                  <span>一年级使用数</span>
                  <span>58</span>
                </li>
                <li>
                  <span>二年级使用数</span>
                  <span>46</span>
                </li>
                <li>
                  <span>三年级使用数</span>
                  <span>86</span>
                </li>
              </ul>
            </div>
          </Panel>
        </Collapse>
      </div>
      <!--<div class="drawer-footer">
        <div class="my-btn" @click="confirm()">
          收回所有授权
        </div>
        <div class="my-btn my-btn-active" @click="confirm()" >
          保存所有变更
        </div>
      </div>-->
    </Drawer>
</template>
<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      schoolCode: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        flag: true,
        list:[]
      }
    },
    computed: {
      show: {
        get(){
          return this.isShow;
        },
        set(value){
        }
      },
      
    },
    watch: {
    },
    methods: {
      close() {
        this.$emit("closeAuth", {
          action: 0
        });
      },
      confirm() {
        this.$emit("closeAuth", {
          action: 1
        });
      }
    },
    created(){
    },
    mounted() {

    },
    watch: {
      
    }
  }
</script>
