<template>
	<div class="app-list-content">
		<x-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>

			<!-- 微信支付 -->
			<template #table-column-wxPayInit="{scope}">
				<div class="pay">
					<i
						:class="[
							'el-icon-success',
							scope.row.extend.wxPayInit == '0' ? 'on' : 'off'
						]"
					></i>
					<el-button type="text" @click="payOption(1, scope.row)">配置</el-button>
				</div>
			</template>
			<!-- 支付宝支付 -->
			<template #table-column-aliPayInit="{scope}">
				<div class="pay">
					<i
						:class="[
							'el-icon-success',
							scope.row.extend.aliPayInit == '0' ? 'on' : 'off'
						]"
					></i>
					<el-button type="text" @click="payOption(2, scope.row)">配置</el-button>
				</div>
			</template>

			<!-- 公众号 -->
			<template #table-column-wxAppId="{scope}">
				<div class="pay on">
					<i v-if="scope.row.extend.wxAuth != '0'" :class="['el-icon-success']"></i>
					<el-button
						v-else
						type="text"
						@click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}`)"
						>待绑定
					</el-button>
				</div>
			</template>

			<!-- 小程序 -->
			<template #table-column-miniAppId="{scope}">
				<div class="pay on">
					<i v-if="scope.row.extend.miniAuth != '0'" :class="['el-icon-success']"></i>
					<el-button
						v-else
						type="text"
						@click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}&authType=2`)"
						>待绑定
					</el-button>
				</div>
			</template>

			<!-- 平台帐号激活 -->
			<template #slot-activation="{scope}">
				<el-button
					type="primary"
					size="mini"
					@click="bindJump(`/merchant/add-platform-merchant`)"
					>平台帐号激活
				</el-button>
			</template>

			<template #slot-op-btn="{scope}">
				<el-button size="mini" type="text" @click="logoutRow(scope.row)">注销</el-button>
			</template>
		</x-crud>
		<!-- 微信支付 -->
		<el-dialog
			:title="dialogTitle"
			:visible.sync="wxPayDialog"
			:close-on-click-modal="false"
			width="500px"
		>
			<div class="ad-modal-content">
				<el-form
					v-if="plamPayType === 1"
					:model="form"
					:rules="rule"
					ref="form"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="商户ID" prop="status">
						<el-input
							v-model="form.wxPayMerchantId"
							placeholder="请输入商户ID"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="密钥" prop="remark">
						<el-input type="textarea" v-model="form.wxPayKey"></el-input>
					</el-form-item>
				</el-form>
				<el-form
					v-if="plamPayType === 2"
					:model="form"
					:rules="rule"
					ref="form"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="商户ID" prop="status">
						<el-input
							v-model="form.alipayPId"
							placeholder="请输入商户ID"
							size="small"
						></el-input>
					</el-form-item>
					<el-form-item label="商户私钥" prop="remark">
						<el-input type="textarea" v-model="form.alipayKey"></el-input>
					</el-form-item>
					<el-form-item label="支付宝公钥" prop="remark">
						<el-input type="textarea" v-model="form.alipayPublicKey"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm('form')">取 消</el-button>
				<el-button type="primary" size="small" @click="setPayConfirm">确认</el-button>
			</div>
		</el-dialog>
		<!-- 支付宝支付 -->
	</div>
</template>

<script>

export default {
	data() {
		return {
			// x-crud
			app: null,
			wxPayDialog: false,
			dialogTitle: '',
			plamPayType: 1,
			form: {},
			rule: {}
		};
	},
	mounted() {},
	methods: {
		wxPayConfigFn() {},
		// 绑定跳转
		bindJump(url) {
			let host = '';
			window.open(host + url);
		},
		// 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: 'name',
							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: 'wxPayInit',
							label: '微信支付',
							align: 'center',
							'min-width': '120px'
						},
						{
							prop: 'aliPayInit',
							label: '支付宝支付',
							align: 'center',
							'min-width': '120px'
						},
						{
							prop: 'adminName',
							label: '店长',
							align: 'center'
						},
						{
							prop: 'openAppId',
							label: '平台',
							align: 'center',
							'min-width': '120px',
							formatter: row => {
								switch (row.extend.openAppBind) {
									case '0':
										return '待创建';
									case '1':
										return '公众号已绑';
									case '2':
										return '小程序已绑';
									case '3':
										return '全部已绑';
								}
							}
						},
						{
							prop: 'wxAppId',
							label: '公众号',
							align: 'center',
							'min-width': '120px'
						},
						{
							prop: 'miniAppId',
							label: '小程序',
							align: 'center',
							'min-width': '120px'
						},
						{
							prop: 'miniVersion',
							label: '小程序版本',
							align: 'center',
							'min-width': '120px'
						},
						{
							prop: 'setName',
							label: '套餐',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						}
					],
					// 操作列
					op: {
						layout: ['slot-op-btn']
					}
				})
				.set('layout', [
					// ['slot-tabs'],
					['flex1', 'slot-activation', 'refresh-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh();
		},

		logoutRow({ id }) {
			this.$confirm('确认此商家的公众号和小程序已经取消授权？', '提示', {
				type: 'warning'
			}).then(() => {
				this.$service.sassShop
					.merchantCancel({ id })
					.then(res => {
						this.$message.success('注销成功');
					})
					.catch(() => {});
			});
		},

		payOption(type, data) {
			this.plamPayType = type;
			console.log(type);
			this.$service.sassShop.merchantExtend({ id: data.id }).then(res => {
				this.form = { ...res };
				this.wxPayDialog = true;
				switch (type) {
					case 1: //微信
						this.dialogTitle = '微信支付设置';
						break;
					case 2: //支付宝
						this.dialogTitle = '支付宝支付设置';
						break;
				}
			});
		},
		setPayConfirm() {
			let plamPayType = this.plamPayType;
			switch (plamPayType) {
				case 1: //微信
					var data = {
						sjId: this.form.sjId,
						wxPayMerchantId: this.form.wxPayMerchantId,
						wxPayKey: this.form.wxPayKey
					};
					this.$service.sassShop.setWxPay(data).then(res => {
						this.resetForm();
						this.$message('成功');
					});
					break;
				case 2: //支付宝
					var data = {
						sjId: this.form.sjId,
						alipayPId: this.form.alipayPId,
						alipayKey: this.form.alipayKey,
						alipayPublicKey: this.form.alipayPublicKey
					};
					this.$service.sassShop.setAlipa(data);
					break;
			}
		},
		resetForm(formName) {
			let formNamed = formName || 'form';
			this.$refs[formNamed].resetFields();
			this.wxPayDialog = false;
		}
	}
};
</script>
<style lang="scss">
.icondagou {
	color: green;
	font-weight: bold;
}
</style>

<style lang="stylus" scoped>
.liu-crud-wrap >>> .el-row--0 {
	top: 0;
	left: 0;
	width: 100% !important;
}

.pay {
	display: flex;
	align-items: center;
	justify-content center;

	i {
		font-size: 20px;
		margin-right 5px;
	}

	&.on {
		i {
			color #67C23A;
		}
	}

	&.off {
		i {
			color #909399;
		}
	}
}
</style>
