<template>
    <div class="app-info">
        <div class="settings-header">
            <span :class="['settings-header-item',activeTab === 'info' ?  'active-item' : '']" @click="onTabChange('info')">基础信息</span>
            <span :class="['settings-header-item',activeTab === 'staff' ?  'active-item' : '']" @click="onTabChange('staff')">人员管理</span>
            <span :class="['settings-header-item',activeTab === 'inform' ?  'active-item' : '']" @click="onTabChange('inform')">事件订阅</span>
            <span :class="['settings-header-item',activeTab === 'setting' ?  'active-item' : '']" @click="onTabChange('setting')">开发管理</span>
            <span :class="['settings-header-item',activeTab === 'auth' ?  'active-item' : '']" @click="onTabChange('auth')">权限管理</span>
            <Button style="float:right;margin:10px 10px"  @click="goBack"> <Icon type="ios-arrow-back"></Icon>返回</Button>
        </div>
        <div class="content-info dark-iview-form">
            <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>
</template>

<script>
    export default {
        data() {
            return {
                teacherInfo: {
                    defaultschool: ''
                },
                index: 'mge',
                tableData1: this.mockTableData1(),
                activeTab: 'info',
                formValidate: {
                    name: '',
                    key: '',
                    secret: '',
                    id: '',
                    model: [],
                    num: 0
                },
                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' }
                    ],
                }
            }
        },
        created() {

        },
        methods: {
            onTabChange(data) {
                this.activeTab = ''
                if (data) {
                    this.activeTab = data
                }
            },
            goBack() {
                this.$emit('back','')
            },
            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;
            },
            getSelect(data) {
                this.index = data || ''
            },
            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;
            },
        },
        computed: {

        }
    }
</script>

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

<style lang="less">
    @border-color:#444;
    @second-textColor: #CBCBCB;

    //文本副级颜色
    .app-info {
        height: 100%;
        display: flex;
        flex-direction: column;
        .settings-header{
        height: 50px;
        border-bottom: 1px solid @border-color;

        &-item{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        margin-top: 5px;
        margin-left: 50px;
        color: @label-textColor;
        cursor: pointer;
    }
    .active-item {
        font-size: 14px;
        color: #fff;
        border-bottom: 2px solid @primary-color;
    }
    }
    .content-info{
        width:50%;
        margin-left:5%;
        margin-top:25px;
    }
    }
</style>
