<template>
	<view style="padding: 30rpx;">
		<u-table>
			<u-tr><u-th>客户名称</u-th></u-tr>
			<u-tr v-for="(item, index) in consigneeData" :key="item.id">
				<u-td>{{ item.customerName }}</u-td>
			</u-tr>
			<u-tr>
				<u-td style="padding: 0;">
					<u-button
						size="mini"
						:hair-line="false"
						style="width: 100%; border: 0; font-size: 40rpx;"
						@tap="showAdd"
					>
						+
					</u-button>
				</u-td>
			</u-tr>
		</u-table>
		<!-- <u-empty v-else text="数据为空" mode="list"></u-empty> -->
	</view>

	<!-- 添加客户名称 -->
	<u-popup v-model="show" mode="center" length="90%">
		<view style="padding: 40rpx;">
			<h4 style="width: 100%; text-align: center; font-size: 30rpx;">添加客户</h4>
			<u-form :model="form" ref="uForm" label-width="145">
				<u-form-item label="名称">
					<u-input v-model="form.customerName" placeholder="请输入名称" />
				</u-form-item>
				<u-form-item label="编码">
					<u-input v-model="form.customerCode" placeholder="请输入编码" />
				</u-form-item>
				<u-form-item label="邮箱">
					<u-input v-model="form.contactsEmail" placeholder="请输入邮箱" />
				</u-form-item>
				<u-form-item label="选择地址">
					<u-input
						v-model="form.registerAddress"
						:disabled="true"
						placeholder="请选择"
						@tap="selectRegion"
					/>
				</u-form-item>
				<u-form-item label="详细地址" :border-bottom="false">
					<u-input
						type="textarea"
						v-model="form.detailedAddress"
						placeholder="请输入详细地址"
					/>
				</u-form-item>
			</u-form>
			<u-button type="error" @tap="saveConsignee">保存</u-button>
		</view>
	</u-popup>

	<u-picker mode="region" ref="uPicker" v-model="showRegion" @confirm="confirm" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { consigneeList, addConsignee } from '@/api/profile';
import { onReady } from '@dcloudio/uni-app';

let consigneeData = ref();
let show = ref(false);
let showRegion = ref(false);

let form = ref({
	customerName: '', // 客户名称
	customerCode: '', // 客户编码
	contactsEmail: '', // 客户邮箱
	registerAddress: '', // 注册地址(省市区)
	detailedAddress: '', // 详细地址
});

let selectRegion = () => {
	showRegion.value = true;
};

// 设置地区
let confirm = (data: any) => {
	form.value.registerAddress = data.province.name + data.city.name + data.area.name;
};

let showAdd = () => {
	show.value = true;
	form.value = {
		customerName: '', // 客户名称
		customerCode: '', // 客户编码
		contactsEmail: '', // 客户邮箱
		registerAddress: '', // 注册地址(省市区)
		detailedAddress: '', // 详细地址
	};
};

let saveConsignee = () => {
	addConsignee(form.value).then((res: any) => {
		if (res.data.code === 200) {
			uni.showToast({
				title: '保存成功',
				icon: 'none',
			});
			show.value = false;
			init();
		}
	});
};

let init = () => {
	consigneeList().then((res: any) => {
		if (res.data.code === 200) {
			consigneeData.value = res.data.data;
		}
	});
};

init();

onReady(() => {});
</script>

<style scoped lang="scss"></style>
