<template>
	<el-dialog
		title="选择会员"
		:visible.sync="selDialog"
		:close-on-click-modal="false"
		:append-to-body="true"
		width="800px"
	>
		<div class="recharge-modal-content">
			<el-radio-group v-model="radio" class="radio-wrap">
				<cl-crud class="liu-crud-wrap" @load="onLoad">
					<template #table-column-radio="{scope}">
						<div><el-radio :label="scope.row.index">选择</el-radio></div>
					</template>

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

					<template #table-column-member="{scope}">
						<div v-if="scope.row.member == -1">非会员</div>
						<div v-else>{{ scope.row.userAsset.growth }}</div>
					</template>
				</cl-crud>
			</el-radio-group>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="resetForm">取 消</el-button>
			<el-button type="primary" size="small" @click="confirmFn">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'sel-search',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		multi: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			selDialog: false,
			ruleForm: {},
			radio: '',
			list: [],
			selData: {}
		};
	},
	watch: {
		show(val) {
			this.selDialog = val;
		}
	},
	created() {},
	methods: {
		confirmFn() {
			this.$emit('confirm', this.list[this.radio]);
		},
		resetForm() {
			this.$refs['ruleForm'].resetFields();
			this.$emit('cancel');
		}, // cl-crud 组件ad
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.member)
				.set('table', {
					columns: [
						{
							prop: 'radio',
							label: '选择',
							align: 'center',
							'min-width': 60
						},
						{
							prop: 'userName',
							label: '会员名字',
							align: 'center'
						},
						{
							prop: 'mobile',
							label: '手机号',
							align: 'center'
						},
						{
							prop: 'member',
							label: '会员级别',
							align: 'center'
						},
						{
							prop: 'visitTimeFormat',
							label: '最近访问',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: false // 是否显示
						// 同 element-ui Table-column Attributes
					}
				})
				.set('pagination', {
					size: 6
				})
				.set('layout', [
					['slot-tabs'],
					['search-key', 'flex1', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					// 继续执行刷新
					let { list } = await next(params);
					list.map((e, index) => {
						e.index = index;
					});
					this.list = list;
					render(list);
				})
				.done();
			app.refresh({ type: this.tabIndex });
		}
	}
};
</script>

<style lang="scss">
// 列表
.radio-wrap {
	display: block;
}
</style>
