<template>
    <div class="main_box">
        <!-- <navbar title="签约产品"></navbar> -->
        <div class="main">
            <!-- <div class="item" v-if="this.baseInfo.deposit">
                <div class="item_left">存款产品</div>
                <van-icon name="arrow" class="next_icon" @click="handleProduct('deposit')"></van-icon>
            </div>
            <div class="item" v-if="this.baseInfo.loan">
                <div class="item_left">贷款产品</div>
                <van-icon name="arrow" class="next_icon" @click="handleProduct('loan')"></van-icon>
            </div>
            <div class="item" v-if="this.baseInfo.wealth">
                <div class="item_left">财富产品</div>
                <van-icon name="arrow" class="next_icon" @click="handleProduct('wealth')"></van-icon>
            </div>
            <div class="item" v-if="this.baseInfo.intermediate">
                <div class="item_left">中间业务</div>
                <van-icon name="arrow" class="next_icon" @click="handleProduct('intermediate')"></van-icon>
            </div> -->
            
            <van-collapse v-model="activeNames" accordion>
                <van-collapse-item v-for="tag in list" :key="tag.key" :title="tag.name" :name="tag.name">
                    <van-cell-group>
                        <van-cell class="bg" v-for="item in baseInfo[tag.key]" :title="item.title" :key="item.key"></van-cell>
                    </van-cell-group>
                </van-collapse-item>
            </van-collapse>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getBusinessInfo,getPersonInfo,getMerchantInfo } from "@/service/api/custome";
import { Icon, CellGroup, Cell, Collapse, CollapseItem } from 'vant';//button组件
export default {
    props:{
        productType: {
            type: String,
            default: "",   
        },
    },
    data() {
        return {
            list: [
                {
                    name: '存款产品',
                    key: 'deposit'
                },
                {
                    name: '贷款产品',
                    key: 'loan'
                },
                {
                    name: '财富产品',
                    key: 'wealth'
                },
                {
                    name: '中间业务',
                    key: 'intermediate'
                }
            ],
            baseInfo:{
                deposit:null,
                loan:null,
                wealth:null,
                intermediate:null,
            },
            activeNames: ''
        }
    },
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanCellGroup: CellGroup, 
        VanCell: Cell, 
        VanCollapse: Collapse, 
        VanCollapseItem: CollapseItem

    },
    created(){
        this.init()
    },
    methods: {
        objectToArray(obj = {}) {
            let arr = []
            Object.keys(obj).forEach(key => {
                arr.push({
                    key,
                    title: obj[key]
                })
            })
            return arr
        },
        init() {
            let productType = this.productType
            let custId = sessionStorage.getItem('custId')
            if (productType == '1') {
                getBusinessInfo(custId).then(res => {
                    if (res.code == 200) {
                        if (res.code == 200) {
                        this.baseInfo.deposit = this.objectToArray(res.data.signedProducts?res.data.signedProducts.deposit:null)
                        this.baseInfo.loan = this.objectToArray(res.data.signedProducts?res.data.signedProducts.loan:null)
                        this.baseInfo.wealth = this.objectToArray(res.data.signedProducts?res.data.signedProducts.wealth:null)
                        this.baseInfo.intermediate = this.objectToArray(res.data.signedProducts?res.data.signedProducts.intermediate:null)
                    }
                    }
                })
            } else if (productType == '2') {
                getPersonInfo(custId).then(res => {
                    if (res.code == 200) {
                        this.baseInfo.deposit = this.objectToArray(res.data.signedProducts?res.data.signedProducts.deposit:null)
                        this.baseInfo.loan = this.objectToArray(res.data.signedProducts?res.data.signedProducts.loan:null)
                        this.baseInfo.wealth = this.objectToArray(res.data.signedProducts?res.data.signedProducts.wealth:null)
                        this.baseInfo.intermediate = this.objectToArray(res.data.signedProducts?res.data.signedProducts.intermediate:null)
                    }
                })
            } else if (productType == '3') {
                getMerchantInfo(custId).then(res => {
                    if (res.code == 200) {
                        this.baseInfo.deposit = this.objectToArray(res.data.signedProducts?res.data.signedProducts.deposit:null)
                        this.baseInfo.loan = this.objectToArray(res.data.signedProducts?res.data.signedProducts.loan:null)
                        this.baseInfo.wealth = this.objectToArray(res.data.signedProducts?res.data.signedProducts.wealth:null)
                        this.baseInfo.intermediate = this.objectToArray(res.data.signedProducts?res.data.signedProducts.intermediate:null)
                    }
                })
            }


        },
        handleProduct(item) {
            sessionStorage.setItem('nextType', item);
            this.$router.push('/productNext');
        },
    }
}
</script>
<style lang="less" scoped>
.main {
    // padding-top: 46px;
    // min-height: 100vh;
    font-size: 14px;
    // padding-bottom: 60px;
}

.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 15px 20px;
    background-color: #ffffff;
    margin-top: 2px;
    line-height: 40px;
    color: rgb(22, 13, 13);
}

.main_title {
    margin-left: 15px;
    font-size: 14px;
}

.bg {
    background-color: #f4f5fb;
    border-radius: 4px;
    margin-bottom: 4px;
    text-align: center;
}
</style>