<template>
    <div class="detail_contain">
        <p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p>
        <div class="info_contain">
            <service-header :data="service_header_arr"></service-header>
        </div>
        <div class="organtable">
            <p><span></span>组织用户管理  <el-input class="elinput" v-model="input" prefix-icon="el-icon-search" placeholder="请输入关键字"></el-input></p>
            <table-um @adelete="adelete" :headers="header_arr" :paginationShow="true" :stripe="true" :datas="datas"></table-um>
        </div>
        <dialog-action
            ref="myConfirm"
            :confirmOptions="tipsOptions"
            ></dialog-action>
    </div>
</template>

<script>
import serviceHeader from '@/components/service-header'
import tableUm from '@/components/table-um'
import dialogAction from "@/components/dialog-action";
export default {
    props: [],
    components: {
        serviceHeader,
        tableUm,
        dialogAction
    },
    data() {
        return {
            service_header_arr:{
                name:'apaas-mapvideos',
                first:[
                    {
                        name:'业务系统数',
                        text:3,
                    },
                    {
                        name:'组织管理员',
                        text:'2人',
                    },
                ],
                second:[
                    {
                        name:'组织创建时间',
                        text:'2020-06-08 17:34:12',
                    },
                ],
                fixed:true,
            },
            input:'',
            tipsOptions: {
                title:'',
                message:"",
                btnSubmitText: "",
                btnCancelText: "",
                position: "",
            },
            datas:[
                {
                    id:1,
                    account:'qwwww',
                    name:'wwwww',
                    type:'eeeee',
                    time:"qwewewewrwe"
                },
                {
                    id:2,
                    account:'qwwww',
                    name:'wwwww',
                    type:'eeeee',
                    time:"qwewewewrwe"
                },
                {
                    id:3,
                    account:'qwwww',
                    name:'wwwww',
                    type:'eeeee',
                    time:"qwewewewrwe"
                },
                {
                    id:4,
                    account:'qwwww',
                    name:'wwwww',
                    type:'eeeee',
                    time:"qwewewewrwe"
                },
                {
                    id:5,
                    account:'qwwww',
                    name:'wwwww',
                    type:'eeeee',
                    time:"qwewewewrwe"
                },
            ],
            header_arr:[
                {
                    prop:'account',
                    label:'账号',
                    minWidth:'25%',
                    align:'left',
                },
                {
                    prop:'name',
                    label:'业务系统名称',
                    minWidth:'25%',
                    align:'left',
                },
                {
                    prop:'type',
                    label:'用户类型',
                    minWidth:'25%',
                    align:'center',
                },
                {
                    prop:'time',
                    label:'上次操作修改时间',
                    minWidth:'25%',
                    align:'center',
                },
                {
                    label: "操作",
                    type: "Button",
                    width:'120px',
                    align: "center",
                    width: 140,
                    btnList: [
                        {
                            type: "adelete",
                            label: "删除",
                        },
                    ],
                },
            ]
        };
    },
    watch: {

    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        adelete(val){
            this.tipsOptions= {
                title:'',
                message:"",
                btnSubmitText: "",
                btnCancelText: "",
                position: "",
            }
            this.tipsOptions.message="是否删除该数据"
            this.tipsOptions.confirmSubmit = () => {
                console.log("deleteItem - "+JSON.stringify(val));
                this.$refs.myConfirm.hideModel();
            };
            this.$refs.myConfirm.showModel();
        },
    },
};
</script>

<style>
.organtable .el-input__inner{
    width: 240px;
}
.organtable .el-input{
    width: 240px;
}
</style>
<style scoped>
.detail_contain{
    width: 100%;
    padding: 0 20px;
    height: calc(100% - 84px);
    margin-bottom: 20px;
}
.info_contain{
    padding: 25px 20px;
    background-color: #fff;
    width: 100%;
    box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
	border-radius: 12px;
}
.now_page_title{
    margin: 15px 0;
    color: #898d9e;
}
.now_page_title span{
    color: #242c43;
}
.organtable{
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 210px);
    background-color: #fff;
    box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
	border-radius: 12px;
    padding: 20px;
    
}
.organtable p{
    font-size: 16px;
    color: #58617a;
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid #f4f7fc;
    margin-bottom: 10px;
}
.organtable p span{
    display: inline-block;
    width: 4px;
	height: 16px;
	background-color: #515fe7;
	border-radius: 2px;
    margin-right: 15px;
    vertical-align: -3px;
}
.organtable .elinput{
    float: right;
}
</style>
