<template>
	<picker mode="region" :disabled="disableChange" @change="change($event)">
		<common-cell :name="name" :required="required">
			<view class="form-content__wrapper">
				<view class="flex-main-content truncate" :class="value ? '' : 'form__placeholder'">
					{{ value || placeholder }}
				</view>
				<uni-icons class="form-arrow" type="arrowright"></uni-icons>
			</view>
		</common-cell>
	</picker>
</template>
<script setup>
import { computed } from 'vue';

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

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

const placeholder = computed(() => `请选择${props.name || ''}`)
const value = computed(() => props.form && Array.isArray(props.form[props.title]) ? props.form[props.title].join('-') : '')

function change(e) {
	emits('change', {
		value: e.detail.value,
		title: props.title,
	})
}
</script>

<style lang="scss" scoped>
@import '../cell-style.css'
</style>