<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 class="type_box">
                <div class="type_title">
                    <div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}">{{item}}</div>
                </div>
                <div class="type_box_select">
                    <info-list :list_arr="now_service==0?list_arr:now_service==1?servicead_arr:apply_arr">
                      <table-um :headers="header_arr" url="min_service_params_arr" slot="zd_table"></table-um>
                      <table-um :headers="header_arr" url="apply_params_arr" slot="apply_table"></table-um>
                      <process-card :data="approval_arr1" slot="approval"></process-card>
                    </info-list>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import serviceHeader from '@/components/service-header'
import infoList from '@/components/infoList'
import tableUm from '@/components/table-um'
import processCard from '@/components/process-card'
export default {
    props: {

    },
    components: {
        serviceHeader,
        infoList,
        tableUm,
        processCard
    },
    data() {
        return {
            approval_arr:[
                {
                    title:'一级审批',
                    result:'审批通过',
                    arr:[
                        {
                            title:'审批时间：',
                            info:'2020-02-28 15:23:45'
                        },
                        { 
                            title:'审批单位：',
                            info:'某某某城管局'
                        },
                        {
                            title:'审批人：',
                            info:'张先生'
                        },
                        {
                            title:'审批意见：',
                            info:'同意'
                        },
                    ]
                },
                {
                    title:'二级审批',
                    result:'审批通过',
                    arr:[
                        {
                            title:'审批时间：',
                            info:'2020-02-28 15:23:45'
                        },
                        { 
                            title:'审批单位：',
                            info:'某某某城管局'
                        },
                        {
                            title:'审批人：',
                            info:'张先生'
                        },
                        {
                            title:'审批意见：',
                            info:'同意'
                        },
                    ]
                },
                {
                    title:'三级审批',
                    result:'审批中',
                },
            ],
            approval_arr1:[
                {
                    title:'一级审批',
                    result:'审批通过',
                    arr:[
                        {
                            title:'审批时间：',
                            info:'2020-02-28 15:23:45'
                        },
                        { 
                            title:'审批单位：',
                            info:'某某某城管局'
                        },
                        {
                            title:'审批人：',
                            info:'张先生'
                        },
                        {
                            title:'审批意见：',
                            info:'同意'
                        },
                    ]
                },
                {
                    title:'二级审批',
                    result:'审批通过',
                    arr:[
                        {
                            title:'审批时间：',
                            info:'2020-02-28 15:23:45'
                        },
                        { 
                            title:'审批单位：',
                            info:'某某某城管局'
                        },
                        {
                            title:'审批人：',
                            info:'张先生'
                        },
                        {
                            title:'审批意见：',
                            info:'同意'
                        },
                    ]
                },
                {
                    title:'三级审批',
                    result:'审批未通过',
                    arr:[
                        {
                            title:'审批时间：',
                            info:'2020-02-28 15:23:45'
                        },
                        { 
                            title:'审批单位：',
                            info:'某某某城管局'
                        },
                        {
                            title:'审批人：',
                            info:'张先生'
                        },
                        {
                            title:'审批意见：',
                            info:'不同意，驳回。'
                        },
                    ]
                },
            ],
            header_arr:[
                {
                    prop:'wfwmc',
                    label:'微服务名称',
                    minWidth:'20%',
                    align:'left',
                },
                {
                    prop:'jkzt',
                    label:'健康状态',
                    width:'120px',
                    align:'center',
                },
                {
                    prop:'jklj',
                    label:'接口链接',
                    minWidth:'40%',
                    align:'center',
                },
                {
                    prop:'wfwms',
                    label:'微服务描述',
                    minWidth:'40%',
                    align:'left',
                },
            ],
            service_arr:['服务基本信息','接口详细信息','申请审批信息'],
            service_header_arr:{
                name:'apaas-mapvideos',
                first:[
                    {
                        name:'服务类型',
                        text:'综合服务',
                    },
                    {
                        name:'审批状态',
                        text:'审批通过',
                        color:'#515fe7',
                    },
                    {
                        name:'服务到期时间',
                        text:'2020-06-08 17:34:12',
                    },
                ],
                second:[
                    {
                        name:'服务接口地址',
                        text:'http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000',
                    },
                ],
                fixed:false,
            },
            now_service:0,
            list_arr:[
                {
                    title:'服务描述：',
                    info:'地图视频融合服务'
                },
                {
                    title:'服务领域：',
                    info:'城市建设'
                },
                {
                    title:'发布人：',
                    info:'小北'
                },
                {
                    title:'联系方式：',
                    info:'18342803360'
                },
                {
                    title:'所属组织：',
                    info:'北京比格大数据有限公司'
                },
                {
                    title:'开放程度：',
                    info:'共享'
                },
                {
                    title:'接口编码：',
                    info:'chart'
                },
                {
                    title:'注册发布时间：',
                    info:'2019-02-17 21:09:23'
                },
            ],
            servicead_arr:[
                {
                    title:'请求方式：',
                    info:'post'
                },
                {
                    title:'请求参数：',
                    info:'无请求参数'
                },
                {
                    title:'请求示例：',
                    info:'无请求示例'
                },
                {
                    title:'编码格式：',
                    info:'UTF-8'
                },
                {
                    title:'响应参数：',
                    info:'',
                    type:'solt',
                    solt_name:'zd_table'
                },
            ],
            apply_arr:[
                {
                    title:'申请信息',
                    prop:'title'
                },
                {
                    title:'场景描述：',
                    info:'申请mapvideos服务用于贵州省疫情监控决策指挥系统。'
                },
                {
                    title:'调用业务系统：',
                    info:'决策指挥系统'
                },
                {
                    title:'业务系统域名：',
                    info:'https://apaas.wodcloud.com/'
                },
                {
                    title:'申请文件：',
                    info:'mapvideos申请书.docx',
                    type:'down'
                },
                {
                    title:'申请内容：',
                    info:'',
                    type:'solt',
                    solt_name:'apply_table'
                },
                {
                    title:'申请规格：',
                    info:'访问次数：20/日，访问量：100/日'
                },
                {
                    title:'申请时长：',
                    info:'1年'
                },
                {
                    title:'申请时间：',
                    info:'2020-02-27 12:23:54'
                },
                {
                    title:'审批信息', 
                    prop:'title',
                    type:'solt',
                    solt_name:'approval'
                },
            ],
        };
    },
    watch: {

    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style scoped>
.detail_contain{
    width: 100%;
    padding: 0 20px;
    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;
}
.type_box{
    width: 100%;
}
.type_title{
    width: 100%;
    height: 65px;
    line-height: 65px;
    border-bottom: 2px solid #f4f7fc;
}
.type_select{
    float: left;
    width: auto;
    margin-right: 40px;
    height: 65px;
    cursor: pointer;
}
.type_box_select{
    padding: 30px 10px 10px 10px;
    width: 100%;
}
</style>
