<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 v-if="res_data.length" :headers="header_arr" :datas="res_data" slot="zd_table"></table-um>
                      <table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="apply_table"></table-um>
                      <process-card :data="use_approval_arr" 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/table-um'
import processCard from '@/components/process-card'
export default {
    props: {

    },
    components: {
        serviceHeader,
        infoList,
        tableUm,
        processCard
    },
    data() {
        return {
            use_approval_arr:[],
            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:'',
                first:[
                    {
                        name:'服务类型',
                        text:'',
                    },
                    {
                        name:'审批状态',
                        text:'',
                        color:'#515fe7',
                    },
                    {
                        name:'服务到期时间',
                        text:'',
                    },
                ],
                second:[
                    {
                        name:'服务接口地址',
                        text:'',
                    },
                ],
                fixed:false,
            },
            now_service:0,
            list_arr:[
                {
                    title:'服务描述：',
                    info:''
                },
                {
                    title:'服务领域：',
                    info:''
                },
                {
                    title:'发布人：',
                    info:''
                },
                {
                    title:'联系方式：',
                    info:''
                },
                {
                    title:'所属组织：',
                    info:''
                },
                {
                    title:'开放程度：',
                    info:''
                },
                {
                    title:'接口编码：',
                    info:''
                },
                {
                    title:'注册发布时间：',
                    info:''
                },
            ],
            servicead_arr:[
                {
                    title:'请求方式：',
                    info:''
                },
                {
                    title:'请求参数：',
                    info:''
                },
                {
                    title:'请求示例：',
                    info:''
                },
                {
                    title:'编码格式：',
                    info:''
                },
                {
                    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'
                },
            ],
            request_arr:['','GET','POST','PUT','DELETE'],
            res_data:[],
            zd_table_arr:[],
        };
    },
    watch: {

    },
    computed: {

    },
    created() {
        this.get_service_info()
    },
    mounted() {

    },
    methods: {
        get_service_info(){
            this.$http
            .get(`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`)
            .then((response) => {
                console.log(response.data.data);
                let data = response.data.data;
                this.$set(this.service_header_arr, "name", data.name);
                this.$set(this.service_header_arr['first'][0], 'text', data.data_service_type1_name);
                this.$set(this.service_header_arr['first'][1], 'text', data.service_apply_info.approval_status);
                this.$set(this.service_header_arr['first'][2], 'text', data.down_time);
                this.$set(this.service_header_arr['second'][0], "text", data.req_url);
                this.$set(this.service_header_arr, "url", data.cover);
                this.$set(this.list_arr[0], "info", data.descript);
                this.$set(this.list_arr[1], "info", data.data_service_type2_name);
                this.$set(this.list_arr[2], "info", data.service_apply_info.apply_user_info.user_name);
                this.$set(this.list_arr[3], "info", data.service_apply_info.apply_user_info.phone);
                this.$set(this.list_arr[4], "info", data.service_apply_info.apply_user_info.department_name);
                this.$set(this.list_arr[5], "info", data.openness_name);
                this.$set(this.list_arr[6], "info", data.encode_method);
                this.$set(this.list_arr[7], "info", data.create_time.replace('T'," ").split('+')[0]);
                this.$set(this.servicead_arr[0], "info", this.request_arr[data.req_type]);
                this.$set(this.servicead_arr[1], "info", data.req_query?data.req_query:'无');
                this.$set(this.servicead_arr[2], "info", data.req_fields);
                this.$set(this.servicead_arr[3], "info", data.encode_method);
                // this.$set(this.apply_arr[0], "info", data.apply_user_info.phone);
                this.$set(this.apply_arr[1], "info", data.descript);
                this.$set(this.apply_arr[2], "info", data.service_apply_info.business_name);
                this.$set(this.apply_arr[3], "info", data.service_apply_info.business_url);
                this.$set(this.apply_arr[4], "info", data.service_apply_info.apply_file.split('/')[data.service_apply_info.apply_file.split('/').length - 1]);
                this.$set(this.apply_arr[4], "url", data.service_apply_info.apply_file);
                this.$set(this.apply_arr[6], "info", data.service_apply_info.duration+data.service_apply_info.duration_unit);
                this.$set(this.apply_arr[7], "info", data.service_apply_info.apply_time);
                this.zd_table_arr = [
                    {
                        wfwmc:data.name,
                        jkzt:data.health_state,
                        jklj:data.req_url,
                        wfwms:data.descript
                    }
                ]
                console.log(this.zd_table_arr);
                data.service_apply_info.approval_process.reverse().forEach(e => {
                        this.use_approval_arr.push(
                            {
                                title:e.id==1?'一级审批':'二级审批',
                                result:e.status==-1?'审批未通过':e.status==0?'审批中':'审批通过',
                            }
                        )
                    
                    if(e.status!==0){
                        this.use_approval_arr[this.use_approval_arr.length - 1]['arr']=[
                            {
                                title:'审批时间：',
                                info:e.approval_time
                            },
                            { 
                                title:'审批单位：',
                                info:e.user_info.department_name
                            },
                            {
                                title:'审批人：',
                                info:e.user_info.user_name
                            },
                            {
                                title:'审批意见：',
                                info:e.comments
                            },
                        ]
                        
                    }
                });
                this.res_data = JSON.parse(data.res_fields)
            })
            .catch(function(response) {

            });
        },
    },
};
</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>
