<template>
    <view
        class="modal-cont img-background"
        :class="[
            'modal-cont-' + daka.isOpen,
        ]"
        :style="{
            backgroundImage: 'url(' + imgBg + ')',
        }"
        @tap.stop
    >
        <view
            :class="[daka.isOpen ? 'modal-cont-chai-done' : 'modal-cont-chai']"
            @tap.stop="onClose('red_' + daka.isOpen)"
        />
        <c-icon
            class="modal-close"
            name="close-circle"
            font-size="32px"
            @tap.stop="onClose('close')"
        />
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
/**
 * @file 卡券
 * @author chenshuo04
 * @categories 组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
        * 弹窗内容
        */
        daka: {
            type: Object,
            required: true
        }
    },
    computed: {
        imgBg() {
            const isOpen = this.daka.isOpen;
            if (isOpen === true) {
                return this.imgs.opened;
            }
            else if (isOpen) {
                return this.imgs[isOpen];
            }
            
            return this.imgs.open;
            
        }
    },
    components: {
        CIcon
    },
    data() {
        return {
            imgs: {
                open: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=486352496,1281852573&fm=179&app=35&f=PNG?w=978&h=1169',
                opened: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4211926464,1311322434&fm=179&app=35&f=PNG?w=1242&h=1237',
                guide: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=33788949,1444323947&fm=179&app=35&f=PNG?w=888&h=987'
            }
        };
    },
    methods: {
        onClose(type, isBtn) {
            /**
             * 关闭
             */
            this.$emit('onClose', type, isBtn, this.daka);
        },
        onTipTap(type, extra) {
            /**
             * 点击
             */
            this.$emit('onTipTap', type, extra);
        }
    }
};
</script>
<style lang="less" scoped>
.modal-cont {
    position: absolute !important;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-55%);
    width: 75vw;
    height: 90vw;
    margin-left: 12.5vw;
    text-align: center;
    &-chai {
        position: absolute;
        bottom: 12%;
        width: 30vw;
        height: 30vw;
        background: transparent;
        &-done {
            position: absolute;
            bottom: 15%;
            width: 80vw;
            height: 15vw;
            background: transparent;
        }
    }
}
.modal-cont-true {
    width: 100vw;
    height: 99.6vw;
    margin-left: 0;
}
.modal-cont-guide {
    width: 72vw;
    height: 80vw;
    margin-left: 14vw;
}
.modal-close {
    position: absolute;
    bottom: -42px;
    left: 0;
    right: 0;
    color: #fff;
}
.img-background {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}
.text-background {
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
}
</style>
