<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>

            <!-- 微信支付 -->
            <template #table-column-wxPayInit="{scope}">
                <i v-if="scope.row.extend.wxPayInit== '0'" class="iconfont icondagou"></i>
                <i v-else class="iconfont icondagou" style="color: rgb(219, 219, 221);"></i>
                <el-button  type="text" @click="payOption(1,scope.row)">配置</el-button>
            </template>
            <!-- 支付宝支付 -->
            <template #table-column-aliPayInit="{scope}">
                <i v-if="scope.row.extend.aliPayInit== '0'" class="iconfont icondagou"></i>
                <i v-else class="iconfont icondagou" style="color: rgb(219, 219, 221)"></i>
                <el-button  type="text" @click="payOption(2,scope.row)">配置</el-button>
            </template>

            <!-- 公众号 -->
            <template #table-column-wxAppId="{scope}">
                <span v-if="scope.row.wxAppId">{{ scope.row.wxAppId }}</span>
                <el-button
                        type="text"
                        v-else
                        @click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}`)"
                >待绑定
                </el-button
                >
            </template>

            <!-- 小程序 -->
            <template #table-column-miniAppId="{scope}">
                <span v-if="scope.row.miniAppId">{{ scope.row.miniAppId }}</span>
                <el-button
                        type="text"
                        v-else
                        @click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}&authType=2`)"
                >待绑定
                </el-button
                >
            </template>

            <!-- 平台帐号激活 -->
            <template #slot-activation="{scope}">
                <el-button
                        type="primary"
                        size="mini"
                        @click="bindJump(`/merchant/add-platform-merchant`)"
                >平台帐号激活
                </el-button
                >
            </template>
        </cl-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>
    import {getFirstHost} from '@/cool/utils';

    export default {
        data() {
            return {
                // cl-crud
                app: null,
                wxPayDialog: false,
                dialogTitle: '',
                plamPayType: 1,
                form: {},
                rule: {}
            };
        },
        mounted() {
        },
        methods: {
            wxPayConfigFn() {
            },
            // 绑定跳转
            bindJump(url) {
                let host = `http://api.w.${getFirstHost()}.com`;
                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: '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: 'wxPayInit',
                                label: '微信支付',
                                align: 'center'
                            },
                            {
                                prop: 'aliPayInit',
                                label: '支付宝支付',
                                align: 'center',
                                'min-width': '100px'
                            },
                            {
                                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', 'slot-activation'],
                        ['data-table'],
                        ['flex1', 'pagination']
                    ])
                    .done();
                app.refresh();
            },

            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 = {
                            merchantId: this.form.merchantId,
                            wxPayMerchantId: this.form.wxPayMerchantId,
                            wxPayKey: this.form.wxPayKey
                        }
                        this.$service.sassShop.setWxPay(data).then(res => {
                            this.resetForm()
                            this.$message("成功")
                        });
                        break;
                    case 2://支付宝
                        var data = {
                            merchantId: this.form.merchantId,
                            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>
