<template>
  <div>
    <el-dialog
      ref="mailForm"
      top="50px"
      width="1000px"
      :title="dialogTitle"
      :visible="mailSettingVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        ref="emailForm"
        :rules="rules"
        :model="mailForm"
        label-width="120px"
      >
        <el-form-item label="用户名称：" prop="nickName">
          <el-input
            v-model.trim="mailForm.nickName"
            clearable
            placeholder="请输入用户名称"
            :maxlength="15"
            show-word-limit
            style="width: 215px"
          ></el-input>
        </el-form-item>

        <el-form-item label="邮件类型：" prop="mailType">
          <el-select
            v-model="mailForm.mailType"
            placeholder="请选择邮箱类型"
            @change="mailTypeChange"
          >
            <el-option
              v-for="item in mailTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="邮箱地址：" prop="mailAddress">
          <el-input
            v-model.trim="mailForm.mailAddress"
            placeholder="请输入邮箱地址"
            :maxlength="50"
            show-word-limit
            @blur="mailTypeChange(mailForm.mailType)"
          ></el-input>
        </el-form-item>

        <el-form-item label="邮箱密码：" prop="password">
          <el-input
            v-model.trim="mailForm.password"
            type="password"
            placeholder="该密码为邮箱授权码，并非邮箱登录密码"
            :maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item v-if="!isExchangeType" label="smtp主机：" prop="smtp">
          <el-input
            v-model="mailForm.smtpHost"
            :maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item v-if="!isExchangeType" label="smtp端口：" prop="smtpId">
          <el-input
            v-model="mailForm.smtpPort"
            :maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item v-if="isPop3Type" label="pop主机：">
          <el-input
            v-model="mailForm.popHost"
            :maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item v-if="isPop3Type" label="pop端口：">
          <el-input
            v-model="mailForm.popPort"
            :maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item v-if="isImapType" label="imap主机：">
          <el-input v-model="mailForm.imapHost"></el-input>
        </el-form-item>

        <el-form-item v-if="isImapType" label="imap端口：">
          <el-input v-model="mailForm.imapPort"></el-input>
        </el-form-item>

        <el-form-item v-if="isExchangeType" label="域：">
          <el-input v-model="mailForm.smtpHost"></el-input>
        </el-form-item>
        <el-form-item v-if="isExchangeType" label="服务器：">
          <el-input v-model="mailForm.smtpPort"></el-input>
        </el-form-item>

        <el-form-item label="使用SSL认证：">
          <el-switch v-model="mailForm.ssl" @change="sslChange"></el-switch>
        </el-form-item>

        <el-form-item label="需要身份验证：">
          <el-switch v-model="mailForm.validate"></el-switch>
        </el-form-item>

        <el-form-item label="删除远程邮件：">
          <el-switch v-model="mailForm.isDeleteRemote"></el-switch>
        </el-form-item>

        <el-form-item label="下载附件：">
          <el-switch v-model="mailForm.isHandleAttach"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button :loading="loading" @click="testConnect">测试连接</el-button>
        <el-button type="primary" @click="submitForm">保存配置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { saveMailSetting, testMailConnect } from '@/api/personal'
  export default {
    name: 'MailSettingDialog',
    props: {
      editMail: {
        type: Object,
        default: null,
      },
      mailSettingVisible: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        loading: false,
        dialogTitle: '添加外部邮箱配置',
        mailForm: {
          nickName: '',
          mailType: '',
          mailAddress: '',
          password: '',
          smtpHost: '',
          smtpPort: '',
          popHost: '',
          popPort: '',
          imapHost: '',
          imapPort: '',
          ssl: false,
          validate: true,
          isDeleteRemote: false,
          isHandleAttach: true,
          isOriginPwd: true,
        },
        mailTypeOptions: [
          { label: 'pop3类型', value: 'pop3' },
          { label: 'imap类型', value: 'imap' },
          { label: 'exchange类型', value: 'exchange' },
        ],
        rules: {
          nickName: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
          ],
          mailType: [
            { required: true, message: '请选择邮箱类型', trigger: 'blur' },
          ],
          mailAddress: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '邮箱地址不正确', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入邮箱授权码', trigger: 'blur' },
          ],
        },
      }
    },
    computed: {
      isPop3Type() {
        return this.mailForm.mailType == 'pop3'
      },
      isImapType() {
        return this.mailForm.mailType == 'imap'
      },
      isExchangeType() {
        return this.mailForm.mailType == 'exchange'
      },
    },
    watch: {
      mailSettingVisible(val) {
        if (val) {
          if (this.editMail) {
            this.dialogTitle = '编辑外部邮箱配置'
            this.mailForm = { ...this.editMail }
            this.mailForm.isOriginPwd = false
          } else {
            this.mailFormReset()
          }
        }
      },
    },
    methods: {
      closeDialog() {
        this.$emit('update:mailSettingVisible', false)
      },
      sslChange() {
        const { ssl } = this.mailForm
        if (!this.isExchangeType) {
          this.mailForm.popPort = '110'
          this.mailForm.smtpPort = '25'
          this.mailForm.imapPort = '143'
          if (ssl == true) {
            this.mailForm.popPort = '995'
            this.mailForm.smtpPort = '465'
            this.mailForm.imapPort = '993'
          }
        }
      },
      mailTypeChange(mailType) {
        const { mailAddress } = this.mailForm
        if (mailAddress !== '') {
          const mailSuffix = mailAddress
            .substring(mailAddress.indexOf('@') + 1, mailAddress.length + 1)
            .trim()

          const suffix = [
            'msn.com',
            'live.cn',
            'live.com',
            'gmail.com',
            'hotmail.com',
          ]
          if (mailType == 'pop3') {
            this.mailForm.popHost = 'pop.' + mailSuffix
            this.mailForm.smtpHost = 'smtp.' + mailSuffix

            if (suffix.includes(mailSuffix)) {
              this.mailForm.ssl = false
            } else {
              this.mailForm.popPort = '110'
              this.mailForm.smtpPort = '25'
            }
          } else if (mailType == 'imap') {
            if (suffix.includes(mailSuffix)) {
              this.mailForm.ssl = false
            } else {
              this.mailForm.smtpPort = '25'
              this.mailForm.imapPort = '143'
            }
            this.mailForm.imapHost = 'imap.' + mailSuffix
          } else {
            this.mailForm.smtpHost = mailSuffix
            this.mailForm.smtpPort = 'mail.' + mailSuffix
          }
        }
      },
      testConnect() {
        this.loading = true
        this.$message.info('测试连接需要一定的时间,请耐心等待...')
        testMailConnect(this.mailForm).then((data) => {
          if (data.state) {
            this.$message.success('连接成功')
          } else {
            this.$message.error('连接失败')
          }
          this.loading = false
        })
      },
      submitForm() {
        this.$refs['emailForm'].validate((valid) => {
          if (valid) {
            saveMailSetting(this.mailForm).then((data) => {
              if (data.state) {
                this.$message.success(data.message)
                this.closeDialog()
                this.$emit('update-mail-list')
              } else {
                this.$message.error(data.message)
              }
            })
          } else {
            this.$message.error('您输入表单信息有误，请重新填写!')
          }
        })
      },
      mailFormReset() {
        this.mailForm = {
          nickName: '',
          mailType: '',
          mailAddress: '',
          password: '',
          smtpHost: '',
          smtpPort: '',
          popHost: '',
          popPort: '',
          imapHost: '',
          imapPort: '',
          ssl: false,
          validate: true,
          isDeleteRemote: false,
          isHandleAttach: true,
          isOriginPwd: true,
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>