<template>
	<cl-crud class="liu-crud-wrap" @load="onLoad">
		<!-- tabs -->
		<template #slot-tabs="{ scope }">
			<el-tabs class="liu-tabs" type="border-card">
				<el-tab-pane
					v-for="(item, index) in tabsData"
					:key="index"
					:label="`${item.text}(${item.val})`"
				></el-tab-pane>
			</el-tabs>
		</template>

		<!-- 订花人 -->
		<template #table-column-bookName="{scope}">
			<div class="book-wrap">
				<cl-avatar
					shape="circle"
					:size="24"
					:src="scope.row.avatarUrl | default_avatar"
					:style="{ margin: 'auto' }"
				></cl-avatar>
				<div>{{ scope.row.bookName }}</div>
				<div>{{ scope.row.bookMobile }}</div>
			</div>
		</template>

		<!-- 收花人 -->
		<template #table-column-receiveUserName="{scope}">
			<div class="book-wrap">
				<div>{{ scope.row.receiveUserName }}</div>
				<div>{{ scope.row.receiveMobile }}</div>
			</div>
		</template>

		<!-- 通知送达 -->
		<template #table-column-receiveUserName="{scope}">
			<div class="book-wrap">
				<div>{{ scope.row.receiveUserName }}</div>
				<div>{{ scope.row.receiveMobile }}</div>
			</div>
		</template>

		<!-- 状态 -->
		<template #table-column-status="{scope}">
			<el-tag v-if="scope.row.status == 1" size="medium" type="danger">待配送</el-tag>
			<el-tag v-else-if="scope.row.status == 2" size="medium" type="danger">配送中</el-tag>
			<el-tag v-else-if="scope.row.status == 3" size="medium" type="danger">待通知</el-tag>
			<el-tag v-else-if="scope.row.status == 4" size="medium" type="danger">已取消</el-tag>
			<el-tag v-else-if="scope.row.status == 5" size="medium" type="success">已完成</el-tag>
			<el-tag v-else size="medium" type="danger">待付款</el-tag>
		</template>

		<!-- 操作 -->
		<!-- 发货 -->
		<template #table-column-option></template>
	</cl-crud>
</template>

<script>
export default {
	data() {
		return {
			tabsData: [
				{
					text: '全部',
					val: 0
				},
				{
					text: '待付款',
					val: 0
				},
				{
					text: '待配送',
					val: 0
				},
				{
					text: '配送中',
					val: 0
				},
				{
					text: '已完结',
					val: 0
				}
			]
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.order)
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: '60'
						},
						{
							prop: 'id',
							label: '单号',
							align: 'center'
						},
						{
							prop: 'bookName',
							label: '订花人',
							align: 'center',
							width: '220'
						},
						{
							prop: 'receiveUserName',
							label: '收花人',
							align: 'center',
							width: '140'
						},
						{
							prop: 'prePrice',
							label: '总价',
							align: 'center'
						},
						{
							prop: 'actPrice',
							label: '实付款',
							align: 'center',
							emptyText: '无',
							'min-width': 150
						},
						{
							prop: 'reachTime',
							label: '通知送达',
							align: 'center'
						},
						{
							prop: 'reachTime',
							label: '送达时间',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						},
						{
							prop: 'sendNum',
							label: '编号',
							align: 'center',
							sortable: true,
							width: 150
						}
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					op: {
						layout: []
					}
				})
				.set('search', {
					key: { placeholder: '订单号 / 订花人手机号' }
				})
				.set('layout', [
					['slot-tabs'],
					['search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					// 继续执行刷新
					let { asset } = await next(params);
					this.tabsData[0].val = asset.totalOrder;
					this.tabsData[1].val = asset.unPayOrder;
					this.tabsData[2].val = asset.unSendOrder;
					this.tabsData[3].val = asset.sendingOrder;
					this.tabsData[4].val = asset.finishOrder;
				})
				.done();
			app.refresh({ status: 0 });
		}
	}
};
</script>
<style lang="scss" scoped>
.book-wrap {
	@include disFlex(center, center);
	& > div {
		margin-left: 6px;
		&:first-child {
			margin-left: 0;
		}
	}
}
</style>
