<template name="pos">
	<view>
		<block v-for="(v, k) in item.text">
			<view :class="['abs-tag', position[v.text-1]]" v-if="v.name">
				<view v-for="(v1, k1) in v.name_array">
					<text v-bind:style="{backgroundColor:(v.bgcolor || 'transparent'),color:v.color,fontSize:v.size+'px'}" v-if="v1">{{v1}}</text>
				</view>
			</view>
		</block>
		<view class="btn-save-img" :data-url="down" @click="download" v-if="item.is_button == 1"></view>
	</view>
</template>

<script>
export default {
	name: "pic",
	props: {
		config : {
			type : Object,
			value : null
		},
		down : {
			type : String,
			value : null,
		},
		item : {
			type    : Object,
			value	: null
		},
	},
	data() {
		return {
			position: ["tl","tc","tr","cl","cc","cr","bl","bc","br"],
		};
	},
	methods:{
		download : function(e) {
			var url = e.target.dataset.url;
			var self = this;
			uni.downloadFile({
				url,
				success: res => {
					if (res.statusCode === 200) {
						console.info(res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								self.alert('保存成功');
							},
							fail: function() {
								self.alert('保存失败，请稍后重试');
							}
						});
					} else {
						self.alert('下载失败');
					}
				}
			});
		}
	},
}
</script>

<style>
.abs-tag {
  position: fixed;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.abs-tag view{
  line-height: 1em;
  overflow: hidden;
}
.abs-tag text {
  background-color: #000;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  line-height: 1;
  padding: 0 2rpx;
}

.abs-tag.tl {
  top: 88rpx;
  left: 30rpx;
}

.abs-tag.tr {
  top: 88rpx;
  right: 30rpx;
  text-align: right;
}

.abs-tag.tc {
  top: 88rpx;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}

.abs-tag.cl {
  top: 50%;
  transform: translate(0, -50%);
  left: 30rpx;
}

.abs-tag.cc {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.abs-tag.cr {
  top: 50%;
  transform: translate(0, -50%);
  right: 30rpx;
  text-align: right;
}

.abs-tag.bl {
  bottom: 125rpx;
  left: 30rpx;
}

.abs-tag.br {
  bottom: 125rpx;
  right: 30rpx;
  text-align: right;
}

.abs-tag.bc {
  bottom: 125rpx;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
}

.btn-save-img {
  position: absolute;
  bottom: 30rpx;
  left: 135rpx;
  left: 30rpx;
  position: fixed;
  left: 30rpx;
  bottom: 30rpx;
  background: url(@/static/icon/ico-download.png) no-repeat;
  background-size: 80rpx 80rpx;
  width: 80rpx;
  height: 80rpx;
}
</style>
