<template>
    <view class="account">
        <view @tap.stop="onOpen">
            <slot></slot>
        </view>
        <c-popup
            :show="show"
            z-index="921"
            :title="'账户储蓄'"
            :show-close="true"
            :show-close-handler="false"
            :title-style="{
                color: '#1f1f1f',
                display: 'inline-block',
                'margin-bottom': '12px',
            }"
            close-icon="guanbi"
            max-height="80vh"
            min-height="50vh"
            border-radius="21px"
            :row-tile="true"
            stop-scroll-through
            :scroll-view="true"
            :btns="btns"
            @btntap="handleBtnTap"
            @close="onClose"
        >
            <view class="pop-wrapper">
                <view 
                    class="popup-con inner-wrapper"
                >
                    <view 
                        v-for="(item,i) in data" 
                        :key="'card_' + i"
                        class="account_item"
                    >
                        <account-card-item :card="item"/>
                    </view>
                    
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 账户储值卡
 * @author  hanwensheng@baidu.com
 * @categories 业务组件
 * @tags [component]
 */
/* eslint-disable */
/* global Page swan  getApp */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CButton from '@baidu/med-ui/components/Button/Button';
import AccountCardItem from './AccountCardItem';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
        CPopup,
        CButton,
        AccountCardItem
    },
    props: {
        data: {
            type: Array,
            default(){
                return []
            }
        }
    },
    watch: {
    },
    data() {
        return {
            show: false,
            btns:[
                {
                    background: 'linear-gradient(#FD503E 0%, #F7603E 100%)',
                    borderRadius: '66px',
                    type: 'primary',
                    text: '完成',
                    event: 'confirm'
                }
            ]
        };
    },
    computed:{
    },
    methods: {
        onOpen() {
            this.show = true;
        },
        onClose() {
            this.show = false;
        },
        handleBtnTap(btn){
            if(btn.event === 'confirm'){
                this.onConfirm();
            }
        },
        onConfirm() {
            this.show = false;
            this.$emit('onConfirm');
        }
    }
};
</script>
<style lang="less" scoped>
.account {
    &_btn{
        padding-top: 0.09rem;
        position: relative;
        &_line{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            background: #E0E0E0;
            height: 1px;
            transform: scaleY(0.33);
        }
    }
    &_item{
        margin-bottom: 0.09rem;
    }
}
.inner-wrapper{
    padding-left: .17rem;
    padding-right: .17rem;
}
.pop-wrapper {
    padding-bottom: calc(0.09rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(0.09rem + env(safe-area-inset-bottom));
    position: relative;
}
.option-item {
    font-family: PingFangSC-Regular;
    padding-bottom: .25rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .16rem;
    line-height: 0.2rem;
    color:#1f1f1f;
}
.popup-con {
    max-height: calc(80vh - 1.33rem - constant(safe-area-inset-bottom));
    min-height: calc(50vh - 1.33rem - constant(safe-area-inset-bottom));
    max-height: calc(80vh - 1.33rem - env(safe-area-inset-bottom));
    min-height: calc(50vh - 1.33rem - env(safe-area-inset-bottom));
    box-sizing: border-box;
}
</style>
