<template>
  <div>
    <PageTable ref="emailTable" action="QueryEmail" :columns="emailColumns">
      <Form :model="formSearch" ref="emailFormSearch" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
        <Form-item prop="serverHost" :label="$t('module.emailConfig.emailServer')">
          <Input type="text" maxlength="100" v-model="formSearch.serverHost" placeholder="" size="small"></Input>
        </Form-item>
        <Form-item prop="sendMail" :label="$t('module.emailConfig.emailAddress')">
          <Input type="text" maxlength="200" v-model="formSearch.sendMail" placeholder="" size="small"></Input>
        </Form-item>
        <Form-item prop="mailUsername" :label="$t('module.emailConfig.emailUserName')">
          <Input type="text" maxlength="50" v-model="formSearch.mailUsername" placeholder="" size="small"></Input>
        </Form-item>
      </Form>
      <div slot="handle-bar">
        <Button size="small" @click.native="search" type="warning" icon="ios-search">{{$t('common.search')}}</Button>
        <Button size="small" @click.native="formReset" type="info" icon="md-sync">{{$t('common.reset')}}</Button>
      </div>
      <Button slot="table-bar" type="ghost" icon="plus-round" size="small" @click="editEmail('')">{{$t('module.emailConfig.create')}}</Button>
      <Button slot="table-bar" type="ghost" icon="trash-a" size="small" @click="deleteEmail()">{{$t('common.delete')}}</Button>
    </PageTable>
    <Modal v-model="modal" width="600" @on-cancel="onCancel" :ok-text="$t('module.emailConfig.send')">
      <div slot="header">
        <!-- <Icon type="android-mail" size="20"></Icon> -->
        <span class="send-mail-title">{{$t('module.emailConfig.testEmail')}}</span>
      </div>
      <Form :model="sendEmailInfo" :rules="rules">
        <FormItem :label="$t('module.emailConfig.title')" prop="topic">
          <Input v-model="sendEmailInfo.topic" :placeholder="$t('module.emailConfig.enterTitle')" maxlength="200"></Input>
        </FormItem>
        <FormItem :label="$t('module.emailConfig.receiver')" prop="sendTo">
          <Input v-model="sendEmailInfo.sendTo" :placeholder="$t('module.emailConfig.enterReceiver')" maxlength="200"></Input>
        </FormItem>
        <FormItem :label="$t('module.emailConfig.emailContent')" prop="body">
          <Input v-model="sendEmailInfo.body" type="textarea" :autosize="{minRows: 6,maxRows: 4}" placeholder="$t('module.emailConfig.enterEmailContent')" maxlength="1000"></Input>
        </FormItem>
      </Form>
      <div slot="footer" class="run-modal-ftbButton">
        <Button type="primary" @click="onOk">{{$t('module.emailConfig.send')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import EmailEdit from "./EmailEdit";
export default { 
  name: 'email-config',  
  data() {
    return {
      modal: false,
      formSearch: {
        serverHost: "",
        sendMail: "",
        mailUsername: ""
      },
      emailColumns: [
        {
          type: "selection",
          width: 50,
          align: "center"
        },
        {
          title: this.$t('common.operating'),
          align: "center",
          width: 100,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t('common.edit'),
                    handle: () => {
                      this.editEmail(params.row.id);
                    }
                  },
                  {
                    type: "icon",
                    icon: "ios-email",
                    text: this.$t('module.emailConfig.testEmail'),
                    handle: () => {
                      this.sendEmailInfo = {
                        id: params.row.id,
                        topic: "",
                        sendTo: "",
                        body: ""
                      };
                      this.modal = true;
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: this.$t('module.emailConfig.emailServer'),
          align: "center",
          key: "serverHost",
          render: (h, params) => {
            return h('span', {
              attrs: {
                title: params.row.serverHost,
                href: '#'
              }
            }, params.row.serverHost);
          }
        },
        {
          title: this.$t('module.emailConfig.emailProtocol'),
          align: "center",
          key: "protocol"
        },
        {
          title: this.$t('module.emailConfig.port'),
          align: "center",
          key: "port"
        },
        {
          title: this.$t('module.emailConfig.default'),
          align: "center",
          width: 140,
          key: "isDefault",
          render: (h, params) => {
            const isDefault = params.row.isDefault;
            const color = isDefault == 1 ? "blue" : "red";
            const text = isDefault == 1 ? this.$t('module.emailConfig.selected') : this.$t('module.emailConfig.unselected');
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color
                }
              },
              text
            );
          }
        },
        {
          title: this.$t('module.emailConfig.emailAddress'),
          align: "center",
          width: 180,
          key: "sendMail",
          render: (h, params) => {
            return h('span', {
              attrs: {
                title: params.row.sendMail,
                href: '#'
              }
            }, params.row.sendMail);
          }
        },
        {
          title: this.$t('module.emailConfig.emailUserName'),
          align: "center",
          width: 150,
          key: "mailUsername",
          render: (h, params) => {
            return h('span', {
              attrs: {
                title: params.row.mailUsername,
                href: '#'
              }
            }, params.row.mailUsername);
          }
        },
        // {
        //   title: "邮箱密码",
        //   align: "center",
        //   key: "mailPassword"
        // },
        {
          title: this.$t('module.emailConfig.senderShow'),
          align: "center",
          key: "showName",
          render: (h, params) => {
            return h('span', {
              attrs: {
                title: params.row.showName,
                href: '#'
              }
            }, params.row.showName);
          }
        }
      ],
      sendEmailInfo: {
        id: "",
        topic: "",
        sendTo: "",
        body: ""
      },
      rules: {
        topic: [{ required: true, message: this.$t('module.emailConfig.enterName'), trigger: "blur" }],
        body: [{ required: true, message: this.$t('module.emailConfig.enterContent'), trigger: "blur" }],
        sendTo: [
          { required: true, message: this.$t('module.emailConfig.enterAddress'), trigger: "blur" },
          {
            message: this.$t('module.emailConfig.enterCorrectAdd'),
            trigger: "blur",
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
          }
        ]
      }
    };
  },
  created() {
  },

  methods: {
    search(page) {
      this.$refs["emailTable"].load(this.formSearch, page);
    },
    formReset() {
      this.$refs["emailFormSearch"].resetFields();
      this.search(1);
    },
    editEmail(id) {
      new this.$sidelipPage(
        EmailEdit,
        {
          props: {
            id
          }
        },
        () => {
          this.search(1);
        }
      );
    },
    deleteEmail() {
      let emailIds = this.getIds();
      if (!emailIds) {
        this.$Message.warning(this.$t('module.emailConfig.selectItems'));
        return;
      }
      new $confirm(this.$t('module.emailConfig.confirmDeletion'), this).then(() => {
        this.$store
          .dispatch("DeleteEmail", { ids: emailIds })
          .then(response => {
            if (response.statusCode == "0") {
              this.$Message.success(this.$t('module.emailConfig.deleteSuccess'));
              this.$refs["emailTable"].load(this.formSearch);
            } else {
              this.$Message.error(response.msg);
            }
          });
      });
    },
    getIds() {
      let emailIds = this.$refs["emailTable"].getSelectioned() || [],
        ids = [];
      if (!emailIds || emailIds.length <= 0) {
        return "";
      }
      for (let u of emailIds) {
        ids.push(u.id);
      }
      let idString = ids.join(",");
      return idString;
    },
    onOk() {
      this.$store.dispatch("SendEmail", this.sendEmailInfo).then(response => {
        if (response.statusCode == "0") {
          this.$Message.success(this.$t('module.emailConfig.sendSuccess'));

          this.modal = false;
        } else {
          this.$Message.error(response.msg);
        }
      });
    },
    onCancel() {
      this.modal = false;
      this.sendEmailInfo = {
        id: "",
        topic: "",
        sendTo: "",
        body: ""
      };
    }
  }
};
</script>
<style lang="less">
.ivu-modal-content {
  padding-top: 0;
}

.send-mail-title {
  font-size: 18px;
}

.modal-group-person {
  .group-person-item.active {
    background-color: #f8f8f9;
  }
}

.group-person-select {
  width: 100%;
  padding-left: 10px;
  // height: 20px;
  // line-height: 20px;
}
</style>
