<template>
    <div class="site-setting-wrap pagePadding">

        <div class="siteMessage flex-common" id="siteMessage1">
            <p class="littleTitle mb32">微信收款</p>
            <div class="weixinpay">
                <div class="beforeNotice">
                    <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                    <div class="flex-between">
                        <p class="mt12 flex">1.申请公司微信支付。<a class="guide" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3"
                                target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> </p>

                        <span class=" flex">
                           <a href="https://pay.weixin.qq.com/" class="flex" target="_blank">
                                <img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>
                        </span>
                    </div>
                    <p class="mt12">2.登录微信商户平台，在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p>
                </div>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="mb24" label="公司简称" :required="true">
                                <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name"
                                    prop="company_short_name" placeholder="请输入">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="微信支付商户号" :required="true">
                                <span class="desc" slot="formRight">
                                    <a href='https://pay.weixin.qq.com/' class="guide"
                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a>
                                    </span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="mch_id" prop="mch_id"
                                    placeholder="请输入">
                                </GuipInput>
                            </GuipFormItem>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <GuipFormItem column="column" class="mb24" label="微信支付秘钥" :required="true">
                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' class="guide"
                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a>
                                </span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="apiv2" prop="apiv2"
                                    placeholder="不能设为纯数字">
                                </GuipInput>
                            </GuipFormItem>
                            <GuipFormItem column="column" class="mb24" label="公众号APPID" :required="true">
                                <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' class="guide"
                                        target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span>
                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="appid" prop="appid"
                                    placeholder="不能设为纯数字">
                                </GuipInput>
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage2">
            <h3 class="mb12">管理证书</h3>
            <div class="beforeNotice">
                <span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;">
                    API证书获取：
                    <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;"
                            src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>＞账户中心＞账户设置＞API安全
                </span>
            </div>
            <el-form>
                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="uploadwrap">
                            <label class="flex upload-title gap8">上传 apiclient_cert.pem 证书<img class="ml-4"
                                    src="@/assets/require.svg" /></label>
                            <el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
                                :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
                                <GuipButton class="upload-button" slot="trigger" type="ignore"
                                    :btnstyle="{ width: '118px' }">
                                    <i class="bgImg"></i>选择文件
                                </GuipButton>
                            </el-upload>
                            <p class="uploaded" v-if="payinfo.cert_uploaded">已上传</p>
                            <p class="normalUpload notuploaded" v-else>未上传任何文件</p>
                        </div>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <div class="uploadwrap">
                            <label class="flex upload-title gap8">上传 apiclient_key.pem 证书<img class="ml-4"
                                    src="@/assets/require.svg" /></label>
                            <el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
                                :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
                                <GuipButton class="upload-button" slot="trigger" type="ignore"
                                    :btnstyle="{ width: '118px' }">
                                    <i class="bgImg"></i>选择文件
                                </GuipButton>

                            </el-upload>
                            <p class="uploaded" v-if="payinfo.key_uploaded">已上传</p>
                            <p class="normalUpload" v-else>未上传任何文件</p>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="save-button">
            <GuipButton type="primary" ref="saveRef" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
        </div>
    </div>

</template>

<script>
import GuipInput from '@/components/GuipInput.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
export default {
    // 站点设置
    name: 'addPay',
    props: {},
    components: {
        GuipInput,
        GuipButton,
        GuipFormItem,
    },
    data() {
        return {
            // 公司简称
            company_short_name: '',
            // 商户号
            mch_id: '',
            // 微信支付秘钥
            apiv2: '',
            // 公众号APPID
            appid: '',
            payinfo: [],
            saveBtnStyleObj: {
                width: '144px',
                height: '46px',
                borderRadius: '4px',
                background: '#006AFF',
            },
        }
    },
    created() {
        // 初始化反显
        // this.getPayment()
    },
    methods: {
        getPayment() {
            this.$http('POST', '/agentnew/ajax_get_payinfo', {
                payid: this.$route.query.payid,
            }).then(response => {
                this.$nextTick(() => {
                    this.payinfo = response.data
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleAvatarChange(file, fileList) {
            console.log(file, fileList)
            let fileObj = file.raw
            this.formData.set('apiclient_cert', fileObj)
        },
        handleAvatarChange1(file, fileList) {
            console.log(file, fileList)
            let fileObj = file.raw
            this.formData.set('apiclient_key', fileObj)
        },
        saveConfirm() {
            // 
            // this.$positionMessage({
            //     type: 'error',
            //     message: '请先上传证书',
            //     target: this.$refs['saveRef'], // 可以是DOM元素或选择器
            //     position: 'top'
            // })
            //   let obj = {}
            //   obj.uid = this.serviceInfo.uid
            //   obj.type = this.serviceInfo.type
            //   obj.info = ""
            //   const that = this
            //   this.$http('POST', '/agentnew/ajax_payment_switch', obj).then(response => {
            //       if(response.status){
            //           that.$message.success('保存成功');
            //           that.payList = response.data.paylist
            //           that.$emit('saveEvent', that.payList)
            //           return true;
            //       }
            //       that.$message.error(response.info);
            //   }).catch(error => {
            //       console.error(error, 'error')
            //   })
        },
    }

}
</script>

<style scoped lang="scss">
.guide{
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8A9099 !important;
    font-size: 12px;
}
.site-setting-wrap{
    height: calc(100% - 80px);
    overflow-y: auto;
}
.notuploaded,.uploaded,.normalUpload{
    margin-top: 8px;
    font-size: 12px;
    color: #606266;
}
.normalUpload{
    color:#606266;
}
.notuploaded{
    color: #FD3B3B;
}
.save-button {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    z-index: 9;
}

.uploadwrap {
    text-align: left;
}

.upload-title {
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #23242B;
}

.upload-button {
    border-radius: 4px;
    background: #F2F3F5;
    box-sizing: border-box;
    border: 1px solid #BABDC2;

    .bgImg {
        width: 20px;
        height: 16px;
        margin-right: 6px;
        background-image: url(@/assets/site/uploadIcon.svg);
    }

    &:hover {
        .bgImg {
            background-image: url(@/assets/site/uploadIcon_light.svg);
        }
    }
}

.upload-demo {
    margin-top: 12px;
}

.beforeNotice {

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

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

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

        p {
            // color: #8A9099;
        }

    }

    p {
        color: #1E2226;

        i {
            font-style: normal;
        }

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

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

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

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

        img {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
}

a {
    color: #006AFF;
    text-decoration: none;
}
</style>