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

        <div class="footout">
            <span>共{{service_arr.length}}项服务</span> 
            <span class="applybtn" @click="sub_service()">提交申请</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'
                },
                
            ],
            post_arr:[],
            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'
                }
            ],
            temp_sub_arr:[]
           
        };
    },
    watch: {

    },
    computed: {

    },
    created() {
        if(this.$route.query.service_id){
            this.get_one_service(this.$route.query)
        }else if(this.$route.query.app_id){
            this.get_one_app()
        }else{
            console.log(JSON.parse(window.sessionStorage.getItem('shoppingCart')));
            var temp_arr=[]
            JSON.parse(window.sessionStorage.getItem('shoppingCart')).forEach(e => {
                temp_arr.push(e.id)
            });
            this.get_car_list(temp_arr)
        }
    },
    mounted() {
        
    },
    methods: {
        get_one_app(){

        },
        get_one_service(service_data){
            this.$http
                .get(`/apaas/serviceapp/v3/shopcart/serviceinfo?service_id=${service_data.service_id}`)
                .then(response => {
                    console.log(response);
                    let data = response.data.data
                    if(response.data.success&&data){
                         //服务
                        this.post_arr = [data]
                        this.post_arr[0].service_id = parseInt(service_data.service_id)
                        this.post_arr[0].spec_id = parseInt(service_data.spec_id)
                        this.post_arr[0].duration_method = parseInt(service_data.duration_unit)
                        this.post_arr[0].duration = parseInt(service_data.duration)
                        this.post_arr[0].id = ''
                        this.service_arr.push({})
                        this.service_arr[0]['img'] = data.cover
                        this.service_arr[0]['title'] = data.name
                        this.service_arr[0]['type'] = data.data_service_type1_name
                        this.service_arr[0]['tips'] = [
                            {
                                tip:this.share_arr[data.openness].name,
                                type:this.share_arr[data.openness].val
                            }
                        ]
                        this.service_arr[0]['auth'] = data.organization_name
                        this.service_arr[0]['size'] = '规格：'
                        data.request_spcs_info.forEach(el => {
                            if(service_data.spec_id==el.id){
                                this.service_arr[0]['size'] = this.service_arr[0]['size'] + '访问次数：'+el.count+',访问量：'+el.pv+','
                            }
                        });
                        this.service_arr[0]['applytype'] = '申请方式：'+(service_data.duration_unit==1?'月':'年')
                        this.service_arr[0]['num'] = service_data.duration
                        this.service_arr[0]['isMg'] = data.openness == 3
                        this.service_arr[0]['data'] = JSON.parse(data.res_fields)
                        console.log(this.service_arr[0]['data']);
                        this.service_arr[0]['isapp'] = false
                    }else{
                        this.$message.error(response.data.errMsg)
                    }
                }).catch(()=>{
                    
                })
        },
        deal_data(data){
            data.forEach(e => {
                if(e.selected){
                    e.selected = 1
                }else{
                    e.selected = 0
                }
                if(e.children&&e.children.length){
                    this.deal_data(e.children)
                }
            });
        },
        sub_service(){
            console.log(this.$refs.apply_service.$refs.apply_service_state);
            console.log(this.$refs.apply_service.$refs.apply_service_state[0].$refs.apply_service_state_table.metaData);
            let formInline = this.$refs.apply_info.formInline
            if(formInline.preson&&formInline.phone){
                var phone_ruler=/^(?:(?:\+|00)86)?1[3-9]\d{9}$/
                if(!phone_ruler.test(formInline.phone)){
                    this.$message.error('输入正确号码')
                    return
                }
                var temp = {
                    "apply_part":{
                        "o_name":formInline.preson,
                        "o_mobile":formInline.phone
                    },
                    carts:[]
                }
                var temp1 = this.$refs.apply_service.$refs.apply_service_state
                this.post_arr.forEach((e,idx) => {
                    if(e.service_id){
                        temp.carts.push(
                            {
                                "id": e.id,
                                "service_id": e.service_id,
                                "duration": e.duration,
                                "spec_id": e.spec_id,
                                "duration_method": e.duration_method,
                                "is_subscribe": e.is_subscribe,
                                "app_id": 0,
                                "scene":temp1[idx].sceneinput,
                                "apply_file":temp1[idx].fileList,
                                "apply_fields":[],
                            }
                        )
                        this.temp_sub_arr = temp1[idx].$refs.apply_service_state_table.metaData
                        this.deal_data(this.temp_sub_arr)
                        temp.carts[temp.carts.length - 1]['apply_fields'] = this.temp_sub_arr
                    }else{
                        temp.carts.push(
                            {
                                "id": e.id,
                                "service_id":0,
                                "duration": e.duration,
                                "spec_id": e.spec_id,
                                "duration_method": e.duration_method,
                                "is_subscribe": e.is_subscribe,
                                "app_id": e.app_id,
                                "scene":this.$refs.apply_service.$refs.apply_service_state[idx].sceneinput,
                                "apply_file":"",
                            }
                        )
                    }
                });

            }else{
                this.$message.error('请完善服务申请')
                return
            }
            
            for (let index = 0; index < temp.carts.length; index++) {
                const e = temp.carts[index];
                if(e.apply_fields[0].selected == 0){
                    this.$message.error('请选择所需参数')
                    return
                }
            }
            this.$http
            .post(`/apaas/serviceapp/v3/shopcart/apply`,temp)
            .then(response => {
                console.log(response);
                if(response.data.success){
                    this.$message.success('申请成功')
                    this.$router.replace('/shop/service_application_successfully')
                }else{
                    this.$message.error('申请失败')
                }
            }).catch(()=>{
                this.$message.error('申请失败')
            })
        },
        get_car_list(car_arr){
            this.service_arr = []
            this.post_arr = []
            this.$http
            .get(`/apaas/serviceapp/v3/shopcart/list`)
            .then(response => {
                console.log(response);
                let data = response.data.data.valid
                data.forEach(e => {
                    if(car_arr.indexOf(e.id)==-1){                                                                                                                                                                                                                              
                        return
                    }
                    this.post_arr.push(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.spec_id==0?'部署':'开发'
                        this.service_arr[l]['applytype'] = '申请方式：'+e.duration_unit==1?'月':'年'
                        this.service_arr[l]['num'] = e.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 => {
                            if(e.spec_id==el.id){
                                this.service_arr[l]['size'] = this.service_arr[l]['size'] + '访问次数：'+el.count+',访问量：'+el.pv+','
                            }
                        });
                        this.service_arr[l]['applytype'] = '申请方式：'+(e.duration_unit==1?'月':'年')
                        this.service_arr[l]['num'] = e.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>
