<template>
  <div class="fullheight" style="overflow-y: auto;">
    <el-form
      v-form
      data-vv-scope="tenantMailServerForm"
      label-position="left"
      class="tenant-mail-server-form"
    >
      <ht-form-item label="邮箱地址" label-width="150px">
        <ht-input
          v-model="tenantMailServer.userName"
          validate="required"
          :maxlength="100"
          :showWordLimit="true"
          @input="userNameChange"
        />
      </ht-form-item>
      <ht-form-item label="邮件类型" label-width="150px">
        <ht-select
          v-model="tenantMailServer.mailType"
          :options="[
            {key: 'pop3', value: 'pop3类型'},
            {key: 'imap', value: 'imap类型'}
          ]"
          :validate="{required: true}"
          @change="mailTypeChange"
        />
      </ht-form-item>
      <ht-form-item label="协议服务器" label-width="150px">
        <ht-input
          v-model="tenantMailServer.mailHost"
          autocomplete="off"
          validate="required"
          :maxlength="100"
          :showWordLimit="true"
        />
      </ht-form-item>
      <ht-form-item label="密码" label-width="150px" class="is-required">
        <ht-input
          v-model="tenantMailServer.mailPass"
          show-password
          autocomplete="off"
          validate="required"
          :maxlength="100"
          :showWordLimit="true"
        />
        <p class="password-tips">
          该密码为邮箱授权码，非登录密码
        </p>
      </ht-form-item>
      <ht-form-item label="昵称" label-width="150px">
        <ht-input
          v-model="tenantMailServer.nickName"
          validate="required"
          :maxlength="100"
          :showWordLimit="true"
        />
      </ht-form-item>
      <ht-form-item label="端口号" label-width="150px">
        <ht-input
          v-model="tenantMailServer.mailPort"
          validate="required|numeric"
          :maxlength="5"
          :showWordLimit="true"
        />
      </ht-form-item>
      <ht-form-item label="是否使用SSL认证" label-width="150px">
        <ht-radio
          :options="[
            {key: 1, value: '是'},
            {key: 0, value: '否'}
          ]"
          v-model="tenantMailServer.useSsl"
          validate="required"
          @change="useSslChange"
        />
      </ht-form-item>
      <ht-form-item label="smtphost" label-width="150px">
        <ht-input
          v-model="tenantMailServer.smtpHost"
          validate="required"
          :maxlength="100"
          :showWordLimit="true"
        />
      </ht-form-item>
      <ht-form-item label="sendport" label-width="150px">
        <ht-input
          v-model="tenantMailServer.sendPort"
          validate="required|numeric"
          :maxlength="5"
          :showWordLimit="true"
        />
      </ht-form-item>
      <ht-form-item label="说明" label-width="150px">
        <ht-input
          type="textarea"
          v-model="tenantMailServer.desc"
          placeholder="请输入邮件服务器说明"
          :maxlength="200"
          :showWordLimit="true"
        />
      </ht-form-item>
      <el-form-item label-width="150px">
        <el-button @click="testConnect()" type="primary" plain
          >测试连接</el-button
        >
        <ht-submit-button
          url="${uc}/uc/tenantMailServer/v1/save"
          ref="tenantMailSaveBtn"
          :model="tenantMailServer"
          scope-name="tenantMailServerForm"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'tenantMailSereverManager',
  props: {
    tenantId: String
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      tenantMailServer: {
        smtpHost: 'smtp.'
      }
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
    let url = '${uc}/uc/tenantMailServer/v1/getByCurrent'
    if (this.tenantId) {
      url += '?tenantId=' + this.tenantId
    }
    this.$http.get(url).then(
      resp => {
        this.tenantMailServer = {...this.tenantMailServer, ...resp.data}
      },
      error => {
        reject(error)
      }
    )
  },
  methods: {
    testConnect() {
      const this_ = this
      this_.$validator.validateAll('tenantMailServerForm').then(result => {
        if (result) {
          let mailType = this.tenantMailServer.mailType
          let mailSetting = {
            mailType: this.tenantMailServer.mailType,
            mailAddress: this.tenantMailServer.userName,
            password: this.tenantMailServer.mailPass,
            nickName: this.tenantMailServer.nickName,
            smtpHost: this.tenantMailServer.smtpHost,
            sendPort: this.tenantMailServer.sendPort,
            validate: true,
            isDeleteRemote: false,
            isHandleAttach: true
          }
          if (this.tenantMailServer.useSsl == '0') {
            mailSetting.ssl = false
          } else {
            mailSetting.ssl = true
          }
          if (mailType == 'pop3') {
            mailSetting.popHost = this.tenantMailServer.mailHost
            mailSetting.popPort = this.tenantMailServer.mailPort
          } else if (mailType == 'imap') {
            mailSetting.imapHost = this.tenantMailServer.mailHost
            mailSetting.imapPort = this.tenantMailServer.mailPort
          }
          let address = this.tenantMailServer.userName
          let s = address
            .substring(address.indexOf('@') + 1, address.length + 1)
            .trim()
          mailSetting.smtpPort = mailSetting.ssl ? 465 : 25

          let url = '${portal}/mail/mail/mailSetting/v1/test?isOriginPwd=false'
          this.$http.post(url, mailSetting).then(resp => {
            if (resp.data.state) {
              this.$message.success('测试连接成功!')
            }
          })
        } else {
          let arr = this_.$validator.errors.items.filter(
            item => item.scope == 'tenantMailServerForm'
          )
          let errorLength = arr.length
          this_.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    mailTypeChange(change) {
      if (this.tenantMailServer.userName) {
        let address = this.tenantMailServer.userName
        let s = address
          .substring(address.indexOf('@') + 1, address.length + 1)
          .trim()
        if (change == 'pop3') {
          this.tenantMailServer.mailHost = 'pop.' + s
        }
        if (change == 'pop3') {
          if (
            !(
              s == 'gmail.com' ||
              s == 'msn.com' ||
              s == 'live.cn' ||
              s == 'live.com' ||
              s == 'hotmail.com'
            )
          ) {
            this.tenantMailServer.mailPort =
              this.tenantMailServer.useSsl == '0' ? '110' : '995'
          }
        } else if (change == 'imap') {
          if (
            !(
              s == 'gmail.com' ||
              s == 'msn.com' ||
              s == 'live.cn' ||
              s == 'live.com' ||
              s == 'hotmail.com'
            )
          ) {
            this.tenantMailServer.mailPort =
              this.tenantMailServer.useSsl == '0' ? '143' : '993'
          }
          this.tenantMailServer.mailHost = 'imap' + '.' + s
        }
      }
    },
    useSslChange(val) {
      if (this.tenantMailServer.mailType == 'pop3') {
        this.tenantMailServer.mailPort = val === 1 ? '995' : '110'
      } else if (this.tenantMailServer.mailType == 'imap') {
        this.tenantMailServer.mailPort = val === 1 ? '993' : '143'
      }
      this.tenantMailServer.sendPort = val === 1 ? '465' : '25'
    },
    userNameChange(val) {
      if (val.indexOf('@') >= 0) {
        let s = val.substring(val.indexOf('@') + 1, val.length + 1).trim()
        this.tenantMailServer.smtpHost = 'smtp.' + s
      } else {
        this.tenantMailServer.smtpHost = 'smtp.'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
.inputs.ht-form-inputs__inline {
  width: 480px !important;
}
.tenant-mail-server-form {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /deep/ .el-form-item--small.el-form-item {
    margin-bottom: 30px;
  }
}
.password-tips {
  font-size: 12px;
  font-weight: 400;
  color: #ffae44;
  margin-top: 5px;
}
</style>