<template>
    <div class="pay">
        <div class="pay-bg">
            <div class="title">
                <span style="margin-right: 10px">微信支付</span>
                <div class="item">
                    <div class="item-title">微信商户平台</div>
                    <p class="text">
                        <b>商户号：</b>
                        <span v-show="!editPlatform">{{ platform.mchId }}</span>
                        <el-input size="small" v-model="platform.mchId" v-show="editPlatform"></el-input>
                    </p>
                    <p class="text">
                        <b>API密钥：</b>
                        <span v-show="!editPlatform">{{ platform.appKey }}</span>
                        <el-input size="small" v-model="platform.appKey" v-show="editPlatform"></el-input>
                    </p>
                    <el-button size="mini" @click="savePlatform">{{ editPlatform ? '保存' : '修改' }}</el-button>
                    <el-button size="mini" @click="editPlatform=false" v-show="editPlatform">取消</el-button>
                    <div class="item-title" style="margin-top: 30px">微信证书</div>
                    <p class="text t2">
                        <b>私钥文件：</b>
                        <span v-show="!editCert">{{ cert.apiclientKeyPem }}</span>
                        <input type="file" style="width: 200px" @change="addFile" v-show="editCert" ref="file1">
                        <span style="font-size: .7rem" v-show="editCert">文件名必须是apiclient_key.pem</span>
                    </p>
                    <p class="text t2">
                        <b>根证书文件：</b>
                        <span v-show="!editCert">{{ cert.apiclientCertP12}}</span>
                        <input type="file" style="width: 200px" @change="addFile" v-show="editCert" ref="file2">
                        <span style="font-size: .7rem" v-show="editCert">文件名必须是apiclient_cert.p12</span>
                    </p>
                    <p class="text t2">
                        <b>证书过期时间：</b>
                        <span v-show="!editCert" v-dateformat="cert.expirationDate"></span>
                        <el-date-picker
                                v-show="editCert"
                                size="small"
                                v-model="cert.expirationDate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                    </p>
                    <el-button size="mini" @click="saveCert">{{ editCert ? '保存' : '修改' }}</el-button>
                    <el-button size="mini" @click="editCert=false" v-show="editCert">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import api from '@/api/parameter'
    import { formatDateTime } from "@/utils"
    export default {
        name: "pay",
        data() {
            return {
                platform: {},
                cert: {},
                editPlatform: false,
                fileForm: new FormData(),
                editCert: false,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 24*60*60*1000;
                    }
                }
            }
        },
        created() {
            this.getPay()
        },
        methods: {
            getPay() {
                api.getWxConfig().then(res => {
                    console.log('pay:', res)
                    let data = res.results.payConfigs.filter((item) => item.payType == 'WeiXinPay')[0]
                    this.platform = {
                        payConfigId: data.payConfigId,
                        mchId: data.mchId,
                        appKey: data.appKey
                    }
                    this.cert = {
                        payConfigId: data.payConfigId,
                        apiclientKeyPem: data.apiclientKeyPem,
                        apiclientCertP12: data.apiclientCertP12,
                        expirationDate: data.expirationDate
                    }
                })
            },
            savePlatform() {
                if(this.editPlatform) {
                    api.updateWxConfig(this.platform).then(res => {
                        this.$message({ type: 'success', message: '修改成功' })
                    })
                }
                this.editPlatform = !this.editPlatform
            },
            addFile(ev) {
                this.fileForm.append('files', ev.target.files[0])
            },
            clearFile() {
                for (var key of this.fileForm.keys()) {
                    this.fileForm.delete(key)
                }
                for (let i=0;i<2;i++) {
                    this.$refs['file'+i].value = ''
                }
            },
            saveCert() {
                if(this.editCert) {
                    this.fileForm.append('payConfigId', this.cert.payConfigId)
                    this.fileForm.append('expirationDate', formatDateTime(this.cert.expirationDate))
                    api.uploadScrert(this.fileForm).then(res => {
                        this.$message({ type: 'success', message: '修改成功' })
                        this.clearFile()
                    }).catch(err => {
                        console.log(err)
                        this.clearFile()
                    })
                }
                this.editCert = !this.editCert
            }
        }
    }
</script>

<style scoped lang="scss">
    .pay {
        &-bg {
            width: 100%;
            background-color: #fff;
            padding: 20px 25px;
            .item {
                background-color: #eeeeee;
                padding: 20px 50px;
                margin-top: 20px;
                &-title {
                    margin-left: -20px;
                }
                .text {
                    line-height: 1;
                    font-size: .95rem;
                    .el-input {
                        width: 300px;
                    }
                    b {
                        font-weight: normal;
                        display: inline-block;
                        width: 80px;
                        text-align: right;
                    }
                    span {
                        color: #f4516c;
                    }
                }
                .t2 {
                    b {
                        width: 110px;
                    }
                }
            }
        }
    }
</style>
