<template>
    <div class="school-container">
        <!--<Loading v-show="isLoading"></Loading>-->
        <div class="school-container-left">
            <div class="school-container-header">
                <span>开放平台设置</span>
            </div>
            <vuescroll>
                <div class="school-list-wrap">
                    <!--<div v-if="mySchoolList.length === 0">
                    <EmptyData :top="50"></EmptyData>
                </div>-->
                    <div class="list-wrap">
                        <div class="school-item" @click="getSelect('mge')">
                            <span class="school-item-name">
                                <span>服务管理</span>
                            </span>
                        </div>
                        <div class="school-item" @click="getSelect('add')">
                            <span class="school-item-name">
                                <span>添加服务</span>
                            </span>
                        </div>                   
                        <div class="school-item" @click="getSelect('app')">
                            <span class="school-item-name">
                                <span>应用管理</span>
                            </span>
                        </div>
                    </div>
                </div>
            </vuescroll>
        </div>
        <div class="school-container-right">
            <div v-if="!showApp">
                <div class="school-container-header">
                    <span>{{index == 'mge'? '应用列表': '设置应用基础信息'}}</span>
                    <div>
                        <Input placeholder="请输入搜索名称或appkey">
                        <Icon type="ios-search" slot="prefix" />
                        </Input>
                    </div>
                </div>
                <div class="table-wrap" v-show="index == 'mge'">
                    <Table :data="tableData1" :columns="tableColumns1">
                        <template slot-scope="{ row, index }" slot="status">
                            <div v-show="row.status == 0">
                                <Button type="primary" size="small" style="margin-right: 5px">通过</Button>
                                <Button type="error" size="small">不通过</Button>
                            </div>
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="getAppInfo(row)">编辑</Button>
                            <Button type="error" size="small">删除</Button>
                        </template>
                    </Table>
                    <div style="margin: 10px;overflow: hidden">
                        <div style="float: right;">
                            <Page :total="100" :current="1" @on-change="changePage"></Page>
                        </div>
                    </div>
                </div>
                <div class="dark-iview-form" style="width:45%;margin-top:30px;color:#fff;margin-left:30px" v-show="index == 'add'">
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                        <FormItem label="应用名称:" prop="name">
                            <Input v-model="formValidate.name" placeholder="请输入应用名称"></Input>
                        </FormItem>
                        <FormItem label="app key:" prop="key">
                            <Input v-model="formValidate.key" placeholder="请输入appkey"></Input>
                        </FormItem>
                        <FormItem label="app_secret:" prop="secret">
                            <Input v-model="formValidate.secret" placeholder="请输入app_secret"></Input>
                        </FormItem>
                        <!--<FormItem label="应用图标:">
                <Upload>
                    <Button icon="ios-cloud-upload-outline">点击上传图片</Button>
                </Upload>
            </FormItem>-->
                        <FormItem label="功能模块:" prop="model">
                            <CheckboxGroup v-model="formValidate.model">
                                <Checkbox label="模块一"></Checkbox>
                                <Checkbox label="模块二"></Checkbox>
                                <Checkbox label="模块三"></Checkbox>
                                <Checkbox label="模块四"></Checkbox>
                                <Checkbox label="模块四"></Checkbox>
                                <Checkbox label="模块四"></Checkbox>
                                <Checkbox label="模块四"></Checkbox>
                                <Checkbox label="模块四"></Checkbox>
                                <Checkbox label="模块四"></Checkbox>
                                <Checkbox label="模块四"></Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                        <FormItem label="限制连接次数:" prop="num">
                            <Select v-model="formValidate.num" :autosize="{minRows: 2,maxRows: 5}" placeholder="不限制"></Select>
                        </FormItem>
                        <FormItem label="账号ID:" prop="id">
                            <Input v-model="formValidate.id" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入账号ID"></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary">提交</Button>
                        </FormItem>
                    </Form>
                </div>
                <div class="table-wrap" v-show="index == 'app'">

                </div>
            </div>
            <div v-if="showApp">
                <appInfo @back="getBack"></appInfo>
            </div>
        </div>

    </div>
</template>

<script>
    import appInfo from './AppInfo.vue'

    export default {
        data() {
            return {
                teacherInfo: {
                    defaultschool: ''
                },
                index: 'mge',
                tableData1: this.mockTableData1(),
                tableColumns1: [
                    {
                        title: 'appkey',
                        key: 'key'
                    },
                    {
                        title: '应用图标',
                        key: 'pic'
                    },
                    {
                        title: '应用名称',
                        key: 'name'
                    },
                    {
                        title: '开发者',
                        key: 'author'
                    },
                    {
                        title: '申请机构',
                        key: 'company'
                    },
                    {
                        title: '审核状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                    }
                ],
                formValidate: {
                    name: '',
                    key: '',
                    secret: '',
                    id: '',
                    model: [],
                    num:0
                },
                showApp: false,
                ruleValidate: {
                    name: [
                        { required: true, message: '请输入应用名称', trigger: 'blur' }
                    ],
                    key: [
                        { required: true, message: '请输入appkey', trigger: 'blur' }
                    ],
                    secret: [
                        { required: true, message: '请输入app_secret', trigger: 'change' }
                    ],
                    id: [
                        { required: true, message: '请输入使用者ID', trigger: 'change' }
                    ],
                    num: [
                        { required: true, type: 'number', min: 1,message: '请输入使用者ID', trigger: 'change' }
                    ],
                    model: [
                        { required: true, type: 'array', min: 1, message: '选择需要的功能模块', trigger: 'change' }
                    ],
                }
            }
        },
        components: {
            appInfo
        },
        created() {

        },
        methods: {
            mockTableData1() {
                let data = [];
                for (let i = 0; i < 10; i++) {
                    data.push({
                        name: 'Business' + Math.floor(Math.random() * 100 + 1),
                        status: Math.floor(Math.random(0,3)),
                        key: 'hjfgdhfdjkshkjhgjk',
                        author: 'SOUL',
                        company: 'habook',
                        action: Math.floor(Math.random() * 7 + 1),
                        update: new Date()
                    })
                }
                return data;
            },
            getAppInfo(data) {
                this.showApp = false
                if (data) {
                    this.showApp = true
                }
                console.log('appInfo',data)
            },
            getSelect(data) {
                this.index = data || ''
            },
            getBack() {
                this.showApp = false
            },
            formatDate(date) {
                const y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            changePage() {
                this.tableData1 = this.mockTableData1();
            },
        },
        computed: {

        }
    }
</script>

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

<style lang="less">
    @borderColor: #424242;
    @second-textColor: #CBCBCB;

    //文本副级颜色
    .school-container-header {
        .ivu-input

    {
        background: transparent;
        width: 200px;
        border-color: #4a4a4a;
        color: @second-textColor;
        &::-webkit-input-placeholder

    {
        /* WebKit browsers */
        color: #999;
        font-size: 12px;
    }

    }
    }

    .school-container-right {
        .search-wrap

    {
        .ivu-input

    {
        background: transparent;
        width: 250px;
        border-color: #4a4a4a;
        color: @second-textColor;
        &::-webkit-input-placeholder

    {
        /* WebKit browsers */
        color: #999;
        font-size: 12px;
    }

    }

    .ivu-select {
        width: 200px;
        margin-left: 20px;
    }

    }

    .table-wrap {
        .ivu-table

    {
        background: transparent;
    }

    .ivu-table th,
    .ivu-table td {
        background: transparent;
        color: @second-textColor;
        border-color: @borderColor;
        height: 60px;
    }

    .ivu-table:before,
    .ivu-table-border:after,
    .ivu-table-wrapper-with-border {
        background: @borderColor;
        border-color: @borderColor;
    }

    .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
    .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
        background: #2a2a2a;
    }

    .ivu-table-stripe .ivu-table-body tr.ivu-table-row-hover td,
    .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-hover td {
        .ivu-btn

    {
        visibility: visible;
    }

    background: #5C5A5A;
    }
    }


    }
</style>
