<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="addTemplateHandler" :loading="confirmLoading" priv="Member.Information.Add">
        <span>
          <i class="fa fa-save"></i>保存</span>
      </el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <h4>添加模板消息</h4>
        <el-form :model="tmpTemplate" ref="addTemplateForm" label-width="120px" v-loading="dialogLoading" label-suffix="：" class="add-member-form">

          <el-form-item label="模板类型" prop="type" :verify="['NotNull']" >
            <el-select v-model="tmpTemplate.type" clearable>
              <el-option v-for=" item in eventTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板消息" prop="templateAndContent" :verify="['NotNull']" >
            <el-select v-model="tmpTemplate.templateAndContent" clearable>
              <el-option v-for=" item in messageItem" :key="item.key" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  props: {
    ID: {
      default: 0
    }
  },
  data() {
    return {
      isEdit: false,
      dialogLoading: false,
      // 临时模板消息
      tmpTemplate: {
        ID: '',
        type: '',
        templateAndContent: ''
      },
      eventTypes: [],
      messageItem: [],
      confirmLoading: false
    }
  },
  mounted() {
    this.isEdit = this.ID !== 'new'
    this.loadData()
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async loadData() {
      this.dialogLoading = true
      this.confirmLoading = false
      try {
        let event = await axios.get('/ui/platform/codes/ModelMessageEventType')
        this.eventTypes = event.data.data
        let match = await axios.get('/ui/wechat/templatemessage/messageitem', {
          params: {
            weiXinID: this.$route.params.weiXinID
          }
        })
        this.messageItem = match.data.data
        if (this.isEdit) {
          let init = await axios.get('/ui/wechat/templatemessage/init', {
            params: {
              ID: this.ID
            }
          })
          this.tmpTemplate = init.data.data
        } else {
          this.tmpTemplate.type = 'WORKFLOW'
        }
        this.dialogLoading = false
      } catch (e) {
        util.showErrorMessageBox(e)
        this.dialogLoading = false
      }
    },
    // 处理添加事件
    async addTemplateHandler() {
      this.confirmLoading = true
      try {
        await util.validateForm(this.$refs['addTemplateForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
        return
      }
      let res
      try {
        this.tmpTemplate.weiXinID = this.$route.params.weiXinID
        if (this.isEdit) {
          res = await axios.put(`/ui/wechat/templatemessage/${this.ID}`, this.tmpTemplate)
        } else {
          res = await axios.post('/ui/wechat/templatemessage', this.tmpTemplate)
        }
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
        return
      }
      this.confirmLoading = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$emit('callback')
        this.goBack()
      }
    }
  }
}
</script>
<style>

</style>
