<template>
	<div>
		<!--增、查交易记录的按钮-->
		<el-button type="primary" round @click="openAddDialog" size="small">添加</el-button>

		<!--表格-->
		<el-row>
			<el-col :span="24">
				<el-table v-loading="loading"  :data="state.getList">
					<!--					列表结开始-->
					<el-table-column prop="recipientName" label="收货人" align="center" />
					<el-table-column prop="phone" label="电话/手机" align="center" />
					<el-table-column prop="city" label="所在地区" align="center" />
					<el-table-column prop="address" label="详细地址" align="center" />
					<!--列表结束-->
					<el-table-column label="操作" align="center" >
						<template #default="scope">

							<el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
						</template>
					</el-table-column>
					<template v-slot:empty>
						<el-empty description="数据去外太空了~" />
					</template>
				</el-table>
				<!-- 分页控件 -->
				<el-pagination
					v-if="state.query.total > 0"
					:current-page="state.query.page"
					:page-size="state.query.limit"
					:total="state.query.total"
					background layout="prev, pager, next"
					@current-change="handlePageChange"
				/>
			</el-col>
		</el-row>
		<!-- 新增/编辑对话框 -->
		<el-dialog v-model="state.dialogVisible" title="新增" width="50%">
			<el-form
				:model="state.formData"
				ref="formRef"
				label-width="100px"
			>
				<!--				表单开始===============================================================================================================================-->
				<el-form-item label="收货人" prop="recipientName" :rules="[{ required: true, message: '请输入收货人', trigger: 'blur' }]">
					<el-input v-model="state.formData.recipientName"/>
				</el-form-item>
				<el-form-item label="电话/手机" prop="phone" :rules="[{ required: true, message: '请输入电话/手机', trigger: 'blur' }]">
					<el-input v-model="state.formData.phone"/>
				</el-form-item>
				<el-form-item label="所在地区" prop="city" :rules="[{ required: true, message: '请输入所在地区', trigger: 'blur' }]">
<!--					<el-input v-model.number="state.formData.city"/>-->
					<el-cascader
						style="width: 260px"
						v-model="value"
						:options="state.options"
						:props="props"
						@change="handleChange"
					/>
				</el-form-item>
				<el-form-item label="详细地址" prop="address" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
					<el-input v-model="state.formData.address"/>
				</el-form-item>
				<!--表单结束===============================================================================================================================-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="state.dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveTransaction(formRef)">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
// 记录数据
import type {FormInstance, TabsPaneContext} from 'element-plus'
const formRef = ref<FormInstance>()
const loading = ref(true)
const state = reactive(<any>{
	route:"api/address",
	dialogVisible:false,
	getList: [],//获取数据
	query:{
		total: 0, // 总记录数
		page: 1, // 当前页码
		limit: 5, // 每页显示的记录数
		title:"",
		status:0,
	},
	formData:{},
	cateList:[],
	options:[],
})
const value = ref('')
const props = {
	expandTrigger: 'hover' as const,
}

/**
 * 转成列表
 * @param value
 */
const handleChange = (value:any) => {
	const labels = getLabelsFromValue(value, state.options);
	state.formData.city = labels

}

// 递归查找 label
const getLabelsFromValue = (value:any, options:any) => {
	const labels:any = [];
	const findLabels = (value:any, options:any) => {
		for (const item of options) {
			if (item.value === value[0]) {
				labels.push(item.label);
				if (value.length > 1 && item.children) {
					findLabels(value.slice(1), item.children);
				}
				break;
			}
		}
	};
	findLabels(value, options);
	return labels;
};


// 获取交易记录
const init = () => {
	frontRequest.get(`${state.route}/page`, {
		params: state.query
	}).then((res:any) => {
		state.getList = res.data.list
		state.query.total = res.data.total
	}).finally(() => {
		loading.value = false
	})

}
// 新增交易记录
const openAddDialog = () => {
	state.formData = {
		sort:1
	}
	state.dialogVisible = true
}
// 编辑交易记录
const edit = (row: any) => {
	state.formData = row
	state.dialogVisible = true
}
// 保存记录
const saveTransaction = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			state.formData.city = state.formData.city.toString()
			if (state.formData.id) {
				// 更新交易记录
				frontRequest.put(`${state.route}`, state.formData).then(() =>{
					init()
					state.dialogVisible = false
					ElMessage.success("提交成功~")
				})
			} else {
				// 新增交易记录
				frontRequest.post(`${state.route}`, state.formData).then(() =>{
					init()
					state.dialogVisible = false
					ElMessage.success("提交成功~")
				})
			}
		}
	})
}
// 删除交易记录
const del = async (id: number) => {
	try {
		await frontRequest.delete(`${state.route}/${id}`)
		init()
		ElMessage.success("删除成功~")
	} catch (error) {
		ElMessage.error("删除失败~")
	}
}

// 页码改变时的处理函数
const handlePageChange = (page: number) => {
	state.query.page = page
	init()
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
	// 根据 tab 的 name 属性更新状态
	const selectedStatus = state.getStatus[tab.index].status;
	state.query.status = selectedStatus;
	init();
};

// 页面加载时获取交易记录
onMounted(() => {
	init()
	frontRequest.get(`/api/area/tree`).then((res:any) => {
		console.log(res)
		state.options = res.data
	})
})
</script>
<style scoped>
.dialog-footer {
	text-align: right;
}
:deep(.el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.el-upload:hover) {
	border-color: var(--el-color-primary);
}

</style>
<route lang="json">
{
"meta": {
"layout": "frontUserInfo"
}
}
</route>
