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

<template>
  <div id="authMgmt" class="backdrop-dark">
    <h2 class="title">權限設定</h2>
    <Row class="main">
        <Col class="pane" :span="7">
            <Row class="head">
                <Col :span="10">
                    <Input v-model="filterName" suffix="ios-search" placeholder="ID / Name" />
                </Col>
                <Col :span="14">
                    <Button @click="userPaneBtn('addUser')" style="float: right;" icon="md-add"></Button>
                </Col>
            </Row>
            <div class="conet scrollstyle">
                <div v-for="(user, index) in filterLists" :key="index" class="user" :class="{ 'active': user.id === userSelect }" @click="userPaneBtn('auth', 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 == 'addUser'" :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="closeBtn()"><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: rgba(17, 17, 17, 0.14);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: rgba(17, 17, 17, 0.14);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>
        <transition name="leftInOut">
            <Col class="pane" style=" z-index:8;" v-if="(userPane == 'addUser' && show)" :span="3">
                addUser2
            </Col>
        </transition>
        <transition name="leftInOut">
            <Col class="pane"  style=" z-index:9;" v-if="userPane == 'auth'" :span="3">
                <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="12" style="text-align: right;">
                        <Input size="small">
                            <span slot="prepend">稱謂</span>
                        </Input>
                    </Col>
                    <Col :span="12" 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: rgba(17, 17, 17, 0.14);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: rgba(17, 17, 17, 0.14);cursor: pointer;margin-bottom: 5px;">
                                            {{ name }}
                                            <Checkbox v-model="item.access[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="3">
                <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"  style="margin-top: 10px;overflow: auto;height: 88%;">
                    <Col v-for="(item, key) in filterCopyName" :key="key">
                        <div style="padding: 15px 10px 10px 15px;background-color: rgba(17, 17, 17, 0.14);cursor: pointer;margin-bottom: 5px;text-align:center;">
                            {{item.name}}
                        </div>
                    </Col>
                </Row>
            </Col>
        </transition>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
        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: 無權訪問
                    }
                ]
            }
        ],
        userAuth: { // 使用者個人權限顯示
            id: '',
            name: '',
            nickName: '',
            authList: []
        }

    }
  },
  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 filterName = this.filterNameBycopy.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: {
    async userPaneBtn(pane, id) {
        this.userSelect = id
        if (this.userPane != '' && this.userPane != pane) {
           this.userPane = ''
           await this.sleep(700)
           this.userPane = pane
        } else {
            this.userPane = pane
        }

        switch (pane) {
            case 'auth':
                this.userAuthSeting(id)
            break
        }
    },
    closeBtn(pane) {
        this.userPane = ''
        this.userSelect = ''
        this.copyUserAuthFlag = false
    },
    sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time))
    },
    async userAuthSeting(id) {
        // if(this.userSelect == id) return false;
        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
    }
  }
}
</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>
