<template>
	<div class="app-list-content">
		<x-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-amount="{scope}">
				<div class="flex-center-center">
					<div class="">{{ scope.row.io==1?'+':'-' }} {{ scope.row.amount }}</div>
				</div>
			</template>
		</x-crud>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// x-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
					},
				]
			};
		},
		mounted() {
			let type = this.$route.query.type
			switch (type) {
				case '1':
					this.tabIndex = '-1';
					break
				case '2':
					this.tabIndex = '1';
					break
				case '3':
					this.tabIndex = '0';
					break
				case '4':
					this.tabIndex = '2';
					break
			}
			this.handleClick();
		},
		methods: {
			handleClick() {
				// ptStyle 1 零售 2供货商
				// tx 0全部 2 可提现
				switch (this.tabIndex) {
					case '-1':
						this.app.refresh({ ptStyle: 1,tx:0 });
						break
					case '0':
						this.app.refresh({ ptStyle: 1,tx:2 });
						break
					case '1':
						this.app.refresh({ ptStyle: 2,tx:0 });
						break
					case '2':
						this.app.refresh({ ptStyle: 2,tx:2 });
						break
				}
			},
			// crud
			onLoad({ ctx, app }) {
				this.app = app;
				ctx.service(this.$service.ptYeChange)
					.set('table', {
						columns: [
							{
								prop: 'id',
								label: 'ID',
								align: 'center'
							},
							{
								prop: 'sjName',
								label: '商家',
								align: 'center',
								'min-width': '120px'
							},
							{
								prop: 'shopName',
								label: '门店',
								align: 'center',
								'min-width': '150px'
							},
							{
								prop: 'event',
								label: '事项',
								align: 'center',
								'min-width': '120px'
							},
							{
								prop: 'amount',
								label: '金额',
								align: 'center',
								emptyText: '无'
							},
							{
								prop: 'capitalType',
								label: '流水类型',
								align: 'center',
								emptyText: '无'
							},
							{
								prop: 'balance',
								label: '当前余额',
								align: 'center',
								emptyText: '无'
							},
							{
								prop: 'txBalance',
								label: '当前可提现余额',
								align: 'center',
								emptyText: '无'
							},
							{
								prop: 'addTime',
								label: '时间',
								align: 'center',
								emptyText: '无'
							}
						],
						// 操作列
						op: {
							visible: true, // 是否显示
							// 同 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);
						if (this.$util.isEmpty(asset)) return false;
						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({ ptStyle: 1,tx:0 });
			}
		}
	};
</script>
