<template>
	<div class="app-list-content">
		<x-crud class="liu-crud-wrap" @load="onLoad">
			<template #slot-tabs>
				<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-avatar="{scope}">
				<cl-avatar :size="22" :src="scope.row.avatar" :style="{ margin: 'auto' }"></cl-avatar>
			</template>

			<template #table-column-id="{scope}">
				<el-link
					:underline="true"
					@click="detailShowFn(scope.row)"
					style="font-size:12px;"
				>{{ scope.row.id }}</el-link>
			</template>

			<template #table-column-mobile="{scope}">
				<span v-if="scope.row.mobile != ''">{{ scope.row.mobile }}</span>
				<span v-else>-</span>
			</template>

			<template #table-column-name="{scope}">
				<el-link
					:underline="true"
					@click="detailShowFn(scope.row)"
					style="font-size:12px;"
				>{{ scope.row.name }}</el-link>
			</template>

			<template #table-column-balance="{scope}">
				<span>{{ scope.row.balance }}</span>
			</template>

			<template #table-column-growth="{scope}">
				<span>{{ scope.row.growth }}</span>
			</template>

			<template #table-column-subscribe="{scope}">
				<i
					class="el-icon-success"
					v-if="scope.row.subscribe == 1"
					style="color:#67C23A;font-size:19px;"
				></i>
				<i class="el-icon-success" v-else style="color:#C0C4CC;font-size:19px;"></i>
			</template>

			<template #table-column-store="{scope}">
				<div class="store-icon">
					<i class="el-icon-s-shop" v-if="scope.row.store == 1" style="color:#67C23A"></i>
					<i class="el-icon-s-shop" v-else style="color:#C0C4CC"></i>
				</div>
			</template>

			<template #table-column-sourceType="{scope}">
				<span v-if="scope.row.sourceType == 0">微信</span>
				<span v-else-if="scope.row.sourceType == 1">支付宝</span>
				<span v-else-if="scope.row.sourceType == 2">小程序</span>
				<span v-else-if="scope.row.sourceType == 3">朋友圈</span>
				<span v-else-if="scope.row.sourceType == 4">美团</span>
				<span v-else-if="scope.row.sourceType == 5">系统</span>
				<span v-else></span>
			</template>

		</x-crud>

		<!-- 详情 -->
		<detail-draw :show.sync="drapShow" :info="modalData" />
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import cardName from './components/card-name';
import detailDraw from './components/detail-draw';
export default {
	components: {
		cardName,
		detailDraw
	},
	data() {
		return {
			// x-crud
			app: null,
			tabIndex: '0',
			tabsData: [
				{
					text: '全部',
					key: '0',
					val: 0
				}
			],
			// modal
			modalData: {},
			drapShow: false
		};
	},
	computed: {
		...mapGetters({ levelData: 'level' })
	},
	created() {
		this.getLevel();
	},
	mounted() {},
	methods: {
		...mapActions(['getLevel']),
		handleClick(tab, e) {
			console.log(tab, e);
			this.app.refresh({ type: this.tabIndex });
		},
		// 详情
		detailShowFn(item) {
			this.modalData = item;
			this.drapShow = true;
		},

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

			//传入参数 shish 2020.5.9
			if (this.$route.query.type) {
				this.tabIndex = this.$route.query.type;
			}

			ctx.service(this.$service.custom)
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center',
							width: 120
						},
						{
							prop: 'avatar',
							label: '头像',
							align: 'center',
							width: 120
						},
						{
							prop: 'name',
							label: '名称',
							align: 'center',
							width: 230
						},
						{
							prop: 'mobile',
							label: '手机号',
							align: 'center',
							width: 180
						},
						{
							prop: 'buyAmount',
							label: '累计消费',
							align: 'center',
							width: 120
						},
						{
							prop: 'buyNum',
							label: '消费次数',
							align: 'center',
							width: 120
						},
						{
							prop: 'growth',
							label: '成长值',
							align: 'center',
							width: 150
						},
						{
							prop: 'visitTime',
							label: '最近访问',
							align: 'center',
							width: 240
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						props: {
							width: 180,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						layout: []
					}
				})
				.set('layout', [
					['slot-tabs'],
					//['search-key', 'flex1', 'add-btn', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let result = await next(params);
					this.tabsData[0].val = result.allNum
				})
				.done();
			app.refresh({ type: this.tabIndex });
		}
	}
};
</script>

<style lang="scss" scoped>
.user-name-warp {
	display: flex;
	align-items: center;
	span {
		margin-left: 6px;
	}
}
.recharge-modal-content {
	@include disFlex(center, space-around);
	.card-name {
		width: 200px;
		height: 100%;
		border-right: 1px solid $borderColor;
	}
}

.store-icon {
	i {
		font-size: 18px;
	}

	.el-icon-check {
		color: #fee470;
	}

	.el-icon-close {
		color: #999;
	}
}
</style>