<template>
    <div class="apply_container">
        <info-list :list_arr="module_arr">
            <apply-form slot="apply_info"></apply-form>
            <service-list slot="apply_service" :service_arr="service_arr"></service-list>
        </info-list>

        <div class="footout">
            <span>共{{service_arr.length}}项服务</span> 
            <span class="applybtn">提交申请</span>
        </div>
    </div>
</template>

<script>
import infoList from "@/components/infoList";
import applyForm from "@/components/shop-car-apply/apply_form";
import serviceList from "@/components/shop-car-apply/service_list";
export default {
    props: {

    },
    components: {
        infoList,
        applyForm,
        serviceList
    },
    data() {
        return {
            module_arr:[
                {
                    title:'服务申请',
                    type:'solt',
                    solt_name:'apply_info'
                },
                {
                    title:'申请的服务',
                    type:'solt',
                    solt_name:'apply_service'
                },
                
            ],
            service_arr:[
                {
                    img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
                    title:'水路货物周转量情况水路货物周转量情况',
                    tips:[
                        {
                            tip:'Map Service',
                            type:'nor'
                        },
                        {
                            tip:'共享',
                            type:'share'
                        },
                    ],
                    type:'基础数据服务',
                    auth:'贵州省交通运输厅',
                    size:'规格：访问次数：20/日，访问量：100/日',
                    applytype:'申请方式：按月',
                    num:1,
                    isMg:false,
                    tableurl:'applydata',
                },
                {
                    img:'http://b-ssl.duitang.com/uploads/item/201705/09/20170509165713_NiHaG.jpeg',
                    title:'水路货物周转量情况水路货物周转量情况',
                    tips:[
                        {
                            tip:'Map Service',
                            type:'nor'
                        },
                        {
                            tip:'敏感',
                            type:'mg'
                        },
                    ],
                    type:'基础数据服务',
                    auth:'贵州省交通运输厅',
                    size:'规格：访问次数：20/日，访问量：100/日',
                    applytype:'申请方式：按月',
                    num:1,
                    isMg:true,
                    tableurl:'applydata',
                },
            ],
            share_arr:[
                '',
                {
                    name:'共享',
                    val:'share'
                },
                {
                    name:'受限',
                    val:'limit'
                },
                {
                    name:'敏感',
                    val:'mg'
                }
            ],
           
        };
    },
    watch: {

    },
    computed: {

    },
    created() {
        this.get_car_list()
    },
    mounted() {
        
    },
    methods: {
        get_car_list(){
            this.service_arr = []
            this.$http
            .get(`/apaas/serviceapp/v3/shopcart/list`)
            .then(response => {
                console.log(response);
                let data = response.data.data.valid
                data.forEach(e => {
                    this.service_arr.push({})
                    let l = this.service_arr.length -1
                    if(e.app_id){
                        //应用
                        this.service_arr[l]['img'] = e.application.logo
                        this.service_arr[l]['title'] = e.application.app_name
                        this.service_arr[l]['type'] = e.application.type_name
                        this.service_arr[l]['auth'] = e.application.org_name
                        this.service_arr[l]['size'] = e.app_apply.apply_type==0?'部署':'开发'
                        this.service_arr[l]['applytype'] = '申请方式：'+e.app_apply.duration_unit==1?'月':'年'
                        this.service_arr[l]['num'] = e.app_apply.duration
                        this.service_arr[l]['isMg'] = false
                        this.service_arr[l]['isapp'] = true
                    }else{
                        //服务
                        this.service_arr[l]['img'] = e.service.cover
                        this.service_arr[l]['title'] = e.service.name
                        this.service_arr[l]['type'] = e.service.data_service_type1_name
                        this.service_arr[l]['tips'] = [
                            {
                                tip:this.share_arr[e.service.openness].name,
                                type:this.share_arr[e.service.openness].val
                            }
                        ]
                        this.service_arr[l]['auth'] = e.service.organization_name
                        this.service_arr[l]['size'] = '规格：'
                        e.service.request_spcs_info.forEach(el => {
                            this.service_arr[l]['size'] = this.service_arr[l]['size'] + '访问次数：'+el.count+',访问量：'+el.pv+','
                        });
                        this.service_arr[l]['applytype'] = '申请方式：'+(e.service_apply.duration_unit==1?'月':'年')
                        this.service_arr[l]['num'] = e.service_apply.duration
                        this.service_arr[l]['isMg'] = e.service.openness == 3
                        this.service_arr[l]['data'] = JSON.parse(e.service.res_fields)
                        console.log(this.service_arr[l]['data']);
                        this.service_arr[l]['isapp'] = false
                    }
                });
                // this.service_arr = 
            })
            .catch((response)=> {
                
            });
        },
        
    },
};
</script>

<style scoped>
.apply_container{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.footout{
    width: 100%;
    height: 84px;
    background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 3px 6px 0px 
		rgba(244, 247, 252, 1);
	border-radius: 12px;
    padding: 20px;
    text-align: right;
    margin: 20px 0;
}
.applybtn{
    color: rgba(252, 239, 214, 1);
    width: 200px;
	height: 44px;
    line-height: 44px;
    text-align: center;
    display: inline-block;
	background-color: rgba(229, 102, 0, 1);
	border-radius: 8px;
    margin-left: 20px;
    cursor: pointer;
}
</style>
