<template>
    <div class="main-content12">
        <!-- page content -->
        <div class="site-setting-wrap min-flex-right">
            <div class="siteMessage flex-common">
                <h3>支付授权</h3>
                <el-form>
                    <div class="flex-wrap"  v-if="payType==payTypeWeixin">
                        <div class="flex-left">
                            <el-form>
                                <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                                    <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.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="payinfo.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="payinfo.apiv2" prop="payinfo.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="payinfo.appid" prop="payinfo.appid" placeholder="请输入公众号APPID">
                                    </GuipInput>
                                </GuipFormItem>
                            </el-form>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <div class="preview">
                                <div class="preview-title">
                                    <p>预览支付二维码</p>
                                </div>
                                <div class="preview-content">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="register-btns">
            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }">取消</GuipButton>
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">保存</GuipButton>
        </div>
    </div>
    
</template>
<script>
// import GuipInput from '@/components/GuipInput.vue';
import store from '@/store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
// import GuipTextarea from '@/components/GuipTextarea.vue';
// import GuipRadio from '@/components/GuipRadio.vue';
// import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';
// import GroupFormBtns from '@/components/GroupFormBtns.vue';
// import {setHighActive} from '@/utils/common';

// 收款方式
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: '',
    props: [''],
    components: {
        // GuipRadio,
        GuipFormItem,
        GuipInput,
        // GuipTextarea,
        // CustomDropdown,
        GuipButton,
        // GroupFormBtns

    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            payinfo: [],
            payType: -1,
            // 收款方式
            payTypeTaoBao: PAY_TYPE_TAOBAO,
            payTypeWeixin: PAY_TYPE_WEIXIN,
            payTypeAlipay: PAY_TYPE_ALIPAY,
            payTypeJingdong: PAY_TYPE_JINGDONG,
            payTypePdd: PAY_TYPE_PDD,
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'paySettingData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '支付授权');

        this.getPayment();
    },
    methods: {
        getPayment() {
            this.$http('POST', '/agentnew/ajax_get_payinfo', {
                payid: this.$route.query.payid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.payinfo = response.data
                    this.payType = response.data.type
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 确认按钮事件
        addPayment() {
        if (this.payType == PAY_TYPE_TAOBAO) {
            window.open(this.taobaoAuthUrl, '_blank');
            
        } else if (this.payType == PAY_TYPE_WEIXIN) {
            this.$http('POST', '/agentnew/ajax_add_weixinpay', {
                payid: this.$route.query.payid,
                company_short_name: this.payinfo.short_name,
                mch_id: this.payinfo.mch_id,
                apiv2: this.payinfo.apiv2,
                appid: this.payinfo.appid
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.getPayList();
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })

            } else if (this.payType == PAY_TYPE_ALIPAY) { 
                this.$http('POST', '/agentnew/ajax_add_alipay', {
                    company_short_name: this.company_short_name,
                    alipay_account: this.alipay_account,
                    is_pay_public: this.isPayPublic,
                    receive_payment_account: this.receive_payment_account,
                    receive_payment_name: this.receive_payment_name
                }, {
                    headers: {
                        'Auth': this.token
                    }
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            if (this.isPayPublic == 1) {
                            this.$Message.success(response.info);
                            this.getPayList();
                            this.receive_payment_account = ''
                            this.receive_payment_name = ''
                            } else { 
                            window.open(response.data.authurl, '_blank');
                            }
                            
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } else if (this.payType == PAY_TYPE_PDD) { 
                this.$http('POST', '/agentnew/ajax_add_pddpay', {
                    shop_name: this.pdd_shop_name,
                }, {
                    headers: {
                        'Auth': this.token
                    }
                }).then(response => {
                    this.$nextTick(() => {
                        if (response.status) {
                            this.$Message.success(response.info);
                            this.getPayList();
                            this.pdd_shop_name = ''
                            
                        } else {
                            this.$Message.error(response.info);
                        }
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } else if (this.payType == PAY_TYPE_JINGDONG) { 
                window.open(this.jdAuthUrl, '_blank');
            }
        },
        // 操作下拉框
        toggleDrop(e){
            this.$refs.dropDomain.toggleDropdown(e)
        },
        changeSelectIp(item) {
            //内容真实绑定在    
            this.selectedItem1 = { ...item };
        },
        // 获取站点信息
        getSiteInfo() {
            const that = this
            that.siteInfo = []
            this.$http('POST', '/agentnew/ajax_get_site_info', {
                uid: this.$route.query.uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.siteInfo = response.data
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateSiteInfo() {
            this.$http('POST', '/agentnew/ajax_update_site_info', {
                uid: this.$route.query.uid,
                short_name: this.siteInfo.short_name,
                company_name: this.siteInfo.company_name,
                company_phone: this.siteInfo.phone_num,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        cancleUpdateSiteInfo() {
            this.getSiteInfo();
        },
        changeNormalWeixin() {

        },
        changeSelectWeixin(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        //  销售渠道
        domain_radioChange(type) {
            console.log(type, '--');
        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        submitForm(form) {
            console.log(this.$refs[form], '-----');
            this.$refs[form].validate((valid) => {
                console.log(this[form], '======formxinxi');
                if (valid) {
                    alert('提交成功!');
                } else {
                    return false;
                }
            });
        },
        cancelClick() {
            console.log('quxiao');
        },
        confirmClick(type) {
            console.log(type, '确认');
        }

    }
}
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #006AFF;
}
.register-btns {
  // height: 78px;
  /* 自动布局 */
  // width: 344px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #FFFFFF;
  padding: 16px 0px;
  /* 蓝色阴影_常规 */
  box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);

  button:nth-child(1) {
    margin-right: 56px;
  }
}
.preview {
    background: #FAFAFA;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    text-align: left;
}

.preview-title {
    padding-top: 24px;
    padding-left: 20px;
}
.preview-title p {
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
}

.preview-content {
    margin-top: 20px;
    margin-left: 20px;
    background: #FFFFFF;
    width: 100%;
    height: 200px;
}


.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}

.site-setting-wrap {
    width: 100%;
}

</style>