<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap order-list-wrap" @load="onLoad">
			<!-- tabs -->
			<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}(${item.val})`"
						:name="item.key"
					></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"
					></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-currentFlow="{scope}">
				<div class="steps-wrap" style="width: 200px">
					<el-steps
						:space="200"
						:active="parseInt(scope.row.currentFlow)"
						finish-status="success"
						size="mini"
					>
						<el-step
							title=""
							v-for="(item, index) in parseInt(scope.row.totalFlow)"
							:key="index"
						></el-step>
					</el-steps>
				</div>
				<!-- <div>{{ scope.row.currentFlow }}</div> -->
			</template>

			<!-- 操作 -->
			<!-- 发货 -->
			<template #slot-column-option="{scope}">
				<template v-if="scope.row.status == 4 || scope.row.status == 0">
					<el-button type="text" size="small" disabled>免发货</el-button>
					<el-button type="text" size="small" disabled>发货</el-button>
				</template>
				<template v-else-if="scope.row.currentFlow == 0">
					<el-button type="text" size="small" @click="noSendShipFn(scope.row)"
						>免发货</el-button
					>
					<el-button type="text" size="small" @click="shipDrawFn(scope.row)"
						>发货</el-button
					>
				</template>
				<template v-else-if="scope.row.currentFlow == scope.row.totalFlow">
					<el-button type="text" size="small" @click="shipDrawFn(scope.row)"
						>查看配送</el-button
					>
				</template>
				<template v-else>
					<el-button type="text" size="small" @click="shipDrawFn(scope.row)"
						>继续</el-button
					>
				</template>
			</template>
		</cl-crud>
		<!-- 发货状态 -->
		<sel-order ref="selOrder" :orderData="optionData" />
		<!-- <el-drawer
			title="发货管理"
			:visible.sync="showShipMnage"
			size="440px"
			:before-close="closeFn"
			custom-class="ship-draw-wrap"
		>
			<div class="ship-manage-wrap">
				<sel-order :shipData="shipData" />
			</div>
		</el-drawer> -->
	</div>
</template>

<script>
import SelOrder from './components/sel-order';
export default {
	components: {
		SelOrder
	},
	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
				}
			],
			// dialog
			optionData: {},
			// drawer
			showShipMnage: false
			// shipData: []
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.$store.dispatch('getCategory');
			this.$store.dispatch('getUsage');
		},
		// drawer
		noSendShipFn(item) {
			this.$confirm('确认不需要发货？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$service.order.freeShipping({ id: item.id }).then(res => {
						this.$message.success('免发货操作成功！');
						item.currentFlow = 1;
					});
				})
				.catch(() => {});
		},
		shipDrawFn(item) {
			this.optionData = item;
			setTimeout(() => {
				this.$refs.selOrder.init();
			});
		},
		closeFn() {
			this.showShipMnage = false;
		},
		// dialog
		// crud
		handleClick(tab, e) {
			console.log(tab, e);
			this.app.refresh({ status: this.tabIndex });
		},
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.order)
				.set('table', {
					columns: [
						// {
						// 	type: 'selection',
						// 	align: 'center',
						// 	width: '60'
						// },
						{
							prop: 'orderSn',
							label: '单号',
							align: 'center',
							width: '230'
						},
						{
							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
						},
						{
							prop: 'currentFlow',
							label: '进度',
							align: 'center',
							width: 220
						}
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-column-option']
					}
				})
				.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: this.tabIndex });
		}
	}
};
</script>
<style lang="scss" scoped>
.book-wrap {
	@include disFlex(center, flex-start);
	& > div {
		margin-left: 6px;
		&:first-child {
			margin-left: 0;
		}
	}
}
.steps-wrap {
	width: 200px;
	// height: 26px;
}
</style>
<style lang="scss">
.order-list-wrap {
	.el-step__head.is-process {
		color: #21bc88;
		border-color: #21bc88;
		.el-step__icon.is-text {
			background-color: #21bc88;
		}
	}
	.el-step__head.is-success {
		color: #3385ff;
		border-color: #3385ff;
		.el-step__icon.is-text {
			background-color: #3385ff;
		}
		.el-step__line {
			background-color: #3385ff;
		}
	}
	.el-step__head.is-wait {
		.el-step__icon.is-text {
			background-color: #c0c4cc;
		}
	}
	.el-step__icon {
		width: 12px;
		height: 12px;
	}
	.el-step.is-horizontal .el-step__line {
		height: 2px;
		left: 16px;
		right: -16px;
		top: 9px;
	}
}
</style>
