<template>
  <div class="sendMessage-page">
    <person-title>当前位置 :: 消息系统 >> <em>发送消息</em></person-title>
    <div class="sendMessage-page-cont">
      <el-form ref="sendMessageForm"
               :model="sendMessageForm" class="admin-sendMessage">
        <el-form-item label="发送类型 :">
          <el-radio-group v-model="sendMessageForm.msgwho">
            <el-radio :label="1">群发</el-radio>
            <el-radio :label="2">单发</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="sendMessageForm.msgwho==1">
          <el-form-item label="对象级别 :">
            <el-radio-group v-model="sendMessageForm.msgOneGrade">
              <el-radio :label="1">全部</el-radio>
              <el-radio :label="2">快递员</el-radio>
              <el-radio :label="3">普通用户</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="单发对象 :">
            <el-input v-model="sendMessageForm.phone" placeholder="请输入对方电话!" clearable></el-input>
          </el-form-item>
        </template>
        <el-form-item label="标题 :">
          <el-input v-model="sendMessageForm.msgTitle"
                    placeholder="消息标题"></el-input>
        </el-form-item>
        <el-form-item label="消息 : ">
          <el-input type="textarea" :rows="4"
                    placeholder="请输入内容..."
                    v-model="sendMessageForm.content">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSendMessage">发送消息</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {sendMessage} from '../../../api/message'

export default {
  data () {
    return {
      sendMessageForm: {
        msgwho: 1,
        phone: '',
        userId: '',
        msgTitle: '',
        content: '',
        msgOneGrade: 1,
      }
    }
  },
  methods: {
    handleSendMessage () {
      let loading = this.$loading({lock: true, text: '玩命加载中...'})
      sendMessage(this.sendMessageForm).then(res => {
        console.log(res)
        let data = res.data
        if (data.success) {
          this.$message({
            message: data.msg,
            duration: 2000,
            type: 'success'
          })
        } else {
          this.$message({
            message: data.msg,
            duration: 2000,
            type: 'error'
          })
        }
      }).catch(erro => {
        this.$message({
          message: '请求错误',
          duration: 2000,
          type: 'error'
        })
      })
      loading.close()
    }
  }
}
</script>

<style>
.sendMessage-page-cont {
  width: 60%;
  margin: 0 auto;
}
</style>
