<template>
    <el-dialog :visible.sync="dialogVisible" :show-close="false" @close="reset">
        <el-tabs v-model="activeName">
            <el-tab-pane label="聚合支付" name="pay">
                <el-form ref="form" :model="form" label-width="120px" label-position="left">
                    <el-form-item label="商户号">
                        <el-input v-model="form.appId" placeholder="请输入商户号"></el-input>
                    </el-form-item>
                    <el-form-item label="商户密钥">
                        <el-input type="textarea" v-model="form.appToken" placeholder="请输入商户密钥"></el-input>
                    </el-form-item>
                    <el-form-item label="支付密码">
                        <el-input v-model="form.payPassword" placeholder="请输入支付密码"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="-1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitHandle" :loading="formLoading">
                <span v-if="!formLoading">保存</span>
                <span v-else>保存中...</span>
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { tbMerchantThirdApply, tbMerchantThirdApplyPut } from '@/api/shop'
export default ({
    data() {
        return {
            dialogVisible: false,
            activeName: 'pay',
            formLoading: false,
            form: {
                appToken: '',
                id: '',
                payPassword: '',
                status: 1,
                appId: ''
            }
        }
    },
    methods: {
        // 保存
        async submitHandle() {
            this.formLoading = true
            try {
                await tbMerchantThirdApplyPut(this.form)
                this.$emit('success')
                this.formLoading = false
                this.$notify({
                    title: '成功',
                    message: `提交成功`,
                    type: 'success'
                });
                this.close()
            } catch (error) {
                this.formLoading = false
                console.log(error)
            }
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form.appToken = ''
            this.form.id = ''
            this.form.payPassword = ''
            this.form.status = 1
            this.form.appId = ''
        },
        // 详情（配置三方支付）
        async getDetail(id) {
            try {
                const res = await tbMerchantThirdApply(id)
                this.form.appToken = res.appToken
                this.form.payPassword = res.payPassword
                this.form.status = res.status
                this.form.appId = res.appId
            } catch (error) {
                console.log(error)
            }
        },
        show(obj) {
            this.dialogVisible = true
            if (obj && obj.id) {
                this.form.id = obj.merchantId
                this.getDetail(obj.merchantId)
            }
        }
    }
})
</script>

<style scoped lang="scss">
::v-deep(.el-dialog__header) {
    padding: 0;
}
</style>