<template>
	<view style="width:100%;">
		<input type="hidden" :maxlength="-1" :name="name" :value="tkvs.value" style="display:none;" />
		<template v-if="hasmore">
			<checkbox-group :name="name+'_name'" style="display:none;">
				<checkbox v-for="(item,index) in tkvs.vals" :key="index" :value="item.name+''" checked />
			</checkbox-group>
		</template>
		<template v-if="hasmore && moreno">
			<checkbox-group :name="name+'_noname'" style="display:none;">
				<checkbox v-for="(item,index) in tkvs.novals" :key="index" :value="item.name+''" checked />
			</checkbox-group>
		</template>
		<template v-if="moreno">
			<checkbox-group :name="name+'_id'" style="display:none;">
				<checkbox v-for="(item,index) in tkvs.vals" :key="index" :value="item.id+''" checked />
			</checkbox-group>
			<checkbox-group :name="name+'_no'" style="display:none;">
				<checkbox v-for="(item,index) in tkvs.novals" :key="index" :value="item.id+''" checked />
			</checkbox-group>
		</template>
		<view v-if="innerrang.length==0" :style="{color:'var(--bg6)',textAlign:left?'left':''}">无选项</view>
		<radio-group class="_gp" :class="{'_line':line,'_left':left,'_itemright':itemright}">
			<view @tap="chgitem(item)" class="_item" v-for="(item,index) in innerrang" :key="index">
				<ciy-checkitem style="pointer-events: none;" sq :disabled="disabled" :tag="(byname?item.name:item.id)+''" :value="tkvs.ids.indexOf((byname?item.name:item.id)+'') > -1"></ciy-checkitem>
				<view :style="{color:disabled?'var(--txt1)':''}">{{item.name}}</view>
			</view>
		</radio-group>
	</view>
</template>

<style scoped>
	._gp {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-end;
	}

	._gp._left {
		flex-direction: row;
		justify-content: flex-start;
	}

	._gp._left ._item {
		flex-direction: row;
	}

	._gp ._item {
		white-space: nowrap;
		display: flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.5em;
		min-width: 7em;
		flex-direction: row-reverse;
	}

	._gp._itemright ._item {
		justify-content: flex-start;
		flex-direction: row-reverse;
	}

	._gp._line ._item {
		width: 100%;
		white-space: normal;
	}
</style>
<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: [String, Number],
				default: ''
			},
			value: {
				type: [String, Number],
				default: ''
			},
			initevent: {
				type: Boolean,
				default: false
			},
			byname: {
				type: Boolean,
				default: false
			},
			bin: {
				type: Boolean,
				default: false
			},
			hasmore: {
				type: Boolean,
				default: false
			},
			chkuse: {
				type: Boolean,
				default: false
			},
			range: {
				type: [String, Array],
				default: []
			},
			moreno: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			itemright: {
				type: Boolean,
				default: false
			},
			line: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				v: ''
			};
		},
		watch: {
			tkvs: {
				handler(newD, oldD) {
					if (this.from && newD.value == oldD.value)
						return;
					if (this.innerrang.length == 0)
						return;
					if (!this.from)
						this.from = 'init';
					else if (this.from == 'init')
						this.from = 'check';

					this.$emit('update:modelValue', newD.value);
					if (this.from != 'init' || this.initevent) {
						this.$emit('change', {
							name: this.name,
							from: this.from,
							value: newD.value,
							idvalue: newD.vals,
							novalue: newD.novals
						});
					}
				}
			},
			value: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.v = 'value';
				},
				immediate: true
			},
			modelValue: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.v = 'modelValue';
				},
				immediate: true
			}
		},
		computed: {
			innerrang() {
				if (typeof(this.range) == 'string') {
					const lis = this.range.split(',');
					var lst = [];
					for (let i = 0; i < lis.length; i++) {
						const ls = lis[i].split(':');
						if (ls.length < 2)
							continue;
						lst.push({
							id: ls[0],
							name: ls[1]
						});
					}
					return lst;
				}
				let range = [];
				for (let i = 0; i < this.range.length; i++) {
					if (this.chkuse && this.range[i].isuse == 2)
						continue;
					range.push(this.range[i]);
				}
				return range;
			},
			tkvs() {
				var val = ''; //id/name数组
				if (this.v == 'modelValue') {
					if (typeof(this.modelValue) == 'number')
						val = this.modelValue + '';
					else if (this.modelValue)
						val = this.modelValue;
				} else if (this.v == 'value') {
					if (typeof(this.value) == 'number')
						val = this.value + '';
					else if (this.value)
						val = this.value;
				} else if (this.v instanceof Array) {
					val = this.v;
				}
				if (!(val instanceof Array)) {
					if (this.bin) {
						var values = [];
						var ibin = parseInt(val);
						for (var tt = 0; tt < 64; tt++) {
							if (ibin & Math.pow(2, tt))
								values.push((tt + 1) + '');
						}
						val = values;
					} else {
						val = val.split(',');
					}
				}
				var kvs = {
					ids: [],
					vals: [],
					novals: []
				};
				if (this.byname) {
					for (var i in this.innerrang) {
						if (val.indexOf(this.innerrang[i].name + '') > -1) {
							kvs.ids.push(this.innerrang[i].name + '');
							kvs.vals.push({
								...this.innerrang[i]
							});
						} else {
							kvs.novals.push({
								...this.innerrang[i]
							});
						}
					}
				} else {
					for (var i in this.innerrang) {
						if (val.indexOf(this.innerrang[i].id + '') > -1) {
							kvs.ids.push(this.innerrang[i].id + '');
							kvs.vals.push({
								...this.innerrang[i]
							});
						} else {
							kvs.novals.push({
								...this.innerrang[i]
							});
						}
					}
				}
				if (this.bin) {
					var bval = 0;
					for (var bi in kvs.ids) {
						var bc = this.toint(kvs.ids[bi]);
						if (bc < 1 || bc > 63)
							continue;
						bval += Math.pow(2, (bc - 1));
					}
					kvs.value = bval;
				} else {
					kvs.value = '';
					if (kvs.ids.length > 0)
						kvs.value = ',' + kvs.ids.join(',') + ',';
				}
				return kvs;
			}
		},
		mounted() {},
		methods: {
			chgitem(itm) {
				if (this.disabled)
					return;
				this.v = this.tkvs.ids;
				if (this.byname) {
					if (this.tkvs.ids.includes(itm.name + '')) {
						var idx = this.v.indexOf(itm.name + '');
						if (idx > -1)
							delete this.v[idx];
					} else {
						this.v.push(itm.name + '');
					}
				} else {
					if (this.tkvs.ids.includes(itm.id + '')) {
						var idx = this.v.indexOf(itm.id + '');
						if (idx > -1)
							delete this.v[idx];
					} else {
						this.v.push(itm.id + '');
					}
				}
			}
		}
	}
</script>