<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<template #slot-tabs="{ scope }">
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="handleClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="item.text"
						:name="item.key"
					></el-tab-pane>
				</el-tabs>
			</template>

			<!-- 订花人 -->
			<template #table-column-bookName="{scope}">
				<div class="flex-center">
					<cl-avatar
						shape="square"
						:size="40"
						:src="scope.row.bookAvatar | default_avatar"
					></cl-avatar>
					<div class="app-margin-left-10">{{ scope.row.bookName }}</div>
					<div class="app-margin-left-10">{{ scope.row.bookMobile }}</div>
				</div>
			</template>

			<!-- 收花人 -->
			<template #table-column-receiveUserName="{scope}">
				<div class="flex-center">
					<div class="app-margin-left-10">{{ scope.row.receiveUserName }}</div>
					<div class="app-margin-left-10">{{ scope.row.receiveMobile }}</div>
				</div>
			</template>

			<!-- 状态 -->
			<template #table-column-status="{scope}">
				<span>{{ scope.row.status | constantfilter('ORDER_STATUS') }}</span>
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// cl-crud
			app: null,
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1',
					val: 0
				},
				{
					text: '待付款',
					key: '0',
					val: 0
				},
				{
					text: '待配送',
					key: '1',
					val: 0
				},
				{
					text: '配送中',
					key: '2',
					val: 0
				},
				{
					text: '已完结',
					key: '5',
					val: 0
				}
			]
		};
	},
	mounted() {},
	methods: {
		handleClick() {
			this.app.refresh({ status: this.tabIndex });
		},
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.sassOrder)
				.set('table', {
					columns: [
						{
							prop: 'orderSn',
							label: '单号',
							align: 'center'
						},
						{
							prop: 'bookName',
							label: '订花人',
							align: 'center',
							'min-width': '120px'
						},
						{
							prop: 'receiveUserName',
							label: '收花人',
							align: 'center',
							'min-width': '150px'
						},
						{
							prop: 'prePrice',
							label: '总价',
							align: 'center'
						},
						{
							prop: 'actPrice',
							label: '实付款',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'sendTime',
							label: '送达时间',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'sendNum',
							label: '编号',
							align: 'center',
							emptyText: '无'
						}
					],
					// 操作列
					op: {
						visible: false, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: []
					}
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'refresh-btn'],
					['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();
		}
	}
};
</script>
