<template>
    <div class="main-content12">
        <!-- page header -->
        <div class="pageheader flex">
            <span class="pagetitle">移动端设置</span>
        </div>

        <!-- page content -->
        <div class="site-personal-wrap">
            <div class="siteMessage flex-common mt12" id="siteMessage9">
                <h3 class="flex">微信H5 <span class="flex ml-8" @click="showWhatIsH5=true"><img class="ml-8" src="@/assets/site/form_qua_ic.svg" alt=""><span class="ml-8">什么是微信H5</span></span></h3>
                <el-drawer title="什么是微信H5" size="20%" :visible.sync="showWhatIsH5" direction="rtl" :append-to-body="true">
                    <div class="desc mx-24">
                        <p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">说明</p>
                        <p class="flex desc-cont">微信H5版是平台基于微信相关功能开发的</p>
                        <p class="flex desc-cont">微信H5等适合手机端提交的系统</p>
                        <p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">优点</p>
                        <p class="flex desc-cont">1.微信H5：开通后用户可从手机微信端提交检测服务，手机端支持微信支付、检测卡支付</p>
                        <p class="flex desc-cont">2.检测进度通知：用户提交检测后，扫描你的公众号二维码，在检测完成后系统通过微信告知用户</p>
                        <p class="flex desc-cont">3.微信优惠券：微信服务号自带的优惠券，开通后可在平台生成微信优惠券发给用户</p>
                        <p class="flex desc-cont">4.营销活动：开启微信H5版完成公众号授权后，可以通过创建营销活动向用户发放检测卡</p>
                        <p class="flex desc-cont">5.代收款用户：代收款用户可以开通“微信H5、检测进度通知、微信优惠券”功能</p>
                        <p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">如何开通？</p>
                        <p class="flex desc-cont">前往快乐论文帮助中心查看相关指引。</p>
                        <p class="flex desc-cont"><a href="https://thoughts.teambition.com/sharespace/5eda16fd4cc9cb001aadc28e/folders/5ee20f9e7a72f1001a388e9d" class="flex" target="_blank"><img style="margin-right: 5px;"
                            src="@/assets/site/form_linkActive.svg" alt="">快乐论文帮助中心</a></p>
                        <p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">常见问题</p>
                        <p class="flex desc-cont">微信H5版手机端支付失败请参考：</p>
                        <p class="flex desc-cont"><a href="https://zhic.yuque.com/staff-chwecz/xhk8nt/hikegp2zleaa6dm5" class="flex" target="_blank"><img style="margin-right: 5px;"
                            src="@/assets/site/form_linkActive.svg" alt="">微信版常见问题</a></p>
                        
                    </div>
                </el-drawer>
                <div class="tip">为保证正常收款，请确定当前公众号能使用此支付商号收款</div>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div class="left-pay-list mb24">
                                <div class="left-pay-item ">
                                    <div class="flex-between">
                                        <span>H5开关</span>
                                        <GuipSwitch :modelValue="siteInfo.is_open_h5" :active-value="1" :inactive-value="0" activeText="开" inactiveText="关" @change="updateSiteH5Status"></GuipSwitch>
                                    </div>

                                    <div v-if="siteWxpayInfo.appid">
                                        <p>微信公众号：{{ siteWxpayInfo.appid }}（{{ siteWxpayInfo.mch_id }}）（{{ siteWxpayInfo.short_name }}）</p>
                                        <p class="flex" v-if="siteWxpayInfo.is_auth==false || siteWxpayInfo.is_auth_expire==true">
                                            <a href="#" class="flex mr-5" @click="showMpAuth"><img class="mr-5" src="@/assets/site/form_linkActive.svg" alt="">去授权 </a>
                                            <span class="red" v-if="siteWxpayInfo.is_auth==false">此公众号未经授权，不可用</span>
                                            <span class="red" v-else-if="siteWxpayInfo.is_auth_expire==true">此公众号授权已过期，不可用</span>
                                        </p>
                                    </div>
                                    <div v-else>    
                                        <p>微信公众号：未绑定</p>
                                        <p class="flex">
                                            <a href="#" class="flex mr-5" @click="goBindPay"><img class="mr-5" src="@/assets/site/form_linkActive.svg" alt="">去绑定微信支付 </a>
                                            <span class="red">绑定微信支付后，H5才可使用</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="siteMessage flex-common mt12" id="siteMessage10">
                <h3>小程序<span>无须开发，仅把申请的小程序授权给我们即可拥有自己的小程序网站</span></h3>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="combo-formItem w510" label="绑定微信小程序" required="">
                                <CustomDropdown slot="formDom" width="500px" v-model="bindWxXcxId" :options="xcxList[0]"
                                    @change="changeBind(0)" displayKey="name" valueKey="xcx_id" placeholder="请选择">
                                    <!-- displayKey选中后要显示的字段 -->
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>新增微信小程序</b>
                                                <p class="one ft12">点击右侧按钮，根据引导新增小程序</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton size="form" @click="showAddXcx(0)">去新增</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                    <template #item="{ item }">
                                        <div class="flex">
                                            <p class="mr-12">{{ item.name }}</p>
                                            <div v-if="item.status==4" class="status-item divgreen"><span class="fontgreen">{{ item.status_desc }}</span></div>
                                            <div v-else-if="item.status==3" class="status-item divorange"><span class="fontorange">{{ item.status_desc }}</span></div>
                                            <div v-else-if="item.status==5 || item.status==0" class="status-item divgray"><span class="fontgray">{{ item.status_desc }}</span></div>
                                            <div v-else-if="item.status==1 || item.status==2" class="flex">
                                                <div class="status-item divred mr-12">
                                                    <span class="fontred">{{ item.status_desc }}</span>
                                                </div>
                                                <img src="@/assets/site/form_qua_ic.svg" alt="" class="flex mr-5"> <span>失败原因</span>
                                            </div>
                                        </div>
                                        <div class="flex appid">{{ item.appid }}</div>
                                    </template>
                                </CustomDropdown>
                            </GuipFormItem>

                            <div class="mt24">
                                <GuipFormItem column="column" class="combo-formItem w510" label="绑定支付宝小程序" required="">
                                <CustomDropdown slot="formDom" width="500px" v-model="bindAliXcxId" :options="xcxList[2]"
                                    @change="changeBind(2)" displayKey="name" valueKey="xcx_id" placeholder="请选择">
                                    <template #normal>
                                        <div class="flex flex-between noraml-jump">
                                            <div class="left">
                                                <b>新增支付宝小程序</b>
                                                <p class="one ft12">点击右侧按钮，根据引导新增小程序</p>
                                            </div>
                                            <div class="right">
                                                <GuipButton size="form" @click="showAddXcx(2)">去新增</GuipButton>
                                            </div>
                                        </div>
                                    </template>
                                    <template #item="{ item }">
                                        <div class="flex">
                                            <p class="mr-12">{{ item.name }}</p>
                                            <div v-if="item.status==4" class="status-item divgreen"><span class="fontgreen">{{ item.status_desc }}</span></div>
                                            <div v-else-if="item.status==3" class="status-item divorange"><span class="fontorange">{{ item.status_desc }}</span></div>
                                            <div v-else-if="item.status==5 || item.status==0" class="status-item divgray"><span class="fontgray">{{ item.status_desc }}</span></div>
                                            <div v-else-if="item.status==1 || item.status==2" class="flex">
                                                <div class="status-item divred mr-12">
                                                    <span class="fontred">{{ item.status_desc }}</span>
                                                </div>
                                                <img src="@/assets/site/form_qua_ic.svg" alt="" class="flex mr-5"> <span>失败原因</span>
                                            </div>
                                        </div>
                                    </template>
                                </CustomDropdown>
                            </GuipFormItem>
                            </div>
                            
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="updateSiteXcxBind()" />
            </div>
        </div>
        
        <GuipDialog type="center" :dialogVisible="dialogVisibleMpAuth" title="授权微信公众号" confirmText="确认完成准备事项，去授权" cancelText="取消授权" :show-close-button="false"
                :show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel"
                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
            <!-- 自定义内容 -->
            <div class="beforeNotice">
                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                <p class="mt12 flex">1. 需要提前注册微信支付商号、公众号（服务号）</p>
                <p class="mt10 flex">2. 登录
                    <a href="https://pay.weixin.qq.com/" class="flex" target="_blank">
                        <img src="@/assets/site/form_linkActive.svg" alt="">微信支付平台
                    </a>＞开发配置＞添加公众号支付授权目录
                </p>
                <div class="pay-auth-dir">
                    <p>{{ siteWxpayInfo.pay_auth_dir }}</p>
                    <img src="@/assets/form_copy.svg" alt="" @click="handleClickCopy(siteWxpayInfo.pay_auth_dir)">
                </div>
            </div>
        </GuipDialog>
        <GuipDialog :dialogVisible="dialogVisibleAddXcx" :title="addXcxTitle" confirmText="确认" cancelText="取消" :show-close-button="false"
                :show-cancel-button="true" @confirm="addXcx" @cancel="handleCancel"
                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
            <!-- 自定义内容 -->
            <div v-if="xcxType == 0">
                <div class="beforeNotice">
                    <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                    <p class="mt12 flex">一、1. 申请微信支付商号。2.注册微信小程序。3.站点绑定微信付款。</p>
                    <p class="mt12 ml-20 flex"><a class="flex" href="/agentnew/download_xcx_register_tutorial/type/0"><img src="@/assets/download.svg" alt="">下载教程</a></p>
                    <p class="mt12 flex">二、1. 登录
                        <a href="https://pay.weixin.qq.com/" class="flex" target="_blank">
                            <img src="@/assets/site/form_linkActive.svg" alt="">微信支付平台
                        </a>。
                    </p>
                    <p class="mt10 ml-30 flex">2. 确认微信小程序是否已绑定微信支付。
                        <a href="https://pay.weixin.qq.com/static/pay_setting/appid_protocol.shtml" class="flex" target="_blank">
                            <img src="@/assets/site/form_linkActive.svg" alt="">去确认
                        </a>
                    </p>
                </div>
                <el-form>
                    <GuipFormItem column="column" class="mb24" label="小程序密钥" :required="true">
                        <!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
                        添加必输校验 直接使用 required 属性
                        特殊的使用slot = formLeft 自定义内容；
                        添加独立类名，修改样式 -->
                        <!-- <b slot="formLeft">自定义左侧</b> -->
                        <span class="desc" slot="formRight"><a href="https://mp.weixin.qq.com/" target="_blank">微信小程序平台</a>>开发管理>开发设置>AppSecret(小程序密钥)</span>
                        <!-- 自定义下方内容 -->
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="xcxAppsecret" prop="" placeholder="请输入小程序密钥" />
                    </GuipFormItem>
                </el-form>
            </div>
            <div v-else-if="xcxType == 2">
                <div class="beforeNotice">
                    <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                    <p class="mt12 flex">一、1. 注册支付宝企业账号。2.创建支付宝小程序。3.开通当面付。</p>
                    <p class="mt12 ml-20 flex"><a class="flex" href="/agentnew/download_xcx_register_tutorial/type/2"><img src="@/assets/download.svg" alt="">下载教程</a></p>
                    <p class="mt12 flex">二、1. 登录
                        <a href="https://www.alipay.com/" class="flex" target="_blank">
                            <img src="@/assets/site/form_linkActive.svg" alt="">支付宝支付平台
                        </a>。
                    </p>
                    <p class="mt10 ml-30 flex">2. 确认支付宝已开通当面付。
                        <a href="https://b.alipay.com/page/product-mall/all-product" class="flex" target="_blank">
                            <img src="@/assets/site/form_linkActive.svg" alt="">去确认
                        </a>
                    </p>
                </div>
            </div>
        </GuipDialog>
        
    </div>
</template>

<script>
// import request from "./utils/request";
import { mapState } from 'vuex';
import store from '@/store';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';

export default {
    name: '',
    props: [''],
    components: {
        GuipSwitch,
        GroupFormBtns,
        GuipDialog,
        GuipInput,
        GuipFormItem,
        CustomDropdown,
        GuipButton,
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            siteWxpayInfo: [],
            // 站点信息
            siteInfo: [],
            options: [],
            xcxList: [],
            siteXcxList: [],
            dialogVisibleMpAuth: false,
            showWhatIsH5: false,
            dialogVisibleAddXcx: false,
            bindWxXcxId: 0,
            bindAliXcxId: 0,
            xcxAppsecret: '',
            xcxType: '',
            addXcxTitle: '',
        }
    },
    created() {
        store.commit('SET_CUSTOMIZE', true); 
        store.commit('SET_SLIDER_MENU','siteSettingData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '移动端设置');

        this.getSiteWxpayInfo();
        this.getSiteInfo();
        this.getSiteXcxList();
        this.getXcxList();
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    methods:{
        // 获取站点信息
        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
                    that.siteInfo.is_open_h5 = Number(response.data.is_open_h5)
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getSiteWxpayInfo() {
            const that = this
            that.siteInfo = []
            this.$http('POST', '/agentnew/ajax_get_site_wxpay_info', {
                uid: this.$route.query.uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.siteWxpayInfo = response.data
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getXcxList() {
            this.$http('POST', '/agentnew/ajax_get_xcx_list', {
                // uid: this.$route.query.uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.xcxList = response.data
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getSiteXcxList() {
            this.$http('POST', '/agentnew/ajax_get_site_xcx_list', {
                uid: this.$route.query.uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.siteXcxList = response.data
                    if (this.siteXcxList && this.siteXcxList[0]) {
                        this.bindWxXcxId = this.siteXcxList[0].xcx_id
                    }
                    if (this.siteXcxList && this.siteXcxList[2]) {
                        this.bindAliXcxId = this.siteXcxList[2].xcx_id
                    }
                    console.log(this.bindWxXcxId, 'bindWxXcxId');
                    console.log(this.bindAliXcxId, 'bindAliXcxId');
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        cancelClick() {
            console.log('quxiao');
            this.getSiteInfo();
        },
        updateSiteH5Status() {
            this.$http('POST', '/agentnew/ajax_update_site_h5_config', {
                uid: this.$route.query.uid,
                status: this.siteInfo.is_open_h5==1 ? 0 : 1
            }, {
                headers: {
                    'Auth': this.token
                }
            }).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')
            })
        },
        updateSiteRepeatSubmitConfig() {

        },
        goBindPay() {
            window.open('/agent/siteBaseSetting?uid='+this.$route.query.uid, '_blank');
        },
        // 弹框相关方法---start
        showMpAuth() {
            this.dialogVisibleMpAuth = true;
        },
        // 确认按钮事件
        handleConfirm() {
            this.$http('POST', '/agentnew/ajax_get_mp_auth_url', {
                // uid: this.$route.query.uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        window.open(response.data, '_blank');
                        this.dialogVisibleMpAuth = false;
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 取消按钮事件
        handleCancel() {
            this.dialogVisibleMpAuth = false;
            this.dialogVisibleAddXcx = false;
        },
        // 关闭弹框事件
        handleClose() {
            this.dialogVisibleMpAuth = false;
            this.dialogVisibleAddXcx = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        // 弹框相关方法---end
        // 手动copy内容
        handleClickCopy(content){
            this.$copy(content, {
                successMsg: '内容已复制到剪贴板',
                errorMsg: '复制失败，请按Ctrl+C手动复制',
                vm: this
            });
        },
        showAddXcx(xcxType) {
            this.dialogVisibleAddXcx = true;
            this.dialogVisibleMpAuth = false;
            this.xcxType = xcxType;
            if (xcxType == 0) {
                this.addXcxTitle = '新增微信小程序';
            } else if (xcxType == 2) {
                this.addXcxTitle = '新增支付宝小程序';
            }
        },
        addXcx() {
            this.$http('POST', '/agentnew/ajax_add_xcx_auth', {
                uid: this.$route.query.uid,
                type: this.xcxType,
                appsecret: this.xcxAppsecret,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.dialogVisibleMpAuth = false;
                        this.dialogVisibleAddXcx = false;
                        window.open(response.data.authurl, '_blank');
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateSiteXcxBind() {
            this.$http('POST', '/agentnew/ajax_update_site_xcx', {
                uid: this.$route.query.uid,
                wx_xcx_id: this.bindWxXcxId,
                ali_xcx_id: this.bindAliXcxId,
            }, {
                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')
            })
        },
        changeBind(item) {
            // this.bindWxXcxId = item.xcx_id;
            console.log(this.bindWxXcxId);
            console.log(this.bindAliXcxId);
            console.log(item);
        },
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
    margin-bottom: 0;
}

.pageheader {
    display: flex;
    justify-content: space-between;
    /* 关键属性 */
    align-items: center;
    margin: 12px 0px 24px 0px;
}

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

::v-deep .el-tabs__header {
    margin-bottom: 0;
}

.mr-12 {
    margin-right: 12px;
}

.site-personal-wrap {
    width: 100%;

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

    // .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;
    //     }

    // }

    .left-pay-list {
        width: 100%;
        border-radius: 4px;
        opacity: 1;

        .left-pay-item {
            padding: 24px;
            color: #23242B;
            background: #FAFAFA;
            margin-top: 12px;

            p {
                text-align: left;
                margin-top: 9px;
                /* caption/caption_regular */
                font-size: 12px;
                font-weight: normal;
                line-height: 13px;
                letter-spacing: 0.08em;
                color: #626573;
            }

            .el-form-item {
                margin-bottom: 0;
            }
        }
    }
}

.red {
    color: #FF4D4F;
}
.mr-5 {
    margin-right: 5px;
}
.mr-16 {
    margin-right: 16px;
}
.ml-8 {
    margin-left: 8px;
}
.ml-20 {
    margin-left: 20px;
}
.mx-24 {
    margin-left: 24px;
    margin-right: 24px;
}
.ml-30 {
    margin-left: 30px;
}
.desc {
    font-size: 14px;
}

.desc-title {
    font-size: 14px;
    font-weight: normal;
    line-height: 26px;
    letter-spacing: 0.08em;
    color: #1E2226 !important;
}

.desc-cont {
    font-size: 14px;
    font-weight: normal;
    line-height: 26px;
    letter-spacing: normal;
    color: #8A9099;
    margin-left: 33px;
}

a {
    text-decoration: none;
    color: #006AFF !important;
}
.tip {
    height: 40px;
    display: flex;
    padding: 0px 14px;
    gap: 12px;
    align-self: stretch;
    z-index: 1;
    border-radius: 4px;
    background: #F2F7FF;
    border: 1px solid #BFDAFF;
    align-items: center;
}

.beforeNotice {

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

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_blue_1 */
    background: #F2F7FF;
    /* middle/middle_blue_3 */
    border: 1px solid #BFDAFF;
    div {
        margin-top: 2px;
        padding-left: 23px;
        p{
            color: #8A9099;
        }

    }
    p{
        color: #1E2226;
        i{
            font-style: normal;
        }
        &:last-child{
            display: flex;
            align-items: stretch;
            b{
                font-weight: normal;
                color: #8A9099;
                display: inline-flex;
                img{
                    margin-left: 4px;
                }
            }
        }
    }
    a {
        text-decoration: none;
        color: #006AFF;
        margin-right: 5px;

        img {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
}
.pay-auth-dir {
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    align-self: stretch;
    z-index: 1;
    background: #FFFFFF;
}

.status-item {
    height: 19px;
    /* 自动布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 1;
    border-radius: 2px;
    box-sizing: border-box;
}

.divgreen {
    border: 1px solid rgba(0, 194, 97, 0.6);
    background: rgba(239, 255, 224, 0.5);
}
.divred {
    background: #FFF1F0;
    border: 1px solid #FFA39E;
}
.divorange {
    background: #FFFBF2;
    border: 1px solid rgba(251, 131, 45, 0.38);
}
.divgray {
    background: #F6F7FA;
    border: 1px solid #DFE2E6;
}
.fontgreen {
    color: #0DAF49;
}
.fontorange {
    color: #FB832D;
}
.fontred {
    color: #FF4D4F;
}
.fontgray { 
    color: #626573;
}


.status-item span {
    font-size: 12px;
    font-weight: normal;
    line-height: 13px;
    text-align: center;
    letter-spacing: 0.08em;
    padding: 3px 7px;
}
.appid {
    font-size: 12px;
    font-weight: normal;
    line-height: 13px;
    letter-spacing: 0.08em;
    /* text/text_4 */
    color: #8A9099;
    margin-top: 5px;
}
</style>
