<template>
    <ap-container>
        <ap-main margin="1111">
            <div class="title"><i class="el-icon-s-flag"/>&nbsp;&nbsp;阿里短信服务</div>
            <el-form
                ref="configFormRef"
                label-position="left"
                label-width="150px"
                :model="aliSmsConfigForm"
                :inline-message="true">
                <el-form-item label="用户Key" prop="ALI_SMS_ACCESS_KEY_ID">
                    <el-input v-model="aliSmsConfigForm.ALI_SMS_ACCESS_KEY_ID" placeholder="用户 access key id"
                              class="item-width"/>
                    <span class="item-msg"></span>
                </el-form-item>
                <el-form-item label="用户Secret" prop="ALI_SMS_ACCESS_SECRET">
                    <el-input v-model="aliSmsConfigForm.ALI_SMS_ACCESS_SECRET" placeholder="用户 access secret"
                              class="item-width"/>
                    <span class="item-msg"></span>
                </el-form-item>
                <el-form-item label="短信签名" prop="ALI_SMS_SIGN_NAME">
                    <el-input v-model="aliSmsConfigForm.ALI_SMS_SIGN_NAME" placeholder="短信签名" class="item-width"/>
                    <span class="item-msg"></span>
                </el-form-item>
                <el-form-item label="模版-用户注册" prop="ALI_SMS_TEMPLATE_CODE_REGISTER">
                    <el-input v-model="aliSmsConfigForm.ALI_SMS_TEMPLATE_CODE_REGISTER" placeholder="用户注册模版Id"
                              class="item-width"/>
                    <span class="item-msg"></span>
                </el-form-item>
                <el-form-item label="模版-用户身份认证" prop="ALI_SMS_TEMPLATE_CODE_ID_AUTH">
                    <el-input v-model="aliSmsConfigForm.ALI_SMS_TEMPLATE_CODE_ID_AUTH" placeholder="用户身份认证模版Id"
                              class="item-width"/>
                    <span class="item-msg"></span>
                </el-form-item>
                <el-form-item label="模版-用户修改信息" prop="ALI_SMS_TEMPLATE_CODE_CHANGE_INFO">
                    <el-input v-model="aliSmsConfigForm.ALI_SMS_TEMPLATE_CODE_CHANGE_INFO" placeholder="用户修改信息模版Id"
                              class="item-width"/>
                    <span class="item-msg"></span>
                </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <el-button type="primary" @click="saveForm">保 存</el-button>
        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'SysConfigSms',
    created() {
        this.initForm();
    },
    data() {
        return {
            aliSmsConfigForm: {
                ALI_SMS_ACCESS_KEY_ID: '',
                ALI_SMS_ACCESS_SECRET: '',
                ALI_SMS_SIGN_NAME: '',
                ALI_SMS_TEMPLATE_CODE_ID_AUTH: '',
                ALI_SMS_TEMPLATE_CODE_REGISTER: '',
                ALI_SMS_TEMPLATE_CODE_CHANGE_INFO: '',
            },
        }
    },
    methods: {
        initForm() {
            this.$request({
                url: '/apm/sys/config/getAliSmsConfig',
                method: 'post'
            }).then(response => {
                this.aliSmsConfigForm = response.data;
                console.log(response.data);
            })
        },
        saveForm() {
            this.$request({
                url: '/apm/sys/config/saveAliSmsConfig',
                method: 'post',
                data: {json: JSON.stringify(this.aliSmsConfigForm)}
            }).then(response => {
                this.$message.success("保存成功！");
            })
        },
    }
}
</script>

<style scoped>
.title {
    padding: 10px 0;
    font-weight: bold;
    font-size: 20px;
}

.item-width {
    width: 300px;
}

.item-msg {
    color: #9e9e9e;
    margin-left: 10px;
}
</style>
