<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:servicead_arr">
                      <table-um :headers="header_arr" url="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 {
            header_arr:[
                {
                    prop:'zdmc',
                    label:'字段名称',
                    minWidth:'20%',
                    align:'left',
                },
                {
                    prop:'zdbm',
                    label:'字段编码',
                    width:'100px',
                    align:'center',
                },
                {
                    prop:'zdlx',
                    label:'字段类型',
                    width:'100px',
                    align:'center',
                },
                {
                    prop:'zdsm',
                    label:'字段说明',
                    minWidth:'30%',
                    align:'left',
                },
                {
                    prop:'zdsl',
                    label:'字段示例数值',
                    width:'120px',
                    align:'left',
                },
            ],
            
            service_header_arr:{
                name:'apaas-mapvideos',
                first:[
                    {
                        name:'服务类型',
                        text:'综合服务',
                    },
                    {
                        name:'服务领域',
                        text:'经济建设',
                    },
                    {
                        name:'审批状态',
                        text:'待审批',
                        color:'#ef9433',
                    },
                ],
                second:[
                    {
                        name:'申请时间',
                        text:'2019-02-17 21:56:23',
                    },
                ],
                fixed:false,
            },
            service_arr:['服务申请信息','服务审批'],
            now_service:0,
            list_arr:[
                {
                    title:'申请单位：',
                    info:'北京比格大数据有限公司'
                },
                {
                    title:'申请人：',
                    info:'李子维'
                },
                {
                    title:'申请人联系电话：',
                    info:'18342803360'
                },
                {
                    title:'场景描述：',
                    info:'申请贵州省行政区划地图服务用于贵州省疫情监控决策指挥系统。'
                },
                {
                    title:'调用业务系统：',
                    info:'决策指挥系统'
                },
                {
                    title:'业务系统域名：',
                    info:'https://apaas.wodcloud.com/'
                },
                {
                    title:'申请文件：',
                    info:'xxxx文件名称.txt',
                    type:'down'
                },
                {
                    title:'申请内容：',
                    info:'',
                    type:'solt',
                    solt_name:'zd_table'
                },
                {
                    title:'申请时长：',
                    info:'1年'
                },
                {
                    title:'申请规格：',
                    info:'访问次数：20/日，访问量：100/日'
                },
            ],
        };
    },
    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>
