<template>
  <div class="sidelip-box">
    <Form :model="emailform" ref="formUser" :rules="rules" :label-width="120">
        <Row :gutter="20" class="code-row-bg">
          <Col span="10">
          <Form-item prop="mailUsername" :label="$t('module.emailConfig.emailUserName')">
            <Input v-model.trim="emailform.mailUsername" placeholder="" maxlength="50"></Input>
          </Form-item>
          </Col>
          <Col span="10">
          <Form-item prop="mailPassword" :label="$t('module.emailConfig.emailPass')">
            <Input v-model="emailform.mailPassword" placeholder="" type="password" maxlength="30"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="10">
          <Form-item prop="protocol" :label="$t('module.emailConfig.emailProtocol')">
            <Input v-model="emailform.protocol" placeholder="" maxlength="200"></Input>
          </Form-item>
          </Col>
          <Col span="10">
          <Form-item prop="port" :label="$t('module.emailConfig.port')">
            <Input v-model.number="emailform.port" placeholder=""></Input>
          </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="10">
          <Form-item prop="sendMail" :label="$t('module.emailConfig.emailAddress')">
            <Input v-model="emailform.sendMail" placeholder="" maxlength="200"></Input>
          </Form-item>
          </Col>
          <Col span="10">
          <Form-item prop="serverHost" :label="$t('module.emailConfig.serverAdd')">
            <Input v-model="emailform.serverHost" placeholder="" maxlength="200"></Input>
          </Form-item>
          </Col>
        </Row>
        <Row :gutter="20" class="code-row-bg">
          <Col span="10">
          <Form-item prop="showName" :label="$t('module.emailConfig.senderShow')">
            <Input v-model="emailform.showName" placeholder="" maxlength="120"></Input>
          </Form-item>
          </Col>
          <Col span="10">
          <Form-item prop="isDefault" :label="$t('module.emailConfig.default')">
            <!-- <Radio @click.native="emailform.isDefault=!emailform.isDefault">
                          <span>缺省</span>
                      </Radio> -->
            <i-Switch v-model="emailform.isDefault"></i-Switch>
          </Form-item>
          </Col>
        </Row>
    </Form>
  </div>
</template>
<style lang="less" scoped>
.push-role-button {
  position: absolute;
  right: 5px;
  top: 5px;
}
</style>
<script>
export default {
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      emailform: {
        mailUsername: "", // 邮箱用户名
        mailPassword: "", // 邮箱密码
        serverHost: "",
        protocol: "", // 邮箱协议
        port: "", // 端口
        isDefault: false, // 是否缺省
        sendMail: "", // 发件地址
        showName: ""  // 发件人显示
      },
      modal: false,
      rules: {
        mailUsername: [{ required: true, message: this.$t('module.emailConfig.enterName'), trigger: "blur"}, {message: this.$t('module.emailConfig.maxFifty'), trigger: "blur", max: 50}],
        mailPassword: [{ required: true, message: this.$t('module.emailConfig.enterPass'), trigger: "blur" }],
        protocol: [{ required: true, message:this.$t('module.emailConfig.enterProtocol'), trigger: "blur" }, {message: this.$t('module.emailConfig.enterCorrectPro'), trigger: "blur", pattern:/^[0-9a-zA-Z\.]+$/}],
        port: [{type:"number", required: true, message: this.$t('module.emailConfig.enterPort'), trigger: "blur" }, { message: this.$t('module.emailConfig.portMaxEight'), trigger: "blur", pattern: /^\d{1,8}$/ }],
        serverHost: [{ required: true, message: this.$t('module.emailConfig.enterServerAdd'), trigger: "blur" }, {message: this.$t('module.emailConfig.enterCorrecServerAdd'), trigger: "blur", pattern: /^[0-9a-zA-Z\.]+$/}],
        sendMail: [
          { required: true, message: this.$t('module.emailConfig.enterAddress'), trigger: "blur" },
          { trigger: "blur", message: this.$t('module.emailConfig.enterCorrectAdd'), pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ }
        ]
      },
      tableData: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: this.$t('module.emailConfig.roleName'),
          key: "roleName"
        },
        {
          title: this.$t('module.emailConfig.roleType'),
          key: "roleType",
          render: (h, params) => {
            return h(
              "span",
              {},
              params.row.total > 1 ? this.$t('module.emailConfig.background') : params.row.total > 2 ? this.$t('module.emailConfig.foreground') : this.$t('module.emailConfig.backForeground')
            );
          }
        },
        {
          title:this.$t('common.remark'),
          key: "remark"
        }
      ]
    };
  },
  computed: {},
  created: function() {
    this.$emit("SetPageActions", [
      {
        text: this.$t('common.save'),
        theme: "primary",
        icon: "md-create",
        action: 'EditEmail',
        handle: this.save
      }
    ]);
    this.$emit("setTitle", this.id != "" ? this.$t('module.emailConfig.editMailbox') : this.$t('module.emailConfig.createMailbox'));
    if (this.id != "") {
      $store.dispatch("QueryEmailDetails", { id: this.id }).then(response => {
        this.emailform = {
          mailUsername: response.mailUsername,
          mailPassword: response.mailPassword,
          protocol: response.protocol,
          serverHost: response.serverHost,
          port: response.port,
          isDefault: response.isDefault == 1 ? true : false,
          sendMail: response.sendMail,
          showName: response.showName
        };
      });
    }
  },
  beforeMount: function() { },
  mounted: function() { },
  beforeDestroy: function() { },
  destroyed: function() { },
  methods: {
    save() {
      this.$refs["formUser"].validate(valid => {
        if(valid) {
          let param = {
            id: this.id,
            mailUsername: this.emailform.mailUsername,
            mailPassword: this.emailform.mailPassword,
            protocol: this.emailform.protocol,
            serverHost: this.emailform.serverHost,
            port: this.emailform.port,
            isDefault: this.emailform.isDefault ? 1 : 0,
            sendMail: this.emailform.sendMail,
            showName: this.emailform.showName
          };
          this.$emit('SetActionsState', {
            btn: 'EditEmail',
            state: true
          })
          $store.dispatch("EditEmail", param).then(response => {
            this.$emit('SetActionsState', {
              btn: 'EditEmail',
              state: false
            })
            if (response.statusCode == "0") {
              this.$Message.success(response.msg);
              this.$emit("close");
            } else {
              this.$Message.error(response.msg);
            }
          });
        } else {
          this.$Message.error({
            content: this.$t('common.formValidateFailed'),
            duration: 3
          });
        }
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
