<template>
    <div class="open-mgmt">
        <!-- 列表 -->
        <div class="open-mgmt-left">
            <div class="open-header">
                <span>开放平台列表</span>
                <div class="open-action">
                    <Icon type="md-add" size="18" style="margin-right: 10px" @click="editOpen(true)" />
                    <Icon type="ios-create" size="18" style="margin-right: 10px" @click="editOpen(true)" />
                    <Icon type="md-trash" size="18" @click="delOpen" />
                </div>
            </div>
            <div class="open-left-list">
                <div :class="['open-list', index == nowIndex ? 'list-select': '']"
                     v-for="(item, index) in openList"
                     :key="index"
                     @click="list(index)"
                >
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </div>
        <!-- 信息 -->
        <div class="open-mgmt-right">
            <div class="open-header">
                <span>平台信息</span>
                <div class="open-action" v-show="isEdit">
                    <div @click="editMgmt(false)">
                        <Icon type="md-checkmark-circle" size="18" />
                        <span>保存平台</span>
                    </div>
                    <div @click="editMgmt(false)">
                        <Icon type="md-close-circle" size="18" />
                        <span>取消编辑</span>
                    </div>
                </div>
            </div>
            <div class="open-right-info">
                <div class="open-info">
                    <!-- 基本信息 -->
                    <!-- <div class="open-info-header">
                        <span>基本信息</span>
                    </div> -->
                    <div class="dark-iview-form disabled-iview-input">
                        <Form :model="openMgInfo" label-position="top">
                            <FormItem label="授权学校">
                                <Input v-model="openMgInfo.school" disabled>XXXXXX学校</Input>
                            </FormItem>
                            <FormItem label="应用名称">
                                <Input v-model="openMgInfo.name"></Input>
                            </FormItem>
                            <FormItem label="ApiToken" class="api-token" v-show="!isEdit">
                                <div class="api-icon">
                                    <Icon type="md-refresh" size="18" style="margin-right: 10px" />
                                    <Icon type="ios-copy" size="18" />
                                </div>
                                <Input
                                    v-model="openMgInfo.token"
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 5 }"
                                    disabled
                                ></Input>
                            </FormItem>
                            <FormItem label="描述">
                                <Input v-model="openMgInfo.des" type="textarea"></Input>
                            </FormItem>
                            <FormItem label="状态">
                                <RadioGroup v-model="openMgInfo.type">
                                    <Radio label="male">启用</Radio>
                                    <Radio label="female">禁用</Radio>
                                </RadioGroup>
                            </FormItem>
                        </Form>
                    </div>
                </div>
                <div class="open-api dark-iview-table">
                    <!-- Api列表 -->
                    <!-- <div class="open-api-header">
                        <span>Api列表</span>
                    </div> -->
                    <Table :columns="apiListCol" :data="apiList"></Table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 开放平台列表
            openList: [
                {
                    name: "fvrhrthtyjhtyhregr",
                },
                {
                    name: "mfghgjyj",
                }
            ],
            // 平台信息
            openMgInfo:{
                school: "XXXXXXXXXX学校",
                name: "",
                des: "",
                type: "",
                token: "zcnjkdfjoiwfjergerghwfhefvsojfoergjorhbnfbkdnvjeroiguitrghbfdvneavnesvbnrbnkbnbrgeirgre"
            },
            // api表头
            apiListCol: [
                {
                    title: '全选',
                    key: 'action',
                    render: (h, params) => {
                        return h('div', [
                            h('Checkbox', {
                                props: {
                                    size: 'small'
                                },
                                style: {
                                    // marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        console.log(params);
                                    }
                                }
                            }, 'View'),
                        ]);
                    }
                },
                {
                    title: "接口名称",
                    key: "name",
                },
                {
                    title: "接口地址",
                    key: "address",
                },
                {
                    title: "请求方法",
                    key: "method",
                },
                {
                    title: "描述",
                    key: "des",
                },
            ],
            // api列表
            apiList: [],
            // 当前下标
            nowIndex: 0,
            isEdit: false,
        }
    },
    methods: {
        editOpen (type) {
            this.isEdit = type
        },
        delOpen () {
            this.openList
        },
        list (index) {
            this.nowIndex = index
        },
        // 编辑平台信息
        editMgmt (type) {
            this.isEdit = type
        }
    }
}
</script>

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