<template>
	<div class="order-detail">
		<!-- 抽屉 -->
		<el-drawer :visible.sync="showBalanceDetail" size="1200px" :before-close="closeFn" custom-class="order-draw-wrap">
			<x-crud class="liu-crud-wrap" @load="onLoad">
				<template #table-column-amount="{scope}">
					<div class="flex-center-center">
						<div class="">{{ scope.row.io==1?'+':'-' }} {{ scope.row.amount }}</div>
					</div>
				</template>
			</x-crud>
		</el-drawer>
	</div>
</template>

<script>
export default {
	name: 'order-detail',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		orderOperate: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			app: null,
			showBalanceDetail: false,
			data: [],
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1',
					val: 0
				},
				{
					text: '可提现余额',
					key: '0',
					val: 0
				},
			]
		};
	},
	methods: {
		init() {
			this.showBalanceDetail = true;
		},
		closeFn() {
			this.$emit('closeFn')
			this.showBalanceDetail = false;
		},
		onLoad({ ctx, app }) {
			this.app = app;
			// console.log(this.orderOperate,'orderOperate')
			ctx.service(this.$service.shopCapital)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'event',
							label: '事项',
							align: 'center',
							'min-width': '120px'
						},
						{
							prop: 'amount',
							label: '金额',
							align: 'center',
							emptyText: '无'
						},{
							prop: 'shopId',
							label: '来源',
							align: 'center',
							emptyText: '无'
						},{
							prop: 'payWay',
							label: '支付方式',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: this.orderOperate.io==1?'totalIncome':'totalExpend',
							label: this.orderOperate.io==1?'累计收入':'累计支出',
							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;
					console.log(asset,)
				})
				.done();
			app.refresh({ shopId:this.orderOperate.id,io: this.orderOperate.io });

		}
	}
};
</script>

