<style lang="less" scoped>
  @import './Index.less';
</style>

<template>
  <div id="accountMgmt">
    <Row class="main">
      <Col class="pane" :span="7" style="z-index: 11;">
        <Row class="head">
            <Col :span="14">
              <Row :gutter="10">
                  <Col :span="5">
                      <Button @click="addTeacher = true" icon="md-add" style="margin-right: 5px;" />
                  </Col>
                  <Col :span="19">
                      <Input v-model="filterName" suffix="ios-search" placeholder="ID / Name" />
                  </Col>
              </Row>     
            </Col>
            <Col :span="10">
                <a style="color:#fff;float: right;"  @click="closeBtn()"><Icon size="17" type="md-close" /></a>
            </Col>
        </Row>
        <div class="conet scrollstyle">
            <div v-for="(user, index) in filterLists" :key="index" class="user">
                <Row class="box" type="flex" justify="center" align="middle">
                    <Col class="name" :span="8">
                        <h3>{{user.id}}</h3>
                        <span>{{user.name}}</span>
                    </Col>
                    <Col class="nickName" :span="8"><span>{{user.nickName}}</span></Col>
                    <Col class="play" :span="8">
                        <Button @click="delTeacher(user.name)" size="small">刪除</Button>
                    </Col>
                </Row>
            </div>
        </div>
      </Col>
      <transition name="leftInOut">
      <Col v-if="addTeacher" class="pane" :span="5">
        <Row style="border-bottom: 1px solid #94998a;padding-bottom: 10px;    min-height: 44px;">
            <Col :span="12">
              <h3>
                  是否讓以下的老師加入:
                  <!-- 老師加入後給予預設的權限 -->
              </h3>
            </Col>
            <Col :span="12">
              <a style="color:#fff;float: right;"  @click="addTeacher = false"><Icon size="17" type="md-close" /></a>
            </Col>                    
        </Row>
        <Row class="scrollstyle"  style="margin-top: 10px;overflow: auto;height: 88%;">
            <Col>
                <div style="padding: 15px 10px 10px 15px;background-color: #66666629;;cursor: pointer;margin-bottom: 5px;">
                  <h3>JEFF-<small>JEFF#1234</small></h3>
                    <RadioGroup>
                      <Radio true-value="01" label="通過"></Radio>
                      <Radio true-value="10" label="拒絕"></Radio>
                  </RadioGroup>
                </div>
                <div style="padding: 15px 10px 10px 15px;background-color: #66666629;cursor: pointer;margin-bottom: 5px;">
                  <h3>Mickey-<small>Mikey#1234</small></h3>
                  <RadioGroup>
                      <Radio true-value="01" label="通過"></Radio>
                      <Radio true-value="10" label="拒絕"></Radio>
                  </RadioGroup>
                </div>
            </Col>
        </Row>
        <Row >
            <Col style="text-align: right;">
                <Button>確定</Button>
            </Col>
        </Row>
      </Col>
      </transition>
    </Row>  
  </div>
</template>

<script>

export default {
  data () {
    return {
      deleteID: '',
      addTeacher: false,
      filterName: '',
      userList:[ // UserLIST
        {
          id: 'Osbert#1234',
          name: '歐斯柏',
          nickName: '老師',
          authList:[
            {
              path: '/smartschooldashboard',
              component: 'smartschooldashboard',
              access: {  // 小組件權限
                'fun1': true, 
                'fun2': false
              },
              permissions: true // true: 有權訪問, false: 無權訪問
            },
            {
              path: '/smartclassdashboard',
              component: 'smartclassdashboard',
              access: {  // 小組件權限
                'fun1': true, 
                'fun2': false
              },
              permissions: true // true: 有權訪問, false: 無權訪問
            },
            {
              path: '/guidelines',
              component: 'guidelines',
              access: {  // 小組件權限
                'fun1': true, 
                'fun2': false
              },
              permissions: true // true: 有權訪問, false: 無權訪問
            },
          ]
        },
        {
          id: 'James#1234',
          name: '詹姆士',
          nickName: '老師',
          authList:[
            {
              path: '/smartschooldashboard', // 頁面
              component: 'smartschooldashboard', //組件名
              access: {  // 小組件權限
                'fun1': false, 
                'fun2': false
              },
              permissions: true // true: 有權訪問, false: 無權訪問
            },
            {
              path: '/smartclassdashboard',
              component: 'smartclassdashboard',
              access: {  // 小組件權限
                'fun1': true, 
                'fun2': false
              },
              permissions: true // true: 有權訪問, false: 無權訪問
            },
            {
              path: '/guidelines',
              component: 'guidelines',
              access: {  // 小組件權限
                'fun1': false, 
                'fun2': false
              },
              permissions: false // true: 有權訪問, false: 無權訪問
            },
          ]
        },
      ],
    }
  },
  computed:{
    filterLists: function(){
    // 通通轉小寫比對。
    let filterName = this.filterName.toLowerCase();

    return ( filterName.trim() !== '' ) ?
        this.userList.filter(function(d){ return (d.name.toLowerCase().indexOf(filterName) > -1 || d.id.toLowerCase().indexOf(filterName) > -1); }) :
        this.userList;
    },
  },
  methods:{
    closeBtn: function(){
      this.$emit("closeComp","");
    },
    delTeacher: function(name){
      this.$Modal.confirm({
        title: '刪除確認',
        content: '<p>請問是否要刪除 ' + name + '</p>',
        onOk: () => {
        },
        onCancel: () => {
        }
      }); 
    }
  }
}
</script>
            