<template>
	<view>
		<!-- 为了兼容微信小程序，所以在此根据v-if写了两遍 v-model和value 也写了两边 -->
		<uni-data-picker ref="dataPickerRef" v-if="props.code" :localdata="props.localdata" v-model="props.code" :value="props.code" @change="dataChange" v-slot:default="{data, error, options}" @popupopened="popupopened" @popupclosed="popupclosed" :map="props.mapText">
			{{ data.length != 0 ? dataText(data) : '请选择' }}
		</uni-data-picker>
		<uni-data-picker ref="dataPickerRef" v-if="!props.code" :localdata="props.localdata" v-model="props.code" :value="props.code" @change="dataChange" v-slot:default="{data, error, options}" @popupopened="popupopened" @popupclosed="popupclosed" :map="props.mapText">
			{{ data.length != 0 ? dataText(data) : '请选择' }}
		</uni-data-picker>
	</view>
</template>

<script setup>

import { ref } from 'vue'
import useBackPress from '@/hooks/useBackPress.js' // 返回阻断函数

const props = defineProps({
	code: {type: String, default: ''}, // 文字回显用到的码
	localdata: {type: Array, default: () => [] }, // 级联选择用到的数据
	paramType: {type: String, default: 'arr' }, //  参数类型
	mapText: {type: Object, default:{text:'text',value:'value'}}  // 映射字段
})

const emit = defineEmits(['change'])

// 保持与其他数据参数格式一致，所以也改成 e.detail.value的方式
let data = {
	detail: {
		value: ''
	}
}
const dataPickerRef = ref()
/* 
 *  参数类型集合  默认为arr
 *  splicing 拼接模式    适用于支付宝官方行业mccCode 例：mccCode":"A0002_B0015"
 *  arr  数组模式   大部分省市区县选择，都需要数组  例 areaCode":["120000","120100","120112"]
 *  last 单值模式   适用于盛付通进件mccCode，它只需要最后一个code  例：mccCode":"4900"
 * 	oneLevel 级联选择 只有一级  适用于云闪付mcc  拉卡拉pos类型等 
 */

// 向父组件传递选择后的数据
const dataChange = e => {
	let result = '' // 拿code值用
	let resText = '' // 拿文字用
	// 根据参数不同走不同分支   
	
	if (props.paramType === 'splicing') {  // splicing 拼接
		result = e.detail.value[0].value + '_' + e.detail.value[1].value
	} 
	else if (props.paramType === 'arr') {  // arr  数组
		result = []
		resText = []
		e.detail.value.forEach(item => {
			result.push(item.value)
			resText.push(item.text)
		})
	}
	else if (props.paramType === 'last') {   // last 单值
		result = e.detail.value[e.detail.value.length - 1].value
	} 
	else if (props.paramType === 'oneLevel') {   // oneLevel  只有一级
		result = e.detail.value[0].value
	}
	
	// 父组件在拿到值之后，可以统一走 e.detail.value的方式拿值了
	data.detail.value = result
	data.detail.text = resText
	emit('change', data)
}

// data-pciker 回显处理函数
const dataText = (data) => {
	let result = ''
	data.forEach(item => result += (item.text + '/'))
	result = result.substr(0, result.length -1 ) // 截取掉最后一个斜杠

	return result
}
/* 

	处理开启弹窗 与 关闭弹窗 的 阻断返回

 */
const popupopened = () => {
	// #ifdef H5 || APP-PLUS
		active()
	// #endif
}
const popupclosed = () => {
	// #ifdef H5 || APP-PLUS
	inactive()
	// #endif
}
const closeEd = () => dataPickerRef.value.hide()

// #ifdef H5 || APP-PLUS
const {active, inactive} = useBackPress(closeEd)  // onBackPress 阻断返回
// #endif

</script>

<style scoped lang="scss">

</style>