<template>
  <div class="layout-no-cols" v-loading="dataLoading">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button @click="sendEmailHandler" :loading="confirmLoading">
        <i class="fa fa-paper-plane-o"></i> 发送 </el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <h3>发送邮件</h3>
        <el-form :model="tmpMessage" ref="emailForm" label-width="100px" class="send-member-email-form" label-suffix="：">
          <el-input v-model="tmpMessage.type" type="hidden" ></el-input>
          <el-form-item prop="businessType" label="业务类型" :verify="['NotNull|请选择业务类型']" class="business-input">
            <el-row>
              <el-col :span="10">
                <el-select v-model="tmpMessage.businessType" class="businessType-select" @change="selectBusinessType">
                  <el-option v-for="item in businessTypes" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="14">
                <i class="infomation">
                  {{infomation}}
                </i>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="title" label="标题" :verify="['NotNull|请填写标题','Length<40']" class="title-input">
            <el-input v-model="tmpMessage.title"></el-input>
          </el-form-item>
          <el-form-item prop="content" label="内容">
            <ueditor
              :content.sync="tmpMessage.content"
              :config="editorConfig"
              @contentChange="contentChange">
            </ueditor>
          </el-form-item>
          <el-form-item prop="sendTime" label="发送时间">
            <el-date-picker v-model="tmpMessage.sendTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :editable="false" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import ueditor from '@src/components/ueditor.vue'
export default {
  components: {
    ueditor: ueditor
  },
  props: {
    memberIds: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      confirmLoading: false,
      businessTypes: [], // 发送邮件业务类型
      infomation: '',
      // 编辑器配置
      editorConfig: {
        initialFrameHeight: 200
      },
      // 临时消息
      tmpMessage: {
        fromUser: '',
        businessType: '',
        title: '',
        content: '',
        sendTime: '',
        type: 'Email',
        toids: '', // 发送邮件的会员
        searchName: '',
        memberType: ''
      },
      searchName: '',
      memberType: '',
      dataLoading: true
    }
  },
  async created() {
    await this.getBusinessTypes() // 发送邮件业务类型
    this.searchName = this.$route.query.searchName ? this.$route.query.searchName : ''
    this.memberType = this.$route.query.memberType ? this.$route.query.memberType : ''
    this.beforeShowPage()
    this.dataLoading = false
  },
  methods: {
    beforeShowPage() {
      this.confirmLoading = false
      if (this.memberIds.length) {
        this.tmpMessage.toids = this.memberIds
      }
      this.tmpMessage.searchName = this.searchName
      this.tmpMessage.memberType = this.memberType
      this.tmpMessage.businessType = ''
      this.tmpMessage.title = ''
      this.tmpMessage.sendTime = ''
      this.tmpMessage.content = ''
    },
    // 选中消息模板
    async selectBusinessType() {
      let data = await axios.get(`/ui/messagemanager/${this.tmpMessage.type}/bussinesstype`, {
        params: {
          type: this.tmpMessage.type,
          businessType: this.tmpMessage.businessType
        }
      })
      if (data.data.status === 1) {
        if (data.data.data.content) {
          this.infomation = ''
          this.tmpMessage.title = data.data.data.title
          this.tmpMessage.sendTime = data.data.data.sendTime
          this.tmpMessage.content = data.data.data.content
        } else {
          this.infomation = '注意：该类型的消息模板未创建或者模板内容为空!'
          this.tmpMessage.title = ''
          this.tmpMessage.sendTime = ''
          this.tmpMessage.content = ''
        }
      } else {
        util.showErrorNotification('获取消息模板异常!')
      }
    },
    contentChange(val) {
      this.tmpMessage.content = val
    },
    // 处理发送邮件事件
    async sendEmailHandler() {
      if (!this.tmpMessage.content) {
        util.showResponseMessage({message: '模板内容不能为空！'})
        return
      }
      if (this.tmpMessage.sendTime) {
        if (new Date(this.tmpMessage.sendTime).getTime() < new Date().getTime()) {
          util.showResponseMessage({message: '发送时间应大于当前时间！'})
          return
        }
      }
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['emailForm'])
        let res
        if (this.tmpMessage.toids) {
          res = await axios.post('/ui/memberemail', this.tmpMessage)
        } else {
          res = await axios.post('/ui/memberemail/sendmoreemail', this.tmpMessage)
        }
        this.confirmLoading = false
        util.showResponseMessage(res.data)
      } catch (e) {
        this.confirmLoading = false
        util.showErrorMessageBox(e)
      }
    },

    async getBusinessTypes() {
      let dataType = await axios.get('/ui/businessTypes')
      this.businessTypes = dataType.data.data
    }
  }
}
</script>
<style scoped>
.businessType-select {
  width: 100%;
}
.infomation {
  color: #fa5555;
  font-size: 13px;
}
.business-input {
  width: 600px;
}
.title-input {
  width: 600px;
}
</style>
<style>
.send-member-email-form #editor_1{
  width: 800px;
}
</style>
