<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" label-width="85px" class="order_form">
      <el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="角色" prop="roleid">
              <el-select v-model="ruleForm.roleid" placeholder="请选择角色" @change="onChange()">
                <el-option v-for="item in roles" :key="item.F_RoleId" :label="item.F_RoleName+'-'+item.F_RoleCode" :value="item.F_RoleId"/>
              </el-select>
              <el-select v-model="ruleForm.userid" placeholder="请选择用户" @change="$forceUpdate()">
                <el-option v-for="item in users" :key="item.F_UserId" :label="item.F_UserName+'-'+item.F_UserCode" :value="item.F_UserId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="是否群发" prop="IsToAll">
              <el-radio-group v-model="ruleForm.IsToAll">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="内容" prop="con">
              <el-input v-model="ruleForm.con" placeholder="请输入内容" type="textarea" size="medium " />
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm">发送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getRoleList,
  getUserListIndex,
  getSaveChatInfo
} from '@/api/AnnounceManagement/chart'
export default {
  name: 'SendMsg',
  props: {
    layerid: {
      type: String,
      default: ''
    },
    roleid: {
      type: Number,
      default: ''
    },
    userid: {
      type: Number,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {

      },
      roles: [],
      users: [],
      options: []
    }
  },
  created() {
    if (this.roleid) {
      this.ruleForm.roleid = this.roleid
      this.getUserList(this.roleid)
      this.ruleForm.userid = this.userid
    }
    this.getRole()
  },
  methods: {
    getRole() {
      const params = {}
      getRoleList(params).then(res => {
        if (res.state == 'success') {
          this.roles = res.data
        }
      })
    },
    onChange() {
      this.ruleForm.userid = ''
      this.getUserList(this.ruleForm.roleid)
    },
    getUserList(pid) {
      const params = {
        roleid: pid
      }
      getUserListIndex(params).then(res => {
        if (res.state == 'success') {
          this.users = res.data
        }
      })
    },
    submitForm() {
      if (!this.ruleForm.con) {
        this.$message.error('请输入发送内容')
        return
      }
      const params = {
        Content: this.ruleForm.con,
        ToUserId: this.ruleForm.userid || '0',
        ToRoleId: this.ruleForm.roleid,
        IsToAll: this.ruleForm.IsToAll
      }
      getSaveChatInfo(params).then((response) => {
        if (response.state == 'success') {
          this.$message.success('发送成功')
          this.ruleForm.con = ''
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
