<!-- 加入群弹窗 -->
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="370px"
    :before-close="handleClose"
    :show-close="false"
  >
      <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
                    <el-form :model="formData">
                        <el-form-item label="房间号：" prop="roomId">
                            <el-input v-model="formData.roomId" class="form-control inline-block" placeholder="请输入房间号"></el-input>
                        </el-form-item>
                    </el-form>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer fl-r">
            <el-button size="small" type="primary" @click="saveCreate(false)">确 定</el-button>
            <el-button size="small" @click="handleClose">关 闭</el-button>
        </span>
  </el-dialog>
</template>

<script>
import {joinGroup} from '../../api/api.js'
export default {
  name: '',
  mixins: [],
  components: {},
  props: {
    addVisible: {
      Boolean,
      default: false
    },
    myUserId: {
      String,
      default: ''
    }
  },
  data () {
    return {
      dialogVisible: false,
      formData: {
        roomId: ''
      }
    }
  },
  watch: {
    addVisible (val) {
      this.dialogVisible = val
    }
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {
    handleClose () {
      this.formData.roomId = ''
      this.$emit('update:addVisible', false)
    },
    saveCreate (id) {
      if (id) {
        this.formData.roomId = id
      }
      if (!this.formData.roomId) {
        this.$message.error('请填写房间号')
      } else {
        let params = {
          userId: this.myUserId,
          groupId: this.formData.roomId
        }
        joinGroup(params).then(data => {
          this.handleClose()
          this.$message.success('加入群成功')
        })
      }
    }
  },
  beforeDestroy () {},
  destroyed () {},
  beforeUpdate () {},
  updated () {}
}
</script>
<style lang='scss' scoped>
</style>
