<template>
	<div class="shop-list">
		<x-crud @load="onLoad">
		</x-crud>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			crud: null,
		};
	},

	computed: {
		...mapGetters(['shopInfo']),
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service({
				page: (params) => {
					return this.$service.shop.list(params).then((res) => {
						return {
							list: res.list,
							pagination: {
								page: params.page,
								size: 20,
								total: 0,
							},
						};
					});
				}
			})
				.set('table', {
					columns: [
						{
							label: 'ID',
							prop: 'id',
							align: 'center',
						},
						{
							label: '名称',
							prop: 'shopName',
							align: 'center',
						},
						{
							label: '营业时间',
							prop: 'openTime',
							align: 'center',
						},
						{
							label: '联系电话',
							prop: 'telephone',
							align: 'center',
						},
						{
							label: '累计收入',
							prop: 'totalIncome',
							align: 'center',
						},
						{
							label: '地址',
							prop: 'fullAddress',
							align: 'center',
						},
					],
					//操作列
					op: {
						visible: true, // 是否显示
						props: {
							width: 250,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						layout: []
					}
				})
				.set('layout', [
					[
						'flex1',
						//'slot-top-add',
						'refresh-btn',
					],
					[
						'data-table'
						],
				])
				.on('info', (data, { done }) => {
					console.log(data);
					done({
						...data,
						openTime: data.openTime.split('-'),
						provinceCity: [data.province, data.city],
					});
				})
				.done();

			app.refresh();
		}
	},
};
</script>

<style lang="stylus" scoped>
.shop-list {
  height: 100%;
}
</style>
