<template>
    <div class="propBox">
        <transition name="zgh-prop">
            <div class="prop middle_before" ref="prop"  :class="currentActive ? 'active' : ''" v-show="currentActive" :style="styles">
                <div class="middle " style="min-width: 100%;">
                    <slot name="head"></slot>
                    <slot name="cont"></slot>
                    <slot name="foot"></slot>
                    <div class="close" @click="hideProp"></div>
                </div>
            </div>
        </transition>

        <div class="mask" :class="currentActive ? 'active' : ''" @click="maskHandle">X</div>

    </div>

</template>

<script>
    export default {
        name: 'ZghProp',
        props: {
            value: {
                default() {
                    return false;
                }
            },
            isMaskClick: {
                default() {
                    return true;
                }
            },
            styles: {
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                currentActive: this.value
            }
        },
        watch: {
            currentActive(val) {
                this.$emit('input', val);
            },
            value() {
                this.currentActive = this.value;
            }
        },
        computed: {},
        mounted() {

        },
        methods: {
            hideProp() {
                this.currentActive = false;
                this.$emit('handleMask')
                // document.getElementsByTagName('html')[0].style.overflow = 'auto';
                // document.getElementsByTagName('body')[0].style.overflow = 'auto';
            },
            maskHandle() {
                if (!this.isMaskClick) return;
                this.hideProp()
            }
        }
    }
</script>

<style lang="less">
    @import url("../../assets/config.less");

    @common_color: 'red';
    .prop {
        position: absolute;
        top: 50%;
        left: 50%;
        max-height: 90%;
        height: auto;
        width: 90%;
        max-width: 80%;
        transform: translate(-50%, -50%);
        /*opacity: 0;*/
        z-index: 1000;
        /*transform:  translate(-50%, -50%) ;*/
        /*overflow-y: scroll;*/
        overflow-x: hidden;

        .close {
            position: absolute;
            top: 0;
            right: 0px;
            width: 45px;
            height: 45px;
            background:url('../../assets/images/close.png') no-repeat center;
          background-size: .8rem;
        }
        .prop_head {
            width: 400px;
            margin: 30px auto 0;
            font-size: 22px;
            img {
                width: 80px;
                height: 80px;
                margin-right: 20px;
            }
        }
        .prop_cont {
            padding-bottom: 100px;
            textarea {
                display: block;
                width: 400px;
                height: 160px;
                overflow-y: auto;
                margin: 30px auto;
                padding: 15px 0 30px;
                box-sizing: border-box;
                border-radius: 10px;
                border: 1px solid #ccc;
                text-indent: 20px;
                color: #999;
                font-size: 16px;
                resize: none;
            }
        }
        .prop_foot {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 20px 0;
            text-align: center;
            background: #fff;
            button {
                display: inline-block;
                width: 146px;
                height: 40px;
                line-height: 40px;
                border-radius: 40px;
                background: @common_color;
                color: #fff;
                cursor: pointer;
            }
        }
    }
</style>
