<template>
	<div class="corner">
		<div class="border" v-if="showBorder" :style="{
			width: `calc(100% + ${-margin*2-Number(size)-borderWidth}px)`,
			height:`calc(100% + ${-margin*2-Number(size)-borderWidth}px)`,
			border:border
		}" :aa="borderWidth+'1'" ref="border"></div>
		<div :style="setStyles(0)"></div>
		<div :style="setStyles(1)"></div>
		<div :style="setStyles(2)"></div>
		<div :style="setStyles(3)"></div>
	</div>
</template>

<script>
	export default {
		name: "Cornerimg",
		props:{
			size: {
				type: [Number,String],
				default: function () {
					return 5
				}
			},
			color: {
				type: String,
				default: function () {
					return '#fff'
				}
			},
			mode: {
				type: [Number,String],
				default: function () {
					return '1234'
				}
			},
			type: {
				type: String,
				default: function () {
					return ''
				}
			},
			angleSize: {
				type: [Number,String],
				default: function () {
					return ''
				}
			},
			margin: {
				type: [Number,String],
				default: function () {
					return 0
				}
			},
			showBorder: {
				type: Boolean,
				default: function () {
					return false
				}
			},
			border:String
		},
		data: function(){
		    return {
		        borderWidth:1
		    }
		},
		mounted(){
			// 不要直接拿dom，此时还拿不到
			this.borderWidth = parseInt(this.$refs.border.style.borderWidth)
		},
		methods:{
		    setStyles(key){
		    	let sty = '';
		    	let size = this.size;
		    	let color = this.color;
		    	if(this.type==='sharp'){
					if(this.mode){
						if(!(this.mode+'').includes('1')&&key==0){size=0}
						if(!(this.mode+'').includes('2')&&key==1){size=0}
						if(!(this.mode+'').includes('3')&&key==2){size=0}
						if(!(this.mode+'').includes('4')&&key==3){size=0}
						switch (Number(key)) {
							case 0:
								sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;border-left:${this.angleSize?this.angleSize:4}px solid;border-top:${this.angleSize?this.angleSize:4}px solid;
							left:${this.margin}px;border-color:${color};`
								break;
							case 1:
								sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;border-right:${this.angleSize?this.angleSize:4}px solid;border-top:${this.angleSize?this.angleSize:4}px solid;
							right:0px;border-color:${color};`
								break;
							case 2:
								sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;border-left:${this.angleSize?this.angleSize:4}px solid;border-bottom:${this.angleSize?this.angleSize:4}px solid;
							left:${this.margin}px;border-color:${color};`
								break;
							case 3:
								sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;border-right:${this.angleSize?this.angleSize:4}px solid;border-bottom:${this.angleSize?this.angleSize:4}px solid;
							right:0px;border-color:${color};`
								break;
						}
					}else{
						switch (Number(key)) {
							case 0:
								sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;border-left:${this.angleSize?this.angleSize:4}px solid;border-top:${this.angleSize?this.angleSize:4}px solid;
							left:${this.margin}px;border-color:${color};`
								break;
							case 1:
								sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;border-right:${this.angleSize?this.angleSize:4}px solid;border-top:${this.angleSize?this.angleSize:4}px solid;
							right:${this.margin}px;border-color:${color};`
								break;
							case 2:
								sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;border-left:${this.angleSize?this.angleSize:4}px solid;border-bottom:${this.angleSize?this.angleSize:4}px solid;
							left:${this.margin}px;border-color:${color};`
								break;
							case 3:
								sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;border-right:${this.angleSize?this.angleSize:4}px solid;border-bottom:${this.angleSize?this.angleSize:4}px solid;
							right:${this.margin}px;border-color:${color};`
								break;
						}
					}
				}else if(this.type==='trangle'){
					if(this.mode){
						if(!(this.mode+'').includes('1')&&key==0){size=0}
						if(!(this.mode+'').includes('2')&&key==1){size=0}
						if(!(this.mode+'').includes('3')&&key==2){size=0}
						if(!(this.mode+'').includes('4')&&key==3){size=0}
					}
					switch (Number(key)) {
						case 0:
							sty=`width:0;height:0;position:absolute;top:${this.margin}px;left:${this.margin}px;border-style: solid;border-width: 0 0 ${size}px ${size}px;
								border-color: transparent transparent ${color} transparent;transform:rotate(180deg)`
							break;
						case 1:
							sty=`width:0;height:0;position:absolute;top:${this.margin}px;right:${this.margin}px;border-style: solid;border-width: 0 0 ${size}px ${size}px;
								border-color: transparent transparent ${color} transparent;transform:rotate(-90deg)`
							break;
						case 2:
							sty=`width:0;height:0;position:absolute;bottom:${this.margin}px;left:${this.margin}px;border-style: solid;border-width: 0 0 ${size}px ${size}px;
								border-color: transparent transparent ${color} transparent;transform:rotate(90deg)`
							break;
						case 3:
							sty=`width:0;height:0;position:absolute;bottom:${this.margin}px;right:${this.margin}px;border-style: solid;border-width: 0 0 ${size}px ${size}px;
								border-color: transparent transparent ${color} transparent;transform:rotate(0)`
							break;
					}
				}else{
				    if(this.mode){
					    if(!(this.mode+'').includes('1')&&key==0){size=0}
					    if(!(this.mode+'').includes('2')&&key==1){size=0}
					    if(!(this.mode+'').includes('3')&&key==2){size=0}
					    if(!(this.mode+'').includes('4')&&key==3){size=0}
					    switch (Number(key)) {
						    case 0:
							    sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;
							left:${this.margin}px;background:${color};`
							    break;
						    case 1:
							    sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;
							right:${this.margin}px;background:${color};`
							    break;
						    case 2:
							    sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;
							left:${this.margin}px;background:${color};`
							    break;
						    case 3:
							    sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;
							right:${this.margin}px;background:${color};`
							    break;
					    }
				    }else{
					    switch (Number(key)) {
						    case 0:
							    sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;
							left:${this.margin}px;background:${color};`
							    break;
						    case 1:
							    sty=`width:${size}px;height:${size}px;position:absolute;top:${this.margin}px;
							right:${this.margin}px;background:${color};`
							    break;
						    case 2:
							    sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;
							left:${this.margin}px;background:${color};`
							    break;
						    case 3:
							    sty=`width:${size}px;height:${size}px;position:absolute;bottom:${this.margin}px;
							right:${this.margin}px;background:${color};`
							    break;
					    }
				    }
				}
		    	return sty
			}
		},
	}
</script>

<style scoped lang="scss">
.border{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #6ec2ff;
	pointer-events: none;
}
</style>
