<template>
	<view v-if="illegalVal" class="tipbox">此格式不支持该文本</view>
	<view class="content" v-else>
		<tkiBarcode v-if="format=='code128'" :cid="codekey+format" :loadMake="false" :opations="opations" :onval="true" :format="format" :val="value" :ref="codekey" @result="codeResult" />
		<tkiBarcode v-else :cid="codekey+format" :loadMake="false" :format="format" :val="value" :ref="codekey" @result="codeResult" /> 
	</view>
</template>

<script>
import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	import {
		changeApiOptions
	} from '@/common/api/magic-api/useApiRequest.js';
export default {
	data() {
		return {
			bar: ['code128', 'code39', 'ean13' ], 
			value:'',
			illegalVal:true,
			opations: {
				// format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
				width: 4,//设置条之间的宽度
				height: 120,//高度
				displayValue: true,//是否在条形码下方显示文字
				// text: "FB19A1650-100S",//覆盖显示的文本
				textAlign: "left",//设置文本的水平对齐方式
				textPosition: "bottom",//设置文本的垂直位置
				textMargin: 0,//设置条形码和文本之间的间距
				// fontSize: 24,//设置文本的大小
				// fontColor: "#0000ef",//设置文本的颜色
				// lineColor: "#0000ef",//设置条形码的颜色
				background: "#FFFFFF",//设置条形码的背景色
				margin: 0,//设置条形码周围的空白边距
				// marginTop: 10,//设置条形码周围的上边距
				// marginBottom: 20,//设置条形码周围的下边距
				// marginLeft: 30,//设置条形码周围的左边距
				// marginRight: 40,//设置条形码周围的右边距
			}
		}
	},
	props: {
		val: {
			type: String,
			default: ''
		},
		format: {
			type: String,
			default: ''
		},
		codeType: {
			type: String,
			default: 'fixed'
		},
		apiConfig: {
			type: Object,
			default () {
				return {}
			}
		},
		codekey: {
			type: String,
			default: ''
		},
	},
	components: {
		tkiBarcode, 
	},
	async created() {
		this.illegalVal=false
		if (this.codeType == 'fixed') {
			this.value = this.val
		} else if (this.apiConfig?.path) {
			let res = await changeApiOptions(this.apiConfig);
			if (res.data) {
				this.value = res.data
			}
		}  
		setTimeout(() => { 
			try{
				this.$refs[this.codekey]._makeCode()
			}catch(e){
				this.illegalVal=true 
			} 
		}, 300);
	},
	methods: {
		codeResult(v) { 
		},  
	}
}
</script>

<style>
.content {
	text-align: center;
	height: auto;
}
.tipbox{
	width: 200px;
	height: 100px;
	background: rgba(0, 0, 0, 0.02);
	border: 2px dashed #d9d9d9;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(0, 0, 0, 0.43);
}
</style>
