<template>
    <div class="main-content12">
        <!-- page header -->
        <div class="pageheader">
            <span class="pagetitle">基本设置</span>
        </div>

        <!-- page content -->
        <div class="site-setting-wrap min-flex-right">
            <div class="siteMessage flex-common" id="siteMessage1">
                <h3>站点信息</h3>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10"
                                :showWordLimit="true" desc="一个站点对应一个销售渠道，定义好名字好区分" v-model="siteInfo.short_name"
                                prop="short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />

                            <GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
                                v-model="siteInfo.phone_num" prop="company_phone" placeholder="非必填" />
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <GuipTextarea v-model="siteInfo.company_name" label="详细介绍" column="column"
                                prop="doctor_detail" width="100%" height="90px" placeholder="请输入描述内容"
                                desc="在站点首页底部“关于我们”展示" show-word-limit />
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="updateSiteInfo()" />

            </div>
            <div class="siteMessage flex-common" id="siteMessage2">
                <h3>站点信息</h3>
                <el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="mb24" label="域名来源" required="true">
                                <GuipRadio slot="formDom" v-model="siteForm1.domain_source" :options="domain_source"
                                    prop="domain_source" @change="domain_radioChange" />
                            </GuipFormItem>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <!-- <GuipFormItem column="column" label="域名设置" required="true">
                                <GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
                                    <span slot="appendshow">.chachongz.com</span>
                                </GuipInput>
                            </GuipFormItem> -->
                            <GuipFormItem column="column" class="combo-formItem" label="域名设置" required="true">
                                <div slot="formDom" class="self-drop-wrap flex" style="width: 100%;">
                                    <GuipInput style="width: 60%;" v-model="siteForm1.domain_set"
                                        placeholder="仅支持数字、字母">
                                    </GuipInput>
                                    <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{
                                        siteForm1.domainSuffix }}</div>
                                </div>
                                <CustomDropdown slot="formDom" ref="dropDomain" width="100%"
                                    v-model="siteForm1.domainSuffix" :options="domainOptions" @change="changeSelectIp"
                                    placeholder="请选择">
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>添加新域名</b>
                                                <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
                                                <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
                                            </div>
                                            <div class="right">
                                                <GuipButton size="form">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                    <!-- 自定义下拉选项 -->
                                    <!-- <template #item="{ item }">
                                        <div class="flex-between">
                                            <div class="left">
                                                <p class="one">{{ item.label }}</p>
                                            </div>
                                            <div class="right">
                                                <img v-if="siteForm1.domainSuffix == item.value"
                                                    src="@/assets/register/drop-selected.svg" alt="">
                                            </div>
                                        </div>
                                    </template> -->
                                </CustomDropdown>
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />

            </div>
            <div class="siteMessage flex-common" id="siteMessage3">
                <h3>收款方式<span>至少需要配置1种收款方式</span></h3>
                <el-form ref="formRef">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypeWeixin]">
                                <div slot="formLeft" class="form-top-icon">
                                    <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" alt=""><span>微信收款</span>
                                </div>
                                <CustomDropdown v-if="wxpayList && wxpayList.length" slot="formDom" width="100%" v-model="bindWxpayId"
                                    :options="wxpayList" displayKey="name" valueKey="payid"
                                    @change="changeSelectWeixin" placeholder="请选择" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectWxpay">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新微信收款</b>
                                                <p class="one">需要使用您公司的微信支付</p>
                                                <p>需在微信商户平台-产品中心开通Native支付</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeWeixin)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 自定义下拉选项 -->
                                    <template #item="{ item }">
                                        <div class="flex-between">
                                            <div class="left">
                                                <p class="one">{{ item.short_name }}</p>
                                                <p>{{ item.account }}</p>
                                            </div>
                                            <div class="right">
                                                <img v-if="selectWxpay && selectWxpay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindWxpayId"
                                    :options="wxpayList" displayKey="name" valueKey="payid"
                                    @change="changeSelectWeixin" placeholder="请选择"
                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectWxpay">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新微信收款</b>
                                                <p class="one">需要使用您公司的微信支付</p>
                                                <p>需在微信商户平台-产品中心开通Native支付</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeWeixin)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                            </GuipFormItem>

                            <!-- 支付宝 -->
                            <GuipFormItem column="column" v-if="addablePays[payTypeAlipay]">
                                <div slot="formLeft" class="form-top-icon">
                                    <img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;" alt=""><span>支付宝收款</span>
                                </div>
                                <CustomDropdown v-if="alipayList && alipayList.length" slot="formDom" width="100%" v-model="bindAlipayId"
                                    :options="alipayList" @change="changeSelectAlipay" placeholder="请选择"
                                    @changeNormal="changeNormalWeixin">
                                    <template #trigger>
                                        <span v-if="selectAlipay">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新支付宝收款</b>
                                                <p class="one">需要使用您公司的支付宝支付</p>
                                                <p>需在支付宝商户平台-产品中心开通Native支付</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeAlipay)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>

                                    <template #item="{ item }">
                                        <div class="flex-between">
                                            <div class="left">
                                                <p class="one">{{ item.short_name }}</p>
                                                <p>{{ item.account }}</p>
                                            </div>
                                            <div class="right">
                                                <img v-if="selectAlipay && selectAlipay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindAlipayId"
                                    :options="alipayList" @change="changeSelectAlipay" placeholder="请选择"
                                    @changeNormal="changeNormalWeixin" :options_null="options_weixin_null">
                                    <template #trigger>
                                        <span v-if="selectAlipay">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新支付宝收款</b>
                                                <p class="one">需要使用您公司的支付宝支付</p>
                                                <p>需在支付宝商户平台-产品中心开通Native支付</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeAlipay)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypeJingdong]">
                                <div slot="formLeft" class="form-top-icon">
                                    <img src="@/assets/register/jingdong.svg" style="width: 26px;height: 26px;" alt=""><span>京东店铺</span>
                                </div>
                                <CustomDropdown v-if="jdList && jdList.length" slot="formDom" width="100%" v-model="bindJdId"
                                    :options="jdList" displayKey="name" valueKey="payid"
                                    @change="changeSelectJindong" placeholder="请选择" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectJd">{{ selectJd.short_name }} {{ selectJd.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新京东店铺</b>
                                                <p class="one">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeJingdong)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 自定义下拉选项 -->
                                    <template #item="{ item }">
                                        <div class="flex-between">
                                            <div class="left">
                                                <p class="one">{{ item.account }}</p>
                                                <p>{{ item.short_name }}</p>
                                            </div>
                                            <div class="right">
                                                <img v-if="selectJd && selectJd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindJdId"
                                    :options="jdList" displayKey="name" valueKey="payid"
                                    @change="changeSelectJindong" placeholder="请选择"
                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectJd">{{ selectJd.short_name }} {{ selectJd.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新京东店铺</b>
                                                <p class="one">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeJingdong)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                            </GuipFormItem>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypeTaoBao]">
                                <div slot="formLeft" class="form-top-icon">
                                    <img src="@/assets/register/taobao.svg" style="width: 26px;height: 26px;" alt=""><span>淘宝/天猫店铺</span>
                                </div>
                                <CustomDropdown v-if="taobaoList && taobaoList.length" slot="formDom" width="100%" v-model="bindTaobaoId"
                                    :options="taobaoList" displayKey="name" valueKey="payid"
                                    @change="changeSelectTaobao" placeholder="请选择" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectTaobao">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新淘宝/天猫店铺</b>
                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeTaoBao)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 自定义下拉选项 -->
                                    <template #item="{ item }">
                                        <div class="flex-between">
                                            <div class="left">
                                                <p class="one">{{ item.account }}</p>
                                                <p>{{ item.short_name }}</p>
                                            </div>
                                            <div class="right">
                                                <img v-if="selectTaobao && selectTaobao.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindTaobaoId"
                                    :options="taobaoList" displayKey="name" valueKey="payid"
                                    @change="changeSelectTaobao" placeholder="请选择"
                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectTaobao">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新淘宝/天猫店铺</b>
                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeTaoBao)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypePdd]">
                                <div slot="formLeft" class="form-top-icon">
                                    <img src="@/assets/register/pinduoduo.svg" style="width: 26px;height: 26px;" alt=""><span>拼多多店铺</span>
                                </div>
                                <CustomDropdown v-if="pddList && pddList.length" slot="formDom" width="100%" v-model="bindPddId"
                                    :options="pddList" displayKey="name" valueKey="payid"
                                    @change="changeSelectPdd" placeholder="请选择" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectPdd">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新拼多多店铺</b>
                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypePdd)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>

                                    <!-- 自定义下拉选项 -->
                                    <template #item="{ item }">
                                        <div class="flex-between">
                                            <div class="left">
                                                <p class="one">{{ item.account }}</p>
                                                <p>{{ item.short_name }}</p>
                                            </div>
                                            <div class="right">
                                                <img v-if="selectPdd && selectPdd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindPddId"
                                    :options="pddList" displayKey="name" valueKey="payid"
                                    @change="changeSelectPdd" placeholder="请选择"
                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectPdd">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
                                        <span v-else>请选择</span>
                                    </template>
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>绑定新拼多多店铺</b>
                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypePdd)">前往绑定</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="updateSitePay()" />
            </div>
        </div>

        <addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" :authToken="authToken"></addPay>
    </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 addPay from '@/components/pay/addPay.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,
        addPay,
    },
    data() {
        return {
            // 收款方式
            payTypeTaoBao: PAY_TYPE_TAOBAO,
            payTypeWeixin: PAY_TYPE_WEIXIN,
            payTypeAlipay: PAY_TYPE_ALIPAY,
            payTypeJingdong: PAY_TYPE_JINGDONG,
            payTypePdd: PAY_TYPE_PDD,

            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            // 站点信息
            siteInfo: {
                short_name: '',
                company_name: '',
                phone_num: '',
            },
            taobaoList: [],
            wxpayList: [],
            alipayList: [],
            pddList: [],
            jdList: [],

            bindWxpayId: 0,
            selectWxpay: null,
            bindAlipayId: 0,
            selectAlipay: null,
            bindTaobaoId: 0,
            selectTaobao: null,
            bindPddId: 0,
            selectPdd: null,
            bindJdId: 0,
            selectJd: null,


            sitePays: [],
            addPayType: -1,
            isShowAddPay: false,
            authToken: '',
            addablePays: [],

            domainOptions: [
                {
                    value: '.chachongz.com',
                    label: '.chachongz.com'
                },
                {
                    value: '.turnitin.org.cn',
                    label: '.turnitin.org.cn'
                },
                {
                    value: '.jishu.chachongz.com',
                    label: '.jishu.chachongz.com'
                },
            ],
            siteForm1: {
                domain_set: '',
                domainSuffix:'.chachongz.com',
                domain_source: '平台免费域名',
            },
            siteFormrules1: {
                domain_source: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
            domain_source: [
                { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
                { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
            ],
            options_weixin_null: {},
            select_placeholder_weixin: '暂无收款账号，稍后配置',
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'siteSettingData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '基本设置');

        this.getSiteInfo();
        this.getPayList();
        this.getAddablePays();
    },
    methods: {
        // 获取可添加的收款方式
        getAddablePays() {
            this.$http('POST', '/agentnew/ajax_get_addable_pays', {
                uid: this.$route.query.uid
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.addablePays = response.data
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 获取支付列表
        getPayList() {
            this.$http('POST', '/agentnew/ajax_get_pay_list', {
                gid: this.gid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (
                        response.data &&
                        response.data.paylist &&
                        response.data.paylist[this.payTypeWeixin] &&
                        response.data.paylist[this.payTypeWeixin].length > 0
                    ) {
                        this.wxpayList = response.data.paylist[this.payTypeWeixin]
                    }
                    if (
                        response.data &&
                        response.data.paylist &&
                        response.data.paylist[this.payTypeAlipay] &&
                        response.data.paylist[this.payTypeAlipay].length > 0
                    ) {
                        this.alipayList = response.data.paylist[this.payTypeAlipay]
                    }
                    if (
                        response.data &&
                        response.data.paylist &&
                        response.data.paylist[this.payTypeTaoBao] &&
                        response.data.paylist[this.payTypeTaoBao].length > 0
                    ) {
                        this.taobaoList = response.data.paylist[this.payTypeTaoBao]
                    }
                    if (
                        response.data &&
                        response.data.paylist &&
                        response.data.paylist[this.payTypePdd] &&
                        response.data.paylist[this.payTypePdd].length > 0
                    ) {
                        this.pddList = response.data.paylist[this.payTypePdd]
                    }
                    if (
                        response.data &&
                        response.data.paylist &&
                        response.data.paylist[this.payTypeJingdong] &&
                        response.data.paylist[this.payTypeJingdong].length > 0
                    ) {
                        this.jdList = response.data.paylist[this.payTypeJingdong]
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        goBindPay(type) {
            this.addPayType = type;
            this.isShowAddPay = true;
            this.authToken = this.token;
        },
        // 操作下拉框
        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
                    if (
                        response.data &&
                        response.data.site_pays &&
                        response.data.site_pays[this.payTypeWeixin]
                    ) {
                        this.bindWxpayId = response.data.site_pays[this.payTypeWeixin].payid;
                        this.selectWxpay = response.data.site_pays[this.payTypeWeixin];
                    }
                    console.log(this.selectWxpay, 'selectWxpay');

                    if (
                        response.data &&
                        response.data.site_pays &&
                        response.data.site_pays[this.payTypeAlipay]
                    ) {
                        this.bindAlipayId = response.data.site_pays[this.payTypeAlipay].payid;
                        this.selectAlipay = response.data.site_pays[this.payTypeAlipay];
                    } 
                    if (
                        response.data &&
                        response.data.site_pays &&
                        response.data.site_pays[this.payTypeTaoBao]
                    ) {
                        this.bindTaobaoId = response.data.site_pays[this.payTypeTaoBao].payid;
                        this.selectTaobao = response.data.site_pays[this.payTypeTaoBao];
                    } 
                    if (
                        response.data &&
                        response.data.site_pays &&
                        response.data.site_pays[this.payTypePdd]
                    ) {
                        this.bindPddId = response.data.site_pays[this.payTypePdd].payid;
                        this.selectPdd = response.data.site_pays[this.payTypePdd];
                    } 
                    if (
                        response.data &&
                        response.data.site_pays &&
                        response.data.site_pays[this.payTypeJingdong]
                    ) {
                        this.bindJdId = response.data.site_pays[this.payTypeJingdong].payid;
                        this.selectJd = response.data.site_pays[this.payTypeJingdong];
                    } 

                })
            }).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.bindWxpayId = item.payid;
            this.selectWxpay = item;
            console.log(this.bindWxpayId, 'bindWxpayId');
            console.log(this.selectWxpay, 'selectWxpay');

            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        changeSelectAlipay(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.bindAlipayId = item.payid;
            this.selectAlipay = item;
            console.log(this.bindWxpayId, 'bindWxpayId');

            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        changeSelectTaobao(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.bindTaobaoId = item.payid;
            this.selectTaobao = item;

            this.selectedItem = { ...item };
        },
        changeSelectJindong(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.bindJdId = item.payid;
            this.selectJd = item;

            this.selectedItem = { ...item };
        },
        changeSelectPdd(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.bindPddId = item.payid;
            this.selectPdd = item;

            this.selectedItem = { ...item };
        },
        //  销售渠道
        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, '确认');
        },
        updateSitePay() {
            var data = {
                uid: this.$route.query.uid,
                pay_config: {
                    0: this.bindTaobaoId,
                    2: this.bindWxpayId,
                    3: this.bindAlipayId,
                    4: this.bindJdId,
                    11: this.bindPddId,
                },
            }

            this.$http('POST', '/agentnew/ajax_update_site_pay', data, {
                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')
            })
        },
        handleEvent(data) {
            console.log(data, 'handleEvent');
            this.isShowAddPay = data
        }

    }
}
</script>
<style lang="scss" scoped>
.pageheader {
    display: flex;
    justify-content: space-between;
    /* 关键属性 */
    align-items: center;
    margin: 16px 0px 16px 0px;
}

.pagetitle {
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-top: 8px;
}

.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}
.combo-formItem {
    ::v-deep {
        .form-item-bottom {
            position: relative;
        }

        .select-trigger {
            background: #F6F7FA;
            border-color: transparent;
        }

        .is-open .select-trigger {
            border-color: #006AFF;
        }

        .el-input__inner {
            border-radius: 2px 0 0 2px;
        }
    }
    .self-drop-wrap {
        position: absolute;
        z-index: 1;
        width: 100%;
    }
    .appendDrop {
        height: 38px;
        align-items: center;
        border-radius: 0 2px 2px 0;
        border: 1px solid #DFE2E6;
        border-left-color: transparent;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 30px 0 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        &:hover {
            border: 1px solid #006AFF;
        }
    }
}
.addStore {
    margin-top: 12px;
    // border-radius: 4px;
    // opacity: 1;
    // /* text/text_white_2 */
    // border: 1px dashed #BABDC2;
    // padding: 15px 20px;
    // color: #626573;
    // justify-content: center;

    // img {
    //     margin-right: 12px;
    // }
}


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

#siteMessage2 {
    margin: 12px 0;
}

.domain-wrap {
    .domain-item {
        margin-bottom: 10px;
    }


    .domain-item p:last-child {
        padding-left: 23px;
        color: #8A9099;
    }

    p {
        text-align: left;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .domain-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}
</style>