<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
					style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 18rpx 6rpx;"
				>
					<view style="width: 80%;">{{ item.customerName }}</view>
					<u-button type="primary" size="mini" @tap="delConsignee(item.id)">
						删除
					</u-button>
				</u-td>
			</u-tr>
			<u-tr>
				<u-td style="padding: 0; padding: 10rpx 6rpx;">
					<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>
	<!-- <add-consignee ref="addConsigneeRef" /> -->
	<u-modal v-model="show" :content="content" show-cancel-button @confirm="confirm"></u-modal>
</template>

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

// let addConsigneeRef = ref();
let consigneeData = ref();
let show = ref(false);
let content = ref('确认删除该客户信息？');

// 添加客户
let showAdd = () => {
	uni.navigateTo({
		url: './addConsignee',
	});
};
let consigneeId = ref(); // 客户id

let delConsignee = (id: number) => {
	consigneeId.value = id;
	show.value = true;
};

let confirm = () => {
	deleteConsignee({ id: consigneeId.value }).then((res: any) => {
		if (res.data.code === 200) {
			init();
		}
	});
};

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

onShow(() => {
	init();
});
</script>

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