<template>
    <div class="config-offline-wrap">
        <el-form>
            <GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false"
            :show-cancel-button="showCancelButton" @confirm="addPayment" @cancel="handleCancel"
            @close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="599px">
            <!-- 自定义内容 -->
                <div>
                    <!-- 淘宝 -->
                    <div class="taobaopay"  v-if="addPayType==payTypeTaoBao">
                        <div class="beforeNotice">
                            <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                            <p class="mt12 flex">
                                请确保使用要添加的淘宝主账号登录并授权
                            </p>
                            <p class="mt10 flex">
                                如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
                            </p>
                        </div> 
                    </div>

                    <!-- 微信 -->
                    <div class="weixinpay" v-if="addPayType==payTypeWeixin">
                        <div class="beforeNotice">
                            <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                            <p class="mt12">1.申请公司微信支付。<a href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">常见问题</a> </p>
                            <p class="mt12 flex">
                                2.前往<a href="https://pay.weixin.qq.com/"
                                                class="flex" target="_blank">
                                                <img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>
                            </p>
                            <p> 在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p>
                        </div>
                        <el-form>
                            <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                                <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" prop="company_short_name" placeholder="6字以内">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）">
                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="mch_id" prop="mch_id" placeholder="请输入商户号">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥">
                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="apiv2" prop="apiv2" placeholder="请输入微信支付秘钥">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="4. 公众号APPID">
                                <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="appid" prop="appid" placeholder="请输入公众号APPID">
                                </GuipInput>
                            </GuipFormItem>
                        </el-form>
                    </div>

                    <!-- 支付宝 -->
                    <div class="alipay"  v-if="addPayType==payTypeAlipay">
                        <el-tabs v-model="isPayPublic" @tab-click="handleClick">
                            <!-- <el-tab-pane label="我有公司，使用本公司支付宝" name="0"> -->
                            <el-form ref="alipayForm" :model="alipayInfo" :rules="alipayRules">
                                <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                                    <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column" :maxlength="6" v-model="alipayInfo.company_short_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
                                </GuipFormItem>
                                <GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
                                    <span class="desc flex gap12" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝 <a href='https://pay.weixin.qq.com/' class="guide"
                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="alipayInfo.alipay_account" prop="alipay_account" placeholder="请输入公司支付宝账号"></GuipInput>
                                </GuipFormItem>
                            </el-form>
                            <!-- </el-tab-pane> -->
                            <!-- <el-tab-pane label="我无公司，申请平台代收款" name="1" v-if="isExistSelfSupplys===false">
                            <div class="beforeNotice">
                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
                                <p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
                                <p class="mt12 flex">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</p>
                            </div>
                            <el-form>
                                <GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
                                    <span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
                                </GuipFormItem>
                                <GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
                                    <span class="desc" slot="formRight">请输入有效账号</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_account" prop="mch_id" placeholder="请输入有效收款支付宝账号"></GuipInput>
                                </GuipFormItem>
                            </el-form>
                            </el-tab-pane> -->
                        </el-tabs>
                    </div>
                    <!-- 拼多多 -->
                    <div class="pddpay"  v-if="addPayType==payTypePdd">
                    <div class="beforeNotice">
                        <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                        <p class="mt12 flex">主账号登录并授权。<a :href="pddAuthUrl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
                        <p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                        <p class="mt5 flex gray">授权成功后会进入＂快乐帮手＂烽火台，复制右上角名称填入下方保存。</p>
                    </div>
                    <el-form>
                        <GuipFormItem column="column" class="mb24" label="账号名称">
                            <!-- <span class="desc" slot="formRight">账号名称</span> -->
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="pdd_shop_name" prop="company_short_name" placeholder="请输入账号名称"></GuipInput>
                        </GuipFormItem>
                    </el-form>
                    </div>
                </div>
            </GuipDialog>
        </el-form>
    </div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';

// 收款方式
const PAY_TYPE_TAOBAO = 0;    // 淘宝
const PAY_TYPE_WEIXIN = 2;    // 微信
const PAY_TYPE_ALIPAY = 3;    // 支付宝
const PAY_TYPE_JINGDONG = 4;  // 京东
const PAY_TYPE_PDD = 11;      // 拼多多

export default {
    // 站点设置
    name: 'addPay',
    props: {
        // 收款方式
        payType: {
            type: [String, Number],
            default: '-1',
            // validator: value => ['success', 'warning', 'error', 'info'].includes(value)
        },
        // 可见性
        visible: {
            type: Boolean,
            default: false
        },
        // 淘宝授权url
        taobaoAuthUrl: {
            type: String,
            default: ''
        },
        // 拼多多授权url
        pddAuthUrl: {
            type: String,
            default: ''
        },
        // 京东授权url
        jdAuthUrl: {
            type: String,
            default: ''
        },
        // 是否存在自供货 存在自供货 则不支持支付宝代收款
        isExistSelfSupplys: {
            type: Boolean,
            default: false
        },
    },
    components: {
        GuipInput,
        GuipFormItem,
        GuipDialog,
    },
    data() {
        return {
            // 收款方式
            payTypeTaoBao: PAY_TYPE_TAOBAO,
            payTypeWeixin: PAY_TYPE_WEIXIN,
            payTypeAlipay: PAY_TYPE_ALIPAY,
            payTypeJingdong: PAY_TYPE_JINGDONG,
            payTypePdd: PAY_TYPE_PDD,
            
            paytypeDesc: {
                payTypeTaoBao: '淘宝/天猫店铺',
                payTypeWeixin: '微信收款',
                payTypeAlipay: '支付宝收款',
                payTypeJingdong: '京东店铺',
                payTypePdd: '拼多多店铺'
            },

            // 添加收款方式类型
            addPayType: -1,

            // 添加收款方式弹框
            addPayDialogVisible: false,
            // 控制是否显示取消按钮
            showCancelButton: true, 
            // 控制是否显示关闭按钮
            showCloseButton: true, 
            // 添加收款方式弹框标题
            addPayTitle: '',
            
            // 添加收款方式确认按钮文本
            addPayconfirmText: '确定',
            
            // 公司简称
            company_short_name: '',
            // 商户号
            mch_id: '',
            // 微信支付秘钥
            apiv2: '',
            // 公众号APPID
            appid: '',
            // 支付宝账号
            alipay_account: '',
            // 代收款 收款账号
            receive_payment_account: '',
            // 代收款 收款人姓名
            receive_payment_name: '',
            // 是否是平台支付 0平台支付 1自营支付
            isPayPublic: '0',
            // 拼多多店铺名称
            pdd_shop_name: '',
            alipayInfo:{
                company_short_name: '',
                alipay_account:''
            },
            alipayRules:{
                company_short_name: [
                    { required: true, message: '请输入公司简称', trigger: 'blur' }
                ],
                alipay_account: [
                    { required: true, message: '请输入公众号APPID', trigger: 'blur' }
                ],
            }

            // localSiteInfo: { ...this.siteInfo }
        }
    },
    computed: {
        // ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        // store.commit('SET_PAGETITLE', '营销推广');
    },
    methods: {
        updateDialogByPayType() {
            if (this.addPayType > -1) {
                // 设置标题
                let typeDesc = '';
                // 根据addPayType找到对应的描述
                for (let key in this.paytypeDesc) {
                    if (this[key] === this.addPayType) {
                        typeDesc = this.paytypeDesc[key];
                        break;
                    }
                }
                this.addPayTitle = '添加' + typeDesc;
                // 设置确认按钮文本
                if (this.addPayType === this.payTypeTaoBao || this.addPayType === this.payTypeJingdong) {
                    this.addPayconfirmText = '去授权';
                } else {
                    this.addPayconfirmText = '确定';
                }
            }
        },
        resetForm() {
            // 重置所有表单字段
            this.company_short_name = '';
            this.mch_id = '';
            this.apiv2 = '';
            this.appid = '';
            this.alipay_account = '';
            this.receive_payment_account = '';
            this.receive_payment_name = '';
            this.pdd_shop_name = '';
            this.isPayPublic = '0'; // 重置支付宝标签页
        },
        // 弹框相关方法---start
        showAddPaymentMethodDialog(type, type_desc) {
            console.log(type, 'type');
            this.addPayDialogVisible = true;
            this.addPayTitle = '添加' + type_desc;
            this.addPayType = type;
            if (type == PAY_TYPE_TAOBAO || type == PAY_TYPE_JINGDONG) {
                this.addPayconfirmText = '去授权';
            }
        },
        // 确认按钮事件
        addPayment() {
            if (this.addPayType == PAY_TYPE_TAOBAO) {
                window.open(this.taobaoAuthUrl, '_blank');
                
            } else if (this.addPayType == PAY_TYPE_WEIXIN) {
                this.$http('POST', '/agentnew/ajax_add_weixinpay', {
                    company_short_name: this.company_short_name,
                    mch_id: this.mch_id,
                    apiv2: this.apiv2,
                    appid: this.appid
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.init(response.data);
                            this.$Message.success(response.info);
                            
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })

            } else if (this.addPayType == PAY_TYPE_ALIPAY) { //支付宝
                let falseFlag = false;
                this.$refs.alipayForm.validate((valid) => {
                    console.log(valid,'valid===');
                    if (valid) {
                        falseFlag = true;
                        this.$http('POST', '/agentnew/ajax_add_alipay', {
                            company_short_name: this.alipayRules.company_short_name,
                            alipay_account: this.alipayRules.alipay_account,
                            is_pay_public: this.isPayPublic,
                            // receive_payment_account: this.receive_payment_account,
                            // receive_payment_name: this.receive_payment_name
                        }).then(response => {
                            this.$nextTick(() => {
                                if (response.status) {
                                    this.init(response.data.payid);
                                    if (this.isPayPublic == 1) {
                                        this.$Message.success(response.info);
                                    } else { 
                                        // window.open(response.data.authurl, '_blank');
                                    }
                                } else {
                                    this.$Message.error(response.info);
                                }
                            })
                        }).catch(error => {
                            console.error(error, 'error')
                        })
                    } else {
                        return false;
                    }
                });
                if (!falseFlag) return;
                
            } else if (this.addPayType == PAY_TYPE_PDD) { 
                this.$http('POST', '/agentnew/ajax_add_pddpay', {
                    shop_name: this.pdd_shop_name,
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.init(response.data);
                            this.$Message.success(response.info);
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } else if (this.addPayType == PAY_TYPE_JINGDONG) { 
                window.open(this.jdAuthUrl, '_blank');
            }
            console.log('addPayment===走到这里了');
            this.init();
        },
        // 取消按钮事件
        handleCancel() {
            this.init();
        },
        // 关闭弹框事件
        handleClose() {
            this.init();
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        init(payid) {
            this.addPayDialogVisible = false;
            this.$emit('update:visible', false);
            this.resetForm(); // 重置表单

            if(payid){
                this.$http('POST', '/agentnew/ajax_get_payinfo', {
                    payid: payid,
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$emit('update:data', response.data);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            }
        },
    },watch: {
        visible(newVal) { 
            this.addPayDialogVisible = newVal; 
        },
        payType(newVal) {
            this.addPayType = newVal;
            this.updateDialogByPayType();
            this.resetForm();   // 切换支付方式时重置表单
        },
    }

}
</script>
<style scoped lang="scss">
.beforeNotice {

    h4 {
        margin: 0;
        gap: 8px;
    }

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_blue_1 */
    background: #F2F7FF;
    /* middle/middle_blue_3 */
    border: 1px solid #BFDAFF;

    div {
        margin-top: 2px;
        padding-left: 23px;

        p {
            color: #8A9099;
        }

    }

    p {
        color: #1E2226;

        i {
            font-style: normal;
        }

        &:last-child {
            display: flex;
            align-items: stretch;

            b {
                font-weight: normal;
                color: #8A9099;
                display: inline-flex;

                img {
                    margin-left: 4px;
                }
            }
        }
    }

    a {
        text-decoration: none;
        color: #006AFF;
        margin-right: 10px;

        img {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
}
.guide{
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8A9099 !important;
    font-size: 12px;
}
a {
    color: #006AFF;
    text-decoration: none;
}
</style>