<template>
  <div>
    <div class="field is-horizontal">
    <div class="field-label is-normal">
      <label class="label">Email <span class="has-text-danger">*</span></label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control is-expanded">
          <input class="input" type="text" placeholder="" v-model="record.email">
        </p>
      </div>
      </div>
    </div>
    <div class="field is-horizontal mt15">
    <div class="field-label is-normal">
      <label class="label">Password <span class="has-text-danger">*</span></label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control is-expanded">
          <input class="input" type="text" placeholder="" v-model="record.password">
        </p>
      </div>
    </div>
  </div>
    <div class="field is-horizontal mt15">
    <div class="field-label is-normal">
      <label class="label">Smtp <span class="has-text-danger">*</span></label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control is-expanded">
          <input class="input" type="text" placeholder="" v-model="record.smtp">
        </p>
      </div>
    </div>
  </div>
       <div class="field is-horizontal mt-5">
    <div class="field-label is-normal">
      <label class="label">Port <span class="has-text-danger">*</span></label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control is-expanded">
          <input class="input" type="text" placeholder="" v-model="record.port">
        </p>
      </div>
    </div>
  </div>
      <div class="field is-grouped mt-5 pt-3">
        <div class="control mr-3">
          <button class="button is-primary has-text-white" @click="update()">
           Update
          </button>
        </div>
          <div class="control">
          <button :class="`button is-dark ${loading? 'is-loading' : ''}`" @click="test()">
            Send test
          </button>
        </div>
      </div>
  </div>
  </template>
  <script>
  export default {
    props: ['pagename', 'row'],
    data () {
      return {
        record: this.row? this.$copy(this.row) : {},
        loading: false
      }
    },
    methods :{
      async update() {
        let data = this.$resetNull(this.record)
        if(data.id) await this.$updaterow('emailsetup', data, undefined, this.pagename)
        else await this.$insertrow('emailsetup', data, undefined, this.pagename)
        this.$emit('close')
      },
      async test() {
        this.loading = true
        let data = {subject: 'hello', to: 'loitx@outlook.com', sender: 1, content: 'Test'}
        let rs = await this.$insertapi('sendemail', data)
        this.loading = false
      }
    }
  }
  </script>