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


<template>
  <div id="authMgmt">
    <Row class="main">
        <Col v-if="mainPane" class="pane" :span="7">
            <Row class="head">
                <Col :span="14">
                    <Row :gutter="10">
                        <Col :span="19">
                            <Input v-model="filterName" suffix="ios-search" placeholder="ID / Name" />
                        </Col>
                        <Col :span="5">
                            <Button @click="batchSwitch()" icon="ios-photos"/>
                        </Col>
                    </Row>                                        
                </Col>
                <Col :span="10">
                    <a style="color:#fff;float: right;"  @click="closeAuth()"><Icon size="17" type="md-close" /></a>
                </Col>
            </Row>
            <div class="conet scrollstyle">
                <div v-for="(user, index) in filterLists" :key="index" class="user" :class="{ 'active': user.id === userSelect }" @click="userAuthSeting(user.id)">
                    <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"><Icon size="20" type="md-play" /></Col>
                    </Row>
                </div>
            </div>
        </Col>
        <transition name="leftInOut">
            <Col class="pane"  style=" z-index:9;" v-if="userPane" :span="5">
                <Row style="border-bottom: 1px solid #94998a;padding-bottom: 10px;    min-height: 44px;">
                    <Col :span="12">
                        <h3>
                            {{userAuth.name}}
                            <small>{{userAuth.id}}</small>
                        </h3>                        
                    </Col>
                    <Col :span="12">
                        <a style="color:#fff;float: right;"  @click="closeBtn()"><Icon size="17" type="md-close" /></a>
                    </Col>                    
                </Row>
                <Row style="margin-top: 10px;">
                    <Col :span="21">
                        <Input size="small">
                            <span slot="prepend">稱謂</span>
                        </Input>
                    </Col>                    
                    <Col :span="3" style="text-align: right;">
                        <Button size="small" icon="md-copy" @click="copyUserAuthFlag = true"></Button>
                    </Col>
                </Row>
                <Row class="scrollstyle"  style="margin-top: 10px;overflow: auto;height: 84%;">
                    <Col v-for="(item, authKey) in userAuth.authList" :key="authKey">
                        <div style="padding: 15px 10px 10px 25px;background-color: #66666629;cursor: pointer;margin-bottom: 5px;">
                            <Checkbox v-model="item.permissions"> {{item.path}}</Checkbox>
                        </div>
                        <transition name="leftInOut">
                            <div v-if="item.permissions == 1">                 
                                <ul style="margin-left: 15px;list-style-type: none;">
                                    <li v-for="(value, name) in item.access">
                                        <div style="padding: 15px 10px 10px 25px;background-color: #66666629;cursor: pointer;margin-bottom: 5px;">                                            
                                            <Checkbox v-model="item.access[name]">{{ name }}</Checkbox>
                                        </div>
                                    </li>
                                </ul>
                            </div>    
                        </transition>
                    </Col>                    
                </Row>
                <Row >
                    <Col style="text-align: right;">
                        <Button>確定</Button>
                    </Col>
                </Row>
                <Spin size="large" fix v-if="authSpin">
                    <Icon type="ios-loading" size=18 class="spin-icon-load"></Icon>
                    <div>Loading</div>
                </Spin>
            </Col>           
        </transition>
        <transition name="leftInOut">
            <Col class="pane" style=" z-index:8;" v-if="copyUserAuthFlag" :span="4">
                <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="copyUserAuthFlag = false"><Icon size="17" type="md-close" /></a>
                    </Col>                    
                </Row>
                <Row style="margin-top: 10px;">
                    <Col>
                        <Input v-model="filterNameBycopy" suffix="ios-search" placeholder="ID / Name" />                
                    </Col>
                </Row>
                <Row class="scrollstyle listRow"  style="margin-top: 10px;overflow: auto;height: 88%;">
                    <Col v-for="(item, key) in filterCopyName" :key="key">
                        <div class="listItem" @click="copyAuth(item.id, item.name)">
                            {{item.name}}
                        </div>                        
                    </Col>
                </Row>
            </Col>
        </transition>
        <transition name="leftInOut">
            <Col v-if="batchPane" class="pane" style=" z-index:8;" :span="12">
                <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="batchSwitch"><Icon size="17" type="md-close" /></a>
                    </Col>                    
                </Row>
                <Row style="height: 90%;">
                    <Col :span="8" style="height: 100%;padding: 10px;border-right: 1px solid #94998a;">
                        <div style="height: 10%;">
                            <h3>權限</h3>
                        </div>
                        <Row class="scrollstyle"  style="margin-top: 10px;overflow: auto;height: 84%;">
                            <Col v-for="(item, authKey) in basicAuth" :key="authKey">
                                <div style="padding: 15px 10px 10px 25px;background-color: #66666629;cursor: pointer;margin-bottom: 5px;">
                                    <Checkbox v-model="item.permissions"> {{item.path}}</Checkbox>
                                </div>
                                <transition name="leftInOut">
                                    <div v-if="item.permissions == 1">                 
                                        <ul style="margin-left: 15px;list-style-type: none;">
                                            <li v-for="(value, name) in item.access">
                                                <div style="padding: 15px 10px 10px 25px;background-color: #66666629;cursor: pointer;margin-bottom: 5px;">                                                    
                                                    <Checkbox v-model="item.access[name]">{{ name }}</Checkbox>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>    
                                </transition>
                            </Col>                    
                        </Row>
                    </Col>       
                    <Col :span="8" style="height: 100%;padding: 10px;">
                        <div style="height: 10%;">
                            <h3>老師列表</h3>
                            <Input v-model="filterName" suffix="ios-search" placeholder="ID / Name" style="margin: 10px 0px;" />
                        </div>                        
                        <draggable :list="userList" group="people" @change="log" class="conet scrollStyle" style="border: 1px solid #fefefe;padding: 10px;height: 90%;padding: 10px;    border-radius: 10px;">
                            <div
                            class="user"
                            v-for="(element, index) in filterLists"
                            :key="element.name"
                            >
                            {{ element.name }} {{ index }}
                            </div>
                        </draggable>                  
                    </Col>
                    <Col :span="8" style="height: 100%;padding: 10px;">
                        <div style="height: 10%;">
                            <h3>要修改的老師</h3>
                        </div>
                        <draggable :list="list2" group="people" @change="log" class="conet" style="border: 1px solid #fefefe;padding: 10px;height: 90%;padding: 10px;    border-radius: 10px;">
                            <div
                            class="user"
                            v-for="(element, index) in list2"
                            :key="element.name"
                            >
                            {{ element.name }} {{ index }}
                            </div>
                        </draggable>
                    </Col>                   
                </Row>                
                <Row >
                    <Col style="text-align: right;">
                        <Button>確定</Button>
                    </Col>
                </Row>
            </Col>
        </transition>
    </Row>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
    components: {
        draggable
    },
    data () {
    return {
 list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: [
       
      ],

        mainPane: true,
        batchPane: false,
        copyUserAuthFlag: false,
        filterName:'',
        filterNameBycopy: '',
        userSelect:'', // 被點選的人
        userPane: '', // 啟動的功能頁紀錄
        authSpin: false, // 權限頁Spin
        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: 無權訪問
                    },
                ]
            },
            {
                id: 'Mickey#2345',
                name: '米奇',
                nickName: '老師',
                authList:[
                    {
                        path: '/smartschooldashboard', // 頁面
                        component: 'smartschooldashboard', //組件名
                        access: {  // 小組件權限
                            'fun1': false, 
                            'fun2': false
                        },
                        permissions: false // true: 有權訪問, false: 無權訪問
                    },
                    {
                        path: '/smartclassdashboard',
                        component: 'smartclassdashboard',
                        access: {  // 小組件權限
                            'fun1': false, 
                            'fun2': false
                        },
                        permissions: false // true: 有權訪問, false: 無權訪問
                    },
                    {
                        path: '/guidelines',
                        component: 'guidelines',
                        access: {  // 小組件權限
                            'fun1': false, 
                            'fun2': false
                        },
                        permissions: false // true: 有權訪問, false: 無權訪問
                    },
                ]
            },
        ],
        userAuth:{ // 使用者個人權限顯示
            id: '',
            name: '',
            nickName: '',
            authList:[]
        },
        basicAuth:[
            {
                path: '/smartschooldashboard', // 頁面
                component: 'smartschooldashboard', //組件名
                access: {  // 小組件權限
                    'fun1': false, 
                    'fun2': false
                },
                permissions: false // true: 有權訪問, false: 無權訪問
            },
            {
                path: '/smartclassdashboard',
                component: 'smartclassdashboard',
                access: {  // 小組件權限
                    'fun1': false, 
                    'fun2': false
                },
                permissions: false // 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;
    },
    filterCopyName: function(){
        let _this = this;
        let newList = this.userList.filter(function(item){
            return (item.id != _this.userAuth.id)
        });
        // 通通轉小寫比對。
        let filterName = this.filterNameBycopy.toLowerCase();

        return ( filterName.trim() !== '' ) ?
        newList.filter(function(d){ return (d.name.toLowerCase().indexOf(filterName) > -1 || d.id.toLowerCase().indexOf(filterName) > -1); }) :
        newList;
    }
  },
  methods:{
    closeBtn: function(){
        this.userPane = false;
        this.userSelect = '';
        this.copyUserAuthFlag = false;
    },    
    sleep: function(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    },
    userAuthSeting: async function(id){
        this.userPane = true;
        this.authSpin = true;
        await this.sleep(2000);
        let auth = this.userList.find(function(item){
            return item.id == id
        });
        this.userAuth.id = auth.id;
        this.userAuth.name = auth.name;
        this.userAuth.nickName = auth.nickName;
        this.userAuth.authList = auth.authList;        
        this.authSpin = false;
    },
    closeAuth: function(){
        this.$emit("closeComp","");
    },
    copyAuth: function(id, name){
        this.$Modal.confirm({
            title: '複製確認',
            content: '<p>請問是否要複製 ' + name +' 的權限</p>',
            onOk: () => {
                let user = this.userList.filter(function(item){
                    return (item.id == id)
                })
                this.userAuth.authList = user[0].authList
            },
            onCancel: () => {
            }
        });        
    },
    batchSwitch: function(){
        this.filterName = '';
        this.batchPane = !this.batchPane;
        this.mainPane = !this.mainPane;
        this.copyUserAuthFlag = false;
        this.userPane = false;
    },
    

     add: function() {
      this.list.push({ name: "Juan" });
    },
    replace: function() {
      this.list = [{ name: "Edgard" }];
    },
    clone: function(el) {
      return {
        name: el.name + " cloned"
      };
    },
    log: function(evt) {
      window.console.log(evt);
    }
  },
}
</script>
<style scoped>
.leftInOut-enter-active, .leftInOut-leave-active {
    transition: all 0.7s;
}
.leftInOut-enter, .leftInOut-leave-to /* .list-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(-150px);    
}
.spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
</style>