<template>
    <div class="border-header-1" :ref="ref">
        <svg
            :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`"
            :width="width"
            :height="height"
        >
           
            <polyline
                class="dv-bb5-line-2"
                :stroke="mergedColor[0]"
                :points="`6,6  ${width - 6},6  ${width - 6},22
                 ${width - 6}, ${height - 6}  6, ${height - 6} 
                  6, 6`"
            />
            <!-- <polygon
                class="dv-bb5-line-4"
                :fill="backgroundColor"
                fill-opacity="0.8"
                :points="`5,5  30,5  5, 30`"
            />
            <polygon
                class="dv-bb5-line-4"
                :fill="backgroundColor"
                fill-opacity="0.8"
                :points="`${width - 5},${height - 30}  ${width - 5},${height - 5}  ${width - 30}, ${height - 5}`"
            />

            <polyline
                class="dv-bb5-line-2"
                :stroke="mergedColor[1]"
                :points="`3,3  ${width - 20},3  ${width - 2},20
                 ${width - 2}, ${height - 3}  20, ${height - 3} 3, ${height - 20}    3, 3`"
            />
            <polyline
                class="dv-bb5-line-2"
                :stroke="mergedColor[0]"
                :points="`6,6  ${width - 6},6  ${width - 6},22
                 ${width - 6}, ${height - 6}  6, ${height - 6} 
                  6, 6`"
            /> -->
            <!-- <polyline
                class="dv-bb5-line-2"
                :stroke="mergedColor[1]"
                :points="`9,9  ${width - 26},9  ${width - 10},24
                 ${width - 10}, ${height - 9}  9, ${height - 9} 
                  9, 9`"
            /> -->

            <!-- <polyline
                class="dv-bb5-line-6"
                :stroke="mergedColor[0]"
                :points="`${width - 9},20 ${width - 9}, ${height - 8}`"
            /> -->

            <!-- <polygon
                class="dv-bb5-line-4"
                :fill="mergedColor[1]"
                fill-opacity="0.3"
                :points="`3,${height - 3}  60,${height - 3}  60,${
                    height - 13
                }  3,${height - 13}`"
            /> -->

            <!-- <polyline
                class="dv-bb5-line-6"
                :stroke="mergedColor[0]"
                :points="`15, ${height - 13} ${width - 20}, ${height - 13}`"
            /> -->

            
        </svg>

        <div class="border-box-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import autoResize from './js/autoResize'
import utils from '@/hotent-ui-util.js'

export default {
    name: 'BorderHeader1',
    mixins: [autoResize],
    props: {
        color: {
            type: Array,
            default: () => [],
        },
        reverse: {
            type: Boolean,
            default: false,
        },
        backgroundColor: {
            type: String,
            default: 'transparent',
        },
    },
    data() {
        return {
            ref: 'border-header-1',

            defaultColor: [
                'rgba(255, 255, 255, 0.35)',
                'rgba(255, 255, 255, 0.20)',
            ],

            mergedColor: [],
        }
    },
    watch: {
        color() {
            const {mergeColor} = this

            mergeColor()
        },
    },
    methods: {
        mergeColor() {
            const {color, defaultColor} = this

            this.mergedColor = utils.deepMerge(
                utils.deepClone(defaultColor, true),
                color || []
            )
        },
    },
    mounted() {
        const {mergeColor} = this

        mergeColor()
    },
}
</script>

<style lang="scss">
.border-header-1 {
    position: relative;
    width: 100%;
    height: 100%;

    .dv-reverse {
        transform: rotate(180deg);
    }

    .dv-border-svg-container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;

        & > polyline {
            fill: none;
        }
    }

    .dv-bb5-line-1,
    .dv-bb5-line-2 {
        stroke-width: 1;
    }

    .dv-bb5-line-3,
    .dv-bb5-line-6 {
        stroke-width: 5;
    }

    .dv-bb5-line-4,
    .dv-bb5-line-5 {
        stroke-width: 2;
    }

    .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .dv-bb5-line-6 {
        stroke-width: 1;
    }
}
</style>
