<template>
    <el-main>
        <div class="card-news mt0">
            <div class="news-title">抖音来客授权<div class="btn"><el-button type="success" icon="el-icon-edit" @click="edit('life')">编辑</el-button></div></div>
            <div class="total-panels" v-if="editType=='life'">
                <el-skeleton v-if="loadingData"></el-skeleton>
                <div v-else>
                    <el-row :gutter="15">
                        <el-col :span="12">
                            <fieldset>
                                <legend><el-tag>授权信息</el-tag></legend>
                                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                                    <el-form-item label="应用ID（AppId）" prop="appid">
                                        <el-input v-model="formData.appid" clearable placeholder="请输入AppId"></el-input>
                                        <div class="el-form-item-msg">通过抖音开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="应用密钥（AppSecret）" prop="secret">
                                        <el-input v-model="formData.secret" clearable placeholder="请输入AppSecret"></el-input>
                                        <div class="el-form-item-msg">通过抖音开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="来客账户ID" prop="account">
                                        <el-input v-model="formData.account" clearable placeholder="请输入来客账户ID"></el-input>
                                        <div class="el-form-item-msg">通过抖音开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" :loading="isSaveing" @click="onSubmit">确定</el-button>
                                        <el-button @click="editType = false">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </fieldset>
                        </el-col>
                        <el-col :span="8">
                            <fieldset>
                                <legend><el-tag>授权地址</el-tag></legend>
                                <el-descriptions title="" direction="vertical" :column="1" border style="margin-bottom:10px;">
                                    <el-descriptions-item label="WebHooks地址">
                                        <div class="flex">
                                            {{formData.webhook}}
                                            <div class="copy"><el-button icon="el-icon-copy-document" v-copy="formData.webhook"></el-button></div>
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="SPI回调地址">
                                        <div class="flex">
                                            {{formData.spi}}
                                            <div class="copy"><el-button icon="el-icon-copy-document" v-copy="formData.spi"></el-button></div>
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </fieldset>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="card-news mt10">
            <div class="news-title">抖音小程序<div class="btn"><el-button type="success" icon="el-icon-edit" @click="edit('mini')">编辑</el-button></div></div>
            <div class="total-panels" v-if="editType=='mini'">
                <el-skeleton v-if="loadingData"></el-skeleton>
                <div v-else>
                    <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                        <el-row :gutter="15">
                            <el-col :span="12">
                            <fieldset>
                                <legend><el-tag>授权信息</el-tag></legend>
                                    <el-form-item label="应用ID（AppId）" prop="appid">
                                        <el-input v-model="formData.appid" clearable placeholder="请输入AppId"></el-input>
                                        <div class="el-form-item-msg">通过抖音小程序后台获取</div>
                                    </el-form-item>
                                    <el-form-item label="应用密钥（AppSecret）" prop="secret">
                                        <el-input v-model="formData.secret" clearable placeholder="请输入AppSecret"></el-input>
                                        <div class="el-form-item-msg">通过抖音小程序后台获取</div>
                                    </el-form-item>
                                    <el-form-item label="商户号" prop="mch_id">
                                        <el-input v-model="formData.mch_id" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过抖音小程序后台获取</div>
                                    </el-form-item>
                                    <el-form-item label="支付SALT" prop="salt">
                                        <el-input v-model="formData.salt" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过抖音小程序后台获取</div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" :loading="isSaveing" @click="onSubmit">确定</el-button>
                                        <el-button @click="editType = false">取消</el-button>
                                    </el-form-item>
                            </fieldset>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="营业执照" prop="license">
                                    <sc-upload accept="image/gif,image/jpeg,image/jpg,image/png" v-model="formData.license" title="大小不超过10M"></sc-upload>
                                    <div class="el-form-item-msg">必须上传，否则小程序审核将不通过，建议添加水印后再上传</div>
                                </el-form-item>
                                <fieldset>
                                    <legend><el-tag>密钥</el-tag></legend>
                                        <el-form-item label="应用公钥" prop="public_key">
                                            <el-input v-model="formData.public_key" type="textarea" rows="5" clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg">通过抖音小程序后台获取</div>
                                        </el-form-item>
                                        <el-form-item label="应用私钥" prop="private_key">
                                            <el-input v-model="formData.private_key" type="textarea" rows="5" clearable placeholder="请输入"></el-input>
                                            <div class="el-form-item-msg">通过抖音小程序后台获取</div>
                                        </el-form-item>
                                </fieldset>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="card-news mt10">
            <div class="news-title">美团授权<div class="btn"><el-button type="success" icon="el-icon-edit" @click="edit('meituan')">编辑</el-button></div></div>
            <div class="total-panels" v-if="editType=='meituan'">
                <el-skeleton v-if="loadingData"></el-skeleton>
                <div v-else>
                    <el-row :gutter="15">
                        <el-col :span="12">
                            <fieldset>
                                <legend><el-tag>授权信息</el-tag></legend>
                                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                                    <el-form-item label="应用ID（DeveloperId）" prop="appid">
                                        <el-input v-model="formData.appid" clearable placeholder="请输入DeveloperId"></el-input>
                                        <div class="el-form-item-msg">通过美团开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="应用密钥（SignKey）" prop="secret">
                                        <el-input v-model="formData.secret" clearable placeholder="请输入SignKey"></el-input>
                                        <div class="el-form-item-msg">通过美团开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" :loading="isSaveing" @click="onSubmit">确定</el-button>
                                        <el-button @click="editType = false">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </fieldset>
                        </el-col>
                        <el-col :span="8">
                            <fieldset>
                                <legend><el-tag>授权地址</el-tag></legend>
                                <el-descriptions title="" direction="vertical" :column="1" border style="margin-bottom:10px;">
                                    <el-descriptions-item label="回调地址">
                                        <div class="flex">
                                            {{formData.webhook}}
                                            <div class="copy"><el-button icon="el-icon-copy-document" v-copy="formData.webhook"></el-button></div>
                                        </div>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </fieldset>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="card-news mt10">
            <div class="news-title">短信通道<div class="btn"><el-button type="success" icon="el-icon-edit" @click="edit('sms')">编辑</el-button></div></div>
            <div class="total-panels" v-if="editType=='sms'">
                <el-skeleton v-if="loadingData"></el-skeleton>
                <div v-else>
                    <el-row :gutter="15">
                        <el-col :span="12">
                            <fieldset>
                                <legend><el-tag>授权信息</el-tag></legend>
                                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                                    <el-form-item label="短信平台" prop="sms_type" class="label-item">
                                        <el-select v-model="formData.sms_type" style="width: 100%;" placeholder="请选择渠道" size="large">
                                            <el-option
                                                v-for="(item, index) in smsRegion"
                                                :key="index"
                                                :label="item.name"
                                                :value="item.type"
                                            />
                                        </el-select>
                                        <div class="el-form-item-msg"></div>
                                    </el-form-item>
                                    <div v-if="formData.sms_type == 'aliyun'">
                                        <el-form-item label="AccessKeyId" prop="AccessKeyId" class="label-item">
                                            <el-input v-model="formData.AccessKeyId" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="AccessKeySecret" prop="AccessKeySecret" class="label-item">
                                            <el-input v-model="formData.AccessKeySecret" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="短信签名 Sign" prop="sign" class="label-item">
                                            <el-input v-model="formData.sign" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                    </div>
                                    <div v-if="formData.sms_type == 'qcloud'">
                                        <el-form-item label="SdkAppID" prop="SdkAppID" class="label-item">
                                            <el-input v-model="formData.SdkAppID" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="AccessKeyId" prop="AccessKeyId" class="label-item">
                                            <el-input v-model="formData.AccessKeyId" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="AccessKeySecret" prop="AccessKeySecret" class="label-item">
                                            <el-input v-model="formData.AccessKeySecret" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="短信签名 Sign" prop="sign" class="label-item">
                                            <el-input v-model="formData.sign" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                    </div>
                                    <div v-if="formData.sms_type == 'qiniu'">
                                        <el-form-item label="AccessKeyId" prop="AccessKeyId" class="label-item">
                                            <el-input v-model="formData.AccessKeyId" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                        <el-form-item label="SecretKey" prop="AccessKeySecret" class="label-item">
                                            <el-input v-model="formData.AccessKeySecret" placeholder="请输入" clearable />
                                            <div class="el-form-item-msg"></div>
                                        </el-form-item>
                                    </div>
                                    <el-form-item>
                                        <el-button type="primary" :loading="isSaveing" @click="onSubmit">确定</el-button>
                                        <el-button @click="editType = false">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </fieldset>
                        </el-col>
                        <el-col :span="8">
                            <fieldset>
                                <legend><el-tag>短信模板</el-tag></legend>
                                
                            </fieldset>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="card-news mt10">
            <div class="news-title">顺丰月结账号<div class="btn"><el-button type="success" icon="el-icon-edit" @click="edit('sf')">编辑</el-button></div></div>
            <div class="total-panels" v-if="editType=='sf'">
                <el-skeleton v-if="loadingData"></el-skeleton>
                <div v-else>
                    <el-row :gutter="15">
                        <el-col :span="12">
                            <fieldset>
                                <legend><el-tag>授权信息</el-tag></legend>
                                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                                    <el-form-item label="顾客编码" prop="appid">
                                        <el-input v-model="formData.appid" clearable placeholder="请输入顾客编码"></el-input>
                                        <div class="el-form-item-msg">通过顺丰开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="校验码" prop="secret">
                                        <el-input v-model="formData.secret" clearable placeholder="请输入校验码"></el-input>
                                        <div class="el-form-item-msg">通过顺丰开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="月结账号" prop="account">
                                        <el-input v-model="formData.account" clearable placeholder="请输入月结账号"></el-input>
                                        <div class="el-form-item-msg">通过顺丰开放平台获取</div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" :loading="isSaveing" @click="onSubmit">确定</el-button>
                                        <el-button @click="editType = false">取消</el-button>
                                    </el-form-item>
                                </el-form>
                            </fieldset>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="card-news mt10" v-if="isMini">
            <div class="news-title">微信小程序<div class="btn"><el-button type="success" icon="el-icon-edit" @click="edit('wx')">编辑</el-button></div></div>
            <div class="total-panels" v-if="editType=='wx'">
                <el-skeleton v-if="loadingData"></el-skeleton>
                <div v-else>
                    <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                        <el-row :gutter="15">
                            <el-col :span="12">
                                <fieldset>
                                    <legend><el-tag>授权信息</el-tag></legend>
                                    <el-form-item label="小程序ID" prop="appid">
                                        <el-input v-model="formData.appid" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过微信小程序平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="小程序密钥" prop="secret">
                                        <el-input v-model="formData.secret" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过微信小程序平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="分享图片" prop="account">
                                        <el-input v-model="formData.account" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过微信小程序平台获取</div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" :loading="isSaveing" @click="onSubmit">确定</el-button>
                                        <el-button @click="editType = false">取消</el-button>
                                    </el-form-item>
                                </fieldset>
                            </el-col>
                            <el-col :span="8">
                                <fieldset>
                                    <legend><el-tag>支付权限</el-tag></legend>
                                    <el-form-item label="微信商户账号" prop="mch_id">
                                        <el-input v-model="formData.mch_id" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过微信支付平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="微信商户密钥" prop="mch_key">
                                        <el-input v-model="formData.mch_key" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过微信支付平台获取</div>
                                    </el-form-item>
                                    <el-form-item label="微信商户证书" prop="mch_cret">
                                        <el-input v-model="formData.mch_cret" clearable placeholder="请输入"></el-input>
                                        <div class="el-form-item-msg">通过微信支付平台获取</div>
                                    </el-form-item>
                                </fieldset>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </el-main>
</template>

<script>
export default {
    data() {
        return {
            editType:"life",
            formData:{},
            smsRegion:[
                {
                    "name":"阿里云","type":"aliyun"
                },
                {
                    "name":"腾讯云","type":"qcloud"
                },
                {
                    "name":"七牛云","type":"qiniu"
                }
            ],
            rules:{},
            isSaveing:false,
            loadingData:false,
            isMini:false
        }
    },
    mounted(){
        this.edit(this.editType);
    },
    methods:{
        async edit(type){
            this.editType = type;
            this.loadingData = true;
            this.formData = {};
            var rules = {};
            switch(type){
                case "mini":
                    rules = {
                        appid: [
                            { required: true, message: '请输入' }
                        ],
                        secret: [
                            { required: true, message: '请输入' }
                        ],
                        license: [
                            { required: true, message: '请上传' }
                        ],
                        mch_id: [
                            { required: true, message: '请输入' }
                        ],
                        salt: [
                            { required: true, message: '请输入' }
                        ],
                        public_key: [
                            { required: true, message: '请输入' }
                        ],
                        private_key: [
                            { required: true, message: '请输入' }
                        ],
                    }
                    break;
                case "meituan":
                    rules = {
                        appid: [
                            { required: true, message: '请输入' }
                        ],
                        secret: [
                            { required: true, message: '请输入' }
                        ]
                    }
                    break;
                case "sms":
                    rules = {
                        SdkAppID: [
                            { required: true, message: '请输入' }
                        ],
                        AccessKeyId: [
                            { required: true, message: '请输入' }
                        ],
                        AccessKeySecret: [
                            { required: true, message: '请输入' }
                        ],
                        sign: [
                            { required: true, message: '请输入' }
                        ]
                    }
                    break;
                case "wx":
                    rules = {
                        appid: [
                            { required: true, message: '请输入' }
                        ],
                        secret: [
                            { required: true, message: '请输入' }
                        ],
                        account: [
                            { required: true, message: '请输入' }
                        ],
                        mch_id: [
                            { required: true, message: '请输入' }
                        ],
                        mch_key: [
                            { required: true, message: '请输入' }
                        ],
                    }
                    break;
                default:
                    rules = {
                        appid: [
                            { required: true, message: '请输入' }
                        ],
                        secret: [
                            { required: true, message: '请输入' }
                        ],
                        account: [
                            { required: true, message: '请输入' }
                        ],
                    }
                    break;
            }
            this.rules = rules;
            var resp = await this.$API.merConfig.get.get({"type":type});
            this.loadingData = false;
            if (resp.code == 0) {
                return this.$message.info(resp.msg)
            }
            this.isMini = resp.data.auth;
            if (resp.code == 1) {
                this.formData = resp.data;
            }
        },
        async onSubmit() {
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            this.isSaveing = true;
            var result = await this.$API.merConfig.save.post({type:this.editType,data: this.formData });
            this.isSaveing = false;
            if(result.code == 0)
            {
                this.$message.error(result.msg);
                return false;
            }
            this.$message.success(result.msg);
        },
    }
}
</script>
<style>
.mt10{margin-top: 10px;}
.total-panels{
    margin-top: 20px;
    /* width: 600px; */
}
.card-news{
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}
.news-title{
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.news-title .btn{margin-left: auto;margin-right: 0;}
.news-title::before{
    content: "";
    width: 4px;
    height: 16px;
    display: block;
    background-color: var(--el-color-primary);;
    margin-right: 8px;
}
.copy{margin-left: auto;margin-right: 0;}
</style>