<template>   
	<view class="uni-select" :class="{'uni-select--disabled':disabled}"> 
		<view class="uni-select__flex">
			<view v-for="(item,index) in current" :key="item" class="uni-label__flex-item" :style="getClass(index)">
				<view class="flex">{{item}}<view @click.stop="clearTag(index)"><uni-icons type="ant-design:close-outlined" custom-prefix="antfont" color="rgba(0, 0, 0, 0.7)" size="12" /></view></view>
			</view>  
			<input class="uni-label__input-text" v-model="keyword" :placeholder="placeholder"
		placeholder-class="uni-select__input-placeholder" @confirm="handlePressEnter" @blur="blurData" @focus="clickData"/>
		</view>    
	</view> 
</template>

<script setup> 
import {
		inject,
		watch,
		watchEffect,
		ref,
		onMounted
	} from 'vue';
 import {
 	getDicDetailList
 } from '@/common/api/system/dictionary/index.js';
 import {
 	changeApiOptions,
 	isValidJSON,
 	camelCaseString
 } from '@/common/api/magic-api/useApiRequest.js';
 const props = defineProps({
 	value: {
 		type: [String, Number],
 		default: ''
 	},
 	modelValue: {
 		type: [String, Number],
 		default: ''
 	}, 
 	styleConfig: {
 		type: Object,
 		default: () => {
 			return {
 				colors: [], //颜色配置
 				isLoop: true, //是否循环选择样式
 			};
 		},
 	}, 
 	apiConfig: {
 		type: Object, 
 	},
 	itemId: {
 		type: String,
 		default: '',
 	}, 
 	map: String,
 	disabled: {
 		type: Boolean,
 		default: false
 	},  
 	placeholder: String,
 	index:Number
 })
 
 const emit = defineEmits(['change', 'update:modelValue', 'blur', 'click']);
 const formModel = inject('formModel');
 const isCustomForm = inject('isCustomForm', false);
 const current = ref([]);  
 const channels = ref([]);
 const keyword=ref('')
 onMounted(async () => { 
	if (props.modelValue ) { 
		current.value = props.modelValue.split(',');
	} else {
		current.value = []
		await getData();
	} 
 })
 
 async function getData() {
 	if (props.itemId) {
 		let res = await getDicDetailList({
 			itemId: props.itemId
 		})
 		if (res.success) {
 			 channels.value = Array.isArray(res.data) ? res.data : []
 			 getDataList()
 		}
 	} else if (props.apiConfig?.path) {
 		let res = await changeApiOptions(props.apiConfig, formModel.value, isCustomForm, props.index);
 		if (res.data) {
 			channels.value  = Array.isArray(res.data) ? res.data : [];
 			 getDataList()
 		}
 	}
	handleEmit()
 }
	 function getDataList() { 
	 	channels.value.forEach((item) => {
	 		 current.value.push(item[props.map])
	 	})  
	 }
	 function getClass(i){
		 let defaultBgColor = '#fafafa';
		 let defaultFontColor = '#000000';
		 let defaultBorderWidth = 1;
		 let defaultBorderColor = '#d9d9d9';
		 if (props.styleConfig.colors && Array.isArray(props.styleConfig.colors)) {
			 if(props.styleConfig.isLoop){
				 let loopIndex = i % props.styleConfig.colors.length;
				 if(props.styleConfig.colors[loopIndex]){
					 defaultBgColor=props.styleConfig.colors[loopIndex].bgColor||defaultBgColor;
					 defaultFontColor=props.styleConfig.colors[loopIndex].fontColor||defaultFontColor;
					 defaultBorderWidth =props.styleConfig.colors[loopIndex].borderWidth||defaultBorderWidth;
					 defaultBorderColor =props.styleConfig.colors[loopIndex].borderColor||defaultBorderColor;
				 }
			 }else{
				 if(props.styleConfig.colors[i]){
					 defaultBgColor=props.styleConfig.colors[i].bgColor||defaultBgColor;
					 defaultFontColor=props.styleConfig.colors[i].fontColor||defaultFontColor;
					 defaultBorderWidth =props.styleConfig.colors[i].borderWidth||defaultBorderWidth;
					 defaultBorderColor =props.styleConfig.colors[i].borderColor||defaultBorderColor;
				 }
			 }
		 }
		 return `
				 background: ${defaultBgColor};
				 border-width: ${defaultBorderWidth}px;
				 border-color: ${defaultBorderColor};
				 color: ${defaultFontColor};
		 `;
	 }
	function handleEmit() {
	    emit('update:modelValue', current.value.join(','));
	  }
	  const clearTag = (index) => {
	    current.value.splice(index, 1);
	    handleEmit(); 
	    changeData();
	  };
	  const handlePressEnter = (e) => {
	    current.value.push(e.detail.value);
	    keyword.value = '';
	    handleEmit(); 
	    changeData();
	  }; 
	  function blurData() {
	    emit('blur');
	  }
	  function clickData() {
	    emit('click');
	  }
	  function changeData() {
	    emit('change');
	  }
				 
</script>

<style  lang="scss">
	$uni-base-color: #6a6a6a !default;
	$uni-main-color: #333 !default;
	$uni-secondary-color: #909399 !default;
	$uni-border-3: #e5e5e5;
 
	.flex{
		display:flex
	}
 .item-center{
	 align-items: center;
 }
	.uni-select {
		font-size: 14px;
		border: 1px solid $uni-border-3;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative; 
		border-bottom: solid 1px $uni-border-3;
		width: 100%; 
		height: 35px;
	
		&--disabled {
			background-color: #f5f7fa;
			cursor: not-allowed;
		}
	}
 
		.uni-select{
			padding: 0 4px ;
		}
		.uni-select {
			height: auto;
			min-height: 31px;
		} 
		.uni-select__input-placeholder{
			padding-left: 6px;
		}
 
	 
	.uni-select__input {
		flex: 1;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
	}
 
	.uni-label__input-text {
		display: inline-block;
		height: 27px;
		min-width: 182px;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis; 
		overflow: hidden;
		margin-top: 4px;
	}
	.uni-select__flex{
		display: inline-block;  
		.uni-label__flex-item{
			background: rgba(0, 0, 0, 0.06);
			padding: 1px 4px;
			border-radius: 4px;
			margin-right: 4px;
			margin-top: 4px;
			margin-bottom: 0;
			border: 1px solid #d9d9d9;
			line-height: 22px;
			min-height: 22px;
			display: inline-block; 
			vertical-align: top;
			word-break: break-all;
		}
	}
	
	.uni-select__input-placeholder {
		color: $uni-base-color;
		font-size: 12px;
	}
 
</style>