<template>
	<div class="app-list-content">
		<div class="app-content-top flex-center">
			<div class="avatar-wrap flex-center">
				<div class="avatar-wrap-left">
					<cl-avatar
						shape="circle"
						:size="60"
						:src="shopInfo.smallLogoUrl | default_avatar"
					></cl-avatar>
				</div>
				<div class="avatar-wrap-right">
					<div class="app-size-32 avatar-name">{{ shopInfo.merchantName }}</div>
					<div class="app-size-24">三级代理</div>
				</div>
			</div>
			<div class="assets-list-wrap flex-center">
				<div class="list" v-for="(item, index) in userData" :key="index">
					<div class="assets-list-value">{{ item.value }}</div>
					<div>{{ item.name }}</div>
				</div>
			</div>
		</div>
		<div class="app-content-bottom">
			<cl-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}(${item.val})`"
							:name="item.key"
						></el-tab-pane>
					</el-tabs>
				</template>

				<template #table-column-name="{scope}">
					<div class="flex-center">
						<cl-avatar
							shape="square"
							:size="40"
							:src="scope.row.userAvatar | default_avatar"
						></cl-avatar>
						<div class="app-margin-left-10">{{ scope.row.name }}</div>
					</div>
				</template>

				<template #table-column-address="{scope}">
					<span>
						{{
							scope.row.province +
								scope.row.city +
								scope.row.dist +
								scope.row.address +
								scope.row.floor
						}}
					</span>
				</template>

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

				<template #table-column-status="{scope}">
					<span v-if="scope.row.status == 4">
						<i class="iconfont icondagou"></i>
					</span>
					<span v-else>{{ scope.row.status | constantfilter('PROXY_STATUS') }}</span>
				</template>
			</cl-crud>
		</div>
	</div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
	name: 'list-ad',
	components: {},
	data() {
		return {
			app: null,
			// top =-=========
			// 用户数据
			userData: [
				{
					name: '账号余额(￥)',
					value: 0,
					btn: '提现'
				},
				{
					name: '邀请花店',
					value: 0
				},
				{
					name: '付费花店',
					value: 0
				},
				{
					name: '累计收益(¥)',
					value: 0
				}
			],
			// bottom =-=========
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部花店',
					key: '-1',
					val: 0
				},
				{
					text: '审核中',
					key: '0',
					val: 0
				},
				{
					text: '试用中',
					key: '1',
					val: 0
				},
				{
					text: '已付费',
					key: '3',
					val: 0
				},
				{
					text: '已到期',
					key: '4',
					val: 0
				}
			]
		};
	},
	computed: {
		...mapGetters(['shopInfo', 'userInfo'])
	},
	mounted() {
		console.log(this.shopInfo);
		this._getDet();
	},
	methods: {
		// api
		_getDet() {
			this.$service.single.assetDet().then(res => {
				if (this.$util.isEmpty(res)) return false;
				this.data = res;
				this.userData[0].value = res.balance;
				this.userData[1].value = res.inviteNum || 0;
				this.userData[2].value = res.payNum || 0;
				this.userData[3].value = res.income || 0;
			});
		},
		handleClick(tab, e) {
			this.app.refresh({ type: this.tabIndex });
		},
		// cl-crud 组件ad
		onLoad({ ctx, app }) {
			this.app = app;

			let applyHost = () => {
				return this.$service.single.applyList({ type: this.tabIndex });
			};
			ctx.service({
				page: applyHost
			})
				.set('table', {
					columns: [
						{
							prop: 'id',
							label: 'ID',
							align: 'center'
						},
						{
							prop: 'name',
							label: '花店名称',
							align: 'center',
							'min-width': 120
						},
						{
							prop: 'userName',
							label: '管理员',
							align: 'center'
						},
						{
							prop: 'mobile',
							label: '手机号',
							align: 'center'
						},
						{
							prop: 'address',
							label: '地址',
							align: 'center',
							'min-width': 240
						},
						{
							prop: 'addTime',
							label: '申请时间',
							align: 'center'
						},
						{
							prop: 'fee',
							label: '付款金额',
							align: 'center'
						},
						{
							prop: 'income',
							label: '收益',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: false, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 160,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: []
					}
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'refresh-btn', 'slot-add-ad-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				// .on('refresh', async (params, { next }) => {
				// 	// 继续执行刷新
				// 	let { asset } = await next(params);
				// 	this.tabsData[0].val = asset.totalUser;
				// 	this.tabsData[1].val = asset.totalMember;
				// 	this.tabsData[2].val = asset.totalFans;
				// })
				.done();
			app.refresh({ type: this.tabIndex });
		}
	}
};
</script>

<style lang="scss" scoped>
.app-list-content {
	width: 100%;
	height: 100%;
	.app-content-top {
		width: 100%;
		height: 80px;
		background-color: #fff;
		padding: 10px;
		margin-bottom: 10px;
		color: $fontColor2;
		font-size: 14px;
		.avatar-wrap {
			margin-right: 40px;
			.avatar-wrap-left {
				margin-right: 10px;
			}
			.avatar-wrap-right {
				.avatar-name {
					margin-bottom: 4px;
				}
			}
		}
		.assets-list-wrap {
			text-align: center;
			.list {
				margin-left: 40px;
				.assets-list-value {
					margin-bottom: 10px;
				}
			}
		}
	}
	.app-content-bottom {
		height: calc(100% - 110px);
	}
}
</style>
