<template>
  <el-dialog
    title="群新增"
    :visible.sync="dialogVisible"
    width="36%"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :append-to-body="true"
    class="dialog_edit_session"
    v-loading.fullscreen.lock="fullscreenLoading"
  >
    <el-form label-position="left" ref="form" :rules="rules" :model="form">
      <el-form-item label="群名称：" prop="conversationName" label-width="80px">
        <el-input
          placeholder="请输入群名称"
          v-model.trim="form.conversationName"
          clearable
          maxlength="20"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="群 主：" prop="ownerMobile" label-width="80px">
        <el-input
          placeholder="请输入手机号"
          v-model.trim="form.ownerMobile"
          v-onlyInt
          clearable
          maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item
        label-width="80px"
        style="margin-bottom: 20px"
        label
         v-for="(item, index) in form.mobileList"
        :prop="'mobileList.' + index + '.value'"
        :rules="rules.value"
        :key="index"
      >
        <template v-if="index == 0" slot="label">
          <span>群成员：</span>
        </template>
        <div class="form_item_content">
          <el-input
            placeholder="请输入手机号"
            v-onlyInt
            clearable
            maxlength="11"
            v-model="item.value"
          ></el-input>
          <i class="iconfont icon-a-zu903" @click="addjurisdiction"></i>
          <i
            class="iconfont icon-a-zu904"
            v-if="form.mobileList.length != 1"
            @click="deletjurisdiction(index)"
          ></i>
        </div>
      </el-form-item>
      <el-form-item label="新成员是否可查看100条历史数据：">
        <el-radio-group v-model="form.showHistoryType">
          <el-radio :label="1">可查看</el-radio>
          <el-radio :label="0">不可查看</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="群是否可以被搜索：">
        <el-radio-group v-model="form.searchable">
          <el-radio :label="0">不可搜索</el-radio>
          <el-radio :label="1">可搜索</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入群是否需要验证：">
        <el-radio-group v-model="form.validationType">
          <el-radio :label="0">不验证</el-radio>
          <el-radio :label="1">入群验证</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="@all 适用范围：">
        <el-radio-group v-model="form.mentionAllAuthority">
          <el-radio :label="0">所有人使用</el-radio>
          <el-radio :label="1">仅群主可@all</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="群管理类型：">
        <el-radio-group v-model="form.managementType">
          <el-radio :label="0">所以人可管理</el-radio>
          <el-radio :label="1">仅群主可管理</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否开启群禁言：">
        <el-radio-group v-model="form.chatBannedType">
          <el-radio :label="0">不禁言</el-radio>
          <el-radio :label="1">全体禁言</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="determine('form')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as api from '@/api/api'
export default {
  data() {
    return {
      fullscreenLoading: false,
      dialogVisible: false,
      rules: {
        conversationName: [
          { required: true, message: '请输入群名称', trigger: 'blur' }
        ],
        ownerMobile: [
          { required: true, message: '请输入群主手机号', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入群成员手机号', trigger: 'blur' }
        ]
      },
      form: {
        chatBannedType: 0,
        conversationName: '',
        managementType: 0,
        mentionAllAuthority: 0,
        mobileList: [{ value: '' }],
        ownerMobile: '',
        searchable: 0,
        showHistoryType: 0,
        validationType: 0
      }
    }
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      this.fullscreenLoading = false
      this.$parent.search()
       this.form = {
        chatBannedType: 0,
        conversationName: '',
        managementType: 0,
        mentionAllAuthority: 0,
        mobileList: [{ value: '' }],
        ownerMobile: '',
        searchable: 0,
        showHistoryType: 0,
        validationType: 0
      }
    },
    // 打开弹框
    openClose() {
      this.dialogVisible = true
    },
    // 新增群人员
    addjurisdiction() {
      this.form.mobileList.push({ value: '' })
    },
    // 删除群人员
    deletjurisdiction(index) {
      this.form.mobileList.splice(index, 1)
    },
    // 新增
    determine(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true
          let mobileList = []
          for (let item of this.form.mobileList) {
            if (item.value && item.value.length != 11) {
              this.fullscreenLoading = false
              return this.$message.warning('请输入正确的手机号')
            }
            if (item.value) {
              mobileList.push(item.value)
            }
          }
          let form = {
            chatBannedType: this.form.chatBannedType,
            conversationName: this.form.conversationName,
            managementType: this.form.managementType,
            mentionAllAuthority: this.form.mentionAllAuthority,
            mobileList: mobileList,
            ownerMobile: this.form.ownerMobile,
            searchable: this.form.searchable,
            showHistoryType: this.form.showHistoryType,
            validationType: this.form.validationType
          }
          api
            .POST('conversation/create', form)
            .then(res => {
              if (res.code == 0) {
                this.$message.success(res.message)
                this.handleClose()
              }
            })
            .catch(() => {
              this.fullscreenLoading = false
            })
        }
      })
    }
  }
}
</script>
<style lang="less">
.dialog_edit_session {
  .el-input {
    max-width: 470px;
  }
  .el-radio {
    margin-right: 60px;
  }
  .form_item_content {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .input__inner {
      width: 410px;
    }
  }
  .icon-a-zu903 {
    color: #f23f3a;
    margin-left: 10px;
    margin-right: 20px;
    cursor: pointer;
    font-size: 22px;
  }
  .icon-a-zu904 {
    cursor: pointer;
    font-size: 22px;
  }
  .el-icon-minus {
    margin-right: 16px;
  }
}
</style>