<template>
	<common-cell :name="name" :required="required">
		<view class="form-content__wrapper" @click="select()">
			<view class="flex-main-content truncate" :class="str ? '' : 'form__placeholder'">
				{{ str || placeholder }}
			</view>
			<uni-icons class="form-arrow" type="arrowright"></uni-icons>
		</view>
	</common-cell>
</template>
<script setup>
import { computed, onMounted } from 'vue';
import { set } from '@/utils/cache';

import commonCell from '../common-cell.vue';

const emits = defineEmits(['change', 'addRule']);
const props = defineProps({
	form: {
		type: Object,
		default: () => ({})
	},
	name: {
		default: ''
	},
	required: {
		type: Boolean,
		default: false
	},
	title: {
		default: ''
	},
})

const placeholder = computed(() => `请输入${props.name || ''}`)
const value = computed(() => props.form && props.form && Array.isArray(props.form[props.title]) ? props.form[props.title] : []);
const str = computed(() => value.value.join(','))

function change(e) {
	emits('change', {
		title: props.title,
		value: e
	})
}

function select() {
	const eventName = `onChangeMultDisease_${+new Date()}`
	uni.$once(eventName, change);
	set('diagnosis-list-selections', value.value)
	uni.navigateTo({
		url: `/pages/library/diagnosis-list?eventName=${eventName}`
	})
}

onMounted(() => {
	if (props.required && props.title) {
		emits('addRule', {
			title: props.title,
			fn: () => {
				if (value.value.length > 0) return true;
				return `请选择${props.name || ''}`
			}
		})
	}
})

</script>
<style>
@import '../cell-style.css';
</style>