<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<!-- 粉丝 -->
			<template #table-column-totalFans="{scope}">
				<span>{{ scope.row.merchantAsset.totalFans }}</span>
			</template>

			<!-- 客户 -->
			<template #table-column-totalUser="{scope}">
				<span>{{ scope.row.merchantAsset.totalUser }}</span>
			</template>

			<!-- 访问量 -->
			<template #table-column-totalVisit="{scope}">
				<span>{{ scope.row.merchantAsset.totalVisit }}</span>
			</template>
		</cl-crud>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// cl-crud
			app: null
		};
	},
	mounted() {},
	methods: {
		// crud
		onLoad({ ctx, app }) {
			this.app = app;
			let applyHost = () => {
				return this.$service.sassShop.merchantList();
			};
			ctx.service({
				page: applyHost
			})
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'merchantName',
							label: '名称',
							align: 'center'
						},
						{
							prop: 'totalFans',
							label: '粉丝',
							align: 'center'
						},
						{
							prop: 'totalUser',
							label: '客户',
							align: 'center'
						},
						{
							prop: 'totalIncome',
							label: '收入',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'totalVisit',
							label: '访问量',
							align: 'center'
						},
						{
							prop: 'adminName',
							label: '店长',
							align: 'center'
						},
						{
							prop: 'openAppId',
							label: '平台',
							align: 'center',
							'min-width': '150px'
						},
						{
							prop: 'wxAppId',
							label: '公众号',
							align: 'center',
							'min-width': '150px'
						},
						{
							prop: 'miniAppId',
							label: '小程序',
							align: 'center',
							'min-width': '150px'
						},
						{
							prop: 'miniVersion',
							label: '小程序版本',
							align: 'center'
						},
						{
							prop: 'setName',
							label: '套餐',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						}
					],
					// 操作列
					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']
				])
				.done();
			app.refresh();
		}
	}
};
</script>
