<template>
  <div class="mail">
    <h1>邮件配置</h1>
    <div>
      <el-form ref="mailConfig"
               class="admin-sendMessage"
               label-width="120px" :model="mailForm">
        <el-form-item label="发件人地址:">
          <el-input v-model="mailForm.sender"></el-input>
        </el-form-item>
        <el-form-item label="发件人昵称:">
          <el-input v-model="mailForm.personal"></el-input>
        </el-form-item>
        <el-form-item label="用户名:">
          <el-input v-model="mailForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="mailForm.password"></el-input>
        </el-form-item>
        <el-form-item label="加密(默认SSL):">
          <el-input v-model="mailForm.encryption"></el-input>
        </el-form-item>
        <el-form-item label="服务器地址:">
          <el-input v-model="mailForm.emailSmtpHost"></el-input>
        </el-form-item>
        <el-form-item label="服务器端口:">
          <el-input v-model="mailForm.emailSmtpPort"></el-input>
        </el-form-item>
        <el-form-item label="测试邮箱:">
          <el-input v-model="mailForm.testMail"></el-input>
        </el-form-item>
        <el-form-item
          label-position="left">
          <div class="test">
            <el-button @click="sendTestMail()">测试</el-button>
          </div>
        </el-form-item>
        <el-form-item
          size="medium"
          label="系统默认发送邮件">
        </el-form-item>
        <el-form-item>
          <el-button @click="getMailConfig()">刷新</el-button>
          <el-button
            size="medium"
            type="primary"
            @click="saveMailConfig"
          >保存更改
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getMailInfo, editMailInfo, testMailInfo} from '../../../api/mail'

export default {
  name: 'Index',
  data () {
    return {
      mailForm: {
        sender: '',
        personal: '',
        emailSmtpHost: '',
        emailSmtpPort: '',
        username: '',
        password: '',
        encryption: '',
        state: 0,
        testMail: ''
      }
    }
  },
  created () {
    this.getMailConfig()
  },
  methods: {
    getMailConfig () {
      getMailInfo().then(res => {
        let data = res.data
        if (data.success) {
          this.mailForm = res.data.data
        } else {
          this.$message({
            type: 'error',
            message: '获取内容失败!'
          })
        }
      })
    },
    saveMailConfig () {
      editMailInfo(this.mailForm).then(res => {
        let data = res.data
        if (data.success) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: '发送失败!'
          })
        }
      })
    },
    sendTestMail () {
      testMailInfo().then(res => {
        let data = res.data
        if (data.success) {
          this.$message({
            type: 'success',
            message: '发送成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: data.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: left;
  margin-left: 15px;
  margin-bottom: 15px;
  font-size: 35px;
}

.mail {
  border: 1px solid #ebeef5;
  margin: 20px;
  padding: 20px;
}

.test {
  width: 100%;
  height: 100%;
  text-align: left;
}
</style>
