<script setup>
	// 
	import {
		ref,
		reactive,
		getCurrentInstance,
		defineExpose,
		onMounted
	} from 'vue'
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js';
	const {
		proxy
	} = getCurrentInstance()
	// 表单
	const form = reactive({
		// 物流公司名称
		expressName: '',
		// 运单号
		trackingNumber: '',
	})
	// 物流公司列表
	const expressList = reactive([])
	// 物流公司列表
	const expressIndex = ref('')

	onMounted(() => {
		// 获取物流公司列表
		getExpressList()
	})

	// 获取物流公司列表
	function getExpressList() {
		api.getDict({
			path: ['express_company'],
		}).then(rs => {
			if (rs.code == 200) {
				Object.assign(expressList, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 选择物流公司
	 * @param {Object} ev
	 */
	function handleExpressIndex(ev) {
		console.log('ev', ev)
		const index = ev.detail.value
		if(expressIndex.value === index) return
		expressIndex.index = index
		form.expressName = expressList[index].dictLabel
	}

	// 开启弹窗
	function open() {
		proxy.$refs.express.open()
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.express.close()

		// 
		setTimeout(() => {
			form.expressName = ''
			form.trackingNumber = ''
		})
	}

	defineExpose({
		open,
		close
	})
</script>

<template>
	<uni-popup ref="express" type="center">
		<view class="expressAlt popMid bfff">
			<view class="header rows ptb20 plr20">
				<view>填写快递单号</view>
				<uni-icons type="closeempty" @click="close" />
			</view>

			<view class="form ooh mtb30 plr30 c333 f30">
				<view class="line mtb30">
					<picker :range="expressList" range-key="dictLabel" @change="handleExpressIndex">
						<view class="rows">
							<view class="mr20">快递公司</view>
							<input type="text" placeholder="输入快递公司" />
						</view>
					</picker>
				</view>

				<view class="line df aic">
					<view class="mr20">快递单号</view>
					<input type="text" placeholder="输入快递公司" />
				</view>
			</view>

			<view class="btn warm mtb30 mlr30">保存</view>
		</view>
	</uni-popup>
</template>

<style>
</style>