<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>
                <p class="flex siteMessage5_desc"> <img src="@/assets/tip_blue.svg" alt="">当前站点域名：{{ siteInfo.domain }}</p>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <p class="flex-left-desc">域名来源</p>
                            <div class="flex mt12">
                                <GuipRadio v-model="domainType" :options="domainTypes" prop="type" @change="domainTypeChange" />
                            </div>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <domainBind v-if="domainType==2" label="修改域名" @handleEvent="handleEvent2" />

                            <div v-if="domainType==1">
                                <p class="flex-left-desc">修改域名</p>
                                <GuipInput class="mt12" v-model="domainPrefix">
                                    <!-- <span slot="prependshow">http:</span> -->
                                    <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
                                    <!-- 输入框后面小图标 -事件自定义 -->
                                    <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
                                    <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->

                                    <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
                                    <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->

                                    <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
                                    <span slot="appendshow">.{{ siteInfo.plat_domain }}</span>
                                </GuipInput>
                                <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
                            </div>
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="updateSiteDomain()" />

            </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 slot="formDom" width="100%"
                                    :options="wxpayList" :options_null="!wxpayList.length" displayKey="name" valueKey="payid"
                                    @change="changeSelectWeixin">
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectWxpay && (selectWxpay.short_name || selectWxpay.account)">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
                                        <span v-else-if="wxpayList.length === 0">暂无收款账号，稍后配置</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>
                            </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 slot="formDom" width="100%"
                                    :options="alipayList" :options_null="!alipayList.length" @change="changeSelectAlipay">
                                    <template #trigger>
                                        <span v-if="selectAlipay && (selectAlipay.short_name || selectAlipay.account)">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
                                        <span v-else-if="alipayList.length === 0">暂无收款账号，稍后配置</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>
                            </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 slot="formDom" width="100%"
                                    :options="jdList" displayKey="name" valueKey="payid"
                                    :options_null="!jdList.length"
                                    @change="changeSelectJindong" >
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectJd && (selectJd.short_name || selectJd.account)">{{ selectJd.short_name }} {{ selectJd.account }}</span>
                                        <span v-else-if="jdList.length === 0">暂无收款账号，稍后配置</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>
                            </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 slot="formDom" width="100%"
                                    :options="taobaoList" displayKey="name" valueKey="payid"
                                    :options_null="!taobaoList.length"
                                    @change="changeSelectTaobao" >
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectTaobao && (selectTaobao.short_name || selectTaobao.account)">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
                                        <span v-else-if="!taobaoList.length">暂无收款账号，稍后配置</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>
                            </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 slot="formDom" width="100%"
                                    :options="pddList" displayKey="name" valueKey="payid"
                                    :options_null="!pddList.length"
                                    @change="changeSelectPdd" >
                                    <!-- 选择后显示数据 -->
                                    <template #trigger>
                                        <span v-if="selectPdd && (selectPdd.short_name || selectPdd.account)">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
                                        <span v-else-if="pddList.length === 0">暂无收款账号，稍后配置</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>
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="updateSitePay()" />
            </div>
        </div>

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

            // 站点信息
            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,
            addablePays: [],

            // 淘宝授权url
            taobaoAuthUrl: '',
            // 是否存在自供货 存在自供货 则不支持支付宝代收款
            isExistSelfSupplys: false,
            // 拼多多授权url
            pddAuthUrl: '',
            // 拼多多店铺名称
            pdd_shop_name: '',
            // 京东授权url
            jdAuthUrl: '',

            // 是否使用私有域名
            domainType: 0, 
            domainTypes: [],
            domainPrefix: '',
            siteDomain: '',
        }
    },
    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
            }).then(response => {
                this.$nextTick(() => {
                    this.addablePays = response.data
                    if(response.data[PAY_TYPE_TAOBAO]) {
                        this.taobaoAuthUrl = response.data[PAY_TYPE_TAOBAO].authurl
                    }
                    
                    if (response.data[PAY_TYPE_ALIPAY]) {
                        this.isExistSelfSupplys = response.data[PAY_TYPE_ALIPAY].is_exist_self_supplys
                    }
                    
                    if (response.data[PAY_TYPE_PDD]) {
                        this.pddAuthUrl = response.data[PAY_TYPE_PDD].authurl
                    }
                    
                    if (response.data[PAY_TYPE_JINGDONG]) { 
                        this.jdAuthUrl = response.data[PAY_TYPE_JINGDONG].authurl
                    }
                    
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 获取支付列表
        getPayList() {
            this.$http('POST', '/agentnew/ajax_get_pay_list', {
                uid: this.$route.query.uid,
            }).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;
        },
        // 操作下拉框
        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,
            }).then(response => {
                this.$nextTick(() => {
                    that.siteInfo = response.data
                    this.domainType = String(that.siteInfo.domain_type);
                    this.domainTypes = that.siteInfo.domain_types;
                    this.siteDomain = response.data.domain;

                    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,
            }).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();
        },
        changeSelectWeixin(item) {
            console.log(item, 'item')
            if(this.bindWxpayId === item.payid){
                this.bindWxpayId = 0
                this.selectWxpay = null
                return true
            }

            this.bindWxpayId = item.payid;
            this.selectWxpay = item;
        },
        changeSelectAlipay(item) {
            if(this.bindAlipayId === item.payid){
                this.bindAlipayId = 0
                this.selectAlipay = null
                return true
            }
            this.bindAlipayId = item.payid;
            this.selectAlipay = item;
        },
        changeSelectTaobao(item) {
            if(this.bindTaobaoId === item.payid){
                this.bindTaobaoId = 0
                this.selectTaobao = null
                return true
            }
            this.bindTaobaoId = item.payid;
            this.selectTaobao = item;
        },
        changeSelectJindong(item) {
            if(this.bindJdId === item.payid){
                this.bindJdId = 0
                this.selectJd = null
                return true
            }
            this.bindJdId = item.payid;
            this.selectJd = item;
        },
        changeSelectPdd(item) {
            console.log(item)
            console.log(this.bindPddId)
            if(this.bindPddId === item.payid){
                this.bindPddId = 0
                this.selectPdd = null
                return true
            }
            this.bindPddId = item.payid;
            this.selectPdd = item;
        },
        //  销售渠道
        domainTypeChange(type) {
            this.domainType = String(type);
            console.log(this.domainType, 'this.domainType');
            console.log(typeof this.domainType, 'domainTypeChange'); 
        },
        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).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
        },
        handleEvent2(data) {
            console.log(data, 'handleEvent2');
            this.siteDomain = data.prefix + data.domain;
        },
        handleClear(value) {
            console.log(value, 'value===qinghcu');
            this.domainPrefix = '';
        },
        updateSiteDomain() {
            var domain = this.siteInfo.domain;
            if (this.domainType == '1') {
                domain = this.domainPrefix + '.' + this.siteInfo.plat_domain;
            } else if (this.domainType == '2') { 
                domain = this.siteDomain;
            }

            this.$http('POST', '/agentnew/ajax_update_site_domain', {
                uid: this.$route.query.uid,
                domain: domain,
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.getSiteInfo();
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        }

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

.pagetitle {
    font-size: 16px;
    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%;

    .siteMessage5_desc {
        border-radius: 4px;
        /* middle/middle_blue_1 */
        background: #F2F7FF;
        /* middle/middle_blue_3 */
        border: 1px solid #BFDAFF;
        padding: 8px 13px;
        margin-bottom: 32px;

        img {
            margin-right: 8px;
        }

    }
}

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