<template>
    <el-form ref="GuaranteeMoney" :model="form" :rules="rules" label-width="100px" style="max-width:400px">
        <el-alert v-if="formatMoney" title="企业店铺缴纳服务质保金，有助于提高自身的竞争力。" type="warning" show-icon :closable='false'>
        </el-alert>
        <el-form-item v-if="formatMoney" prop="money" label="需缴纳金额" style="margin-top:30px;">
            <el-input v-model="form.money" style="width:146px"></el-input>
            <span style='font-size:12px;color:rgba(253,149,1,1);'>注：{{formatMoney}}元起。</span>
        </el-form-item>
        <el-alert v-else title="店铺新开免质保金" type="success" style="margin-bottom:20px;" :closable='false'>
        </el-alert>
        <el-form-item label-width="0" prop='isRead' style="border-bottom:1px solid #ebebeb;">

            <el-button type="text" style="margin-right:30px" @click="dialogVisible=true">* 开店协议</el-button>
            <el-switch v-model="form.isRead"></el-switch>
            <span v-if='form.isRead'>已阅读</span>
        </el-form-item>
        <div class="ps">
            您已签署《开店协议》包含的诚信承诺经营书以及消费者保障协议，若发生服务与描述不符合，货物质量有问题，纠纷等情况，图途象有权动用质保金对买家进行补偿等处理。
        </div>
        <el-form-item label-width="0px" style="margin-top:58px;">
            <el-button :loading="$store.state.fetchingData" v-if="formatMoney" type="primary" @click="onSave" style="width:400px">缴纳</el-button>

        </el-form-item>
        <el-form-item label-width="0px" style="margin-top:20px;" v-if="formatMoney==0">
            <el-button @click="pass" style="width:400px;">提交申请</el-button>

        </el-form-item>

        <el-dialog title="开店协议" class="xieyi" :visible.sync="dialogVisible" width="636px">
            <div class="window" v-html="agreement">

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false,form.isRead=false">不同意</el-button>
                <el-button type="primary" @click="dialogVisible = false,form.isRead=true">同 意</el-button>
            </span>
        </el-dialog>
    </el-form>

</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'guaranteeMoney',
    data() {
        return {
            form: {
                money: '',
                isRead: false
            },
            rules: {
                money: [
                    { required: true, message: '请输入缴纳金额', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error('请填写缴纳金额'));
                            } else if (parseInt(value) >= this.formatMoney) {
                                callback();
                            }
                            else {
                                callback(new Error('缴纳金额' + this.formatMoney + '元起'));
                            }
                        }, trigger: 'blur'
                    }
                ],
                isRead: [
                    { required: true, message: '请阅读并同意开店协议', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error('请阅读并同意开店协议'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur'
                    }
                ]
            },
            dialogVisible: false,
            systemConfig: {},
            formatMoney: 0,
            agreement: ''
        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        this.$http.get({
            url: '/systemConfig/getOne?id=1',
        }).then(res => {
            if (res.success) {
                if (res.data) {
                    this.systemConfig = res.data
                    this.formatMoney = this.userInfo.companyFlag == 'Y' ? res.data.companyDeposit : res.data.personalDeposit
                }

            }
        })
        this.$http.get({
            url: '/shopAgreement/getOne?id=1',
        }).then(res => {
            if (res.success) {
                if (res.data) {
                    this.agreement = res.data.agreement
                }

            }
        })
    },
    methods: {
        onSave() {
            this.$refs.GuaranteeMoney.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            this.$emit('nextStep')
        },
        pass() {
            this.$refs.GuaranteeMoney.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        }

    }
}
</script>

<style lang="less" scoped>
.ps {
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 17px;
}

.window {
    max-height: 50vh;
    overflow: auto;
    border-top: 1px solid #ebebeb;
    padding-top: 20px;
}

.title {
    font-size: 14px;
    color: #333;
    line-height: 19px;
    margin-top: 10px;
}

.content {
    color: #666;
    font-size: 12px;
    line-height: 19px;
    margin-top: 10px;
}
</style>
