<template>
  <div class="main-form">
    <div>
      <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="组名称" prop="groupName">
              <el-input v-model.trim="groupForm.groupName" type="text" placeholder="必填"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isAdmin">
          <el-col :span="12">
            <el-form-item label="所属派出所" prop="deptid">
              <dept-select v-model="groupForm.deptid" :need-top="false" :clearable="false" placeholder="选择所属派出所"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="group-list">
      <el-form label-well-code="right" label-width="110px">
        <el-form-item label="包含闸井">
          <group-list-well ref="listwell" :id="groupForm.id"/>
          <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="addWell">添加闸井</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div class="group-list">
      <el-form label-well-code="right" label-width="110px">
        <el-form-item label="告警通知接收人">
          <group-list-user ref="listuser" :id="groupForm.id"/>
          <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="addPerson">添加人员</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="12">
        <el-form label-well-code="right" label-width="110px">
          <el-form-item label="">
            <el-row>
              <el-button :loading="btnLoading" type="primary" icon="el-icon-s-claim" @click="save">保存</el-button>
              <el-button icon="el-icon-back" @click="back">返回</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <add-user ref="adduser" @watchChild="refreshUser"/>
    <add-well ref="addwell" @watchChild="refreshWell"/>
  </div>
</template>

<script>
import GroupListWell from './components/groupListWell'
import DeptSelect from '@/components/DeptSelect'
import GroupListUser from './components/groupListUser'
import AddUser from './components/addUser'
import AddWell from './components/addWell'
import { editGroup } from '@/api/group'

export default {
  name: 'EditGroup',
  components: { AddWell, AddUser, GroupListUser, GroupListWell, DeptSelect },
  data() {
    return {
      groupForm: {
        id: '',
        groupName: '', // 组名称
        deptid: '' // 组织机构
      },
      rules: {
        groupName: [{ required: true, message: '组名称必填', trigger: ['blur', 'change'] }],
        deptid: [{ required: true, message: '所属派出所必选', trigger: ['blur', 'change'] }]
      }, // 前端校验规则
      btnLoading: false, // 按钮加载动画
      deptShow: false // 组织机构是否显示
    }
  },
  created() {
    this.groupForm.id = this.$route.query.id
    this.groupForm.groupName = this.$route.query.groupName
    this.groupForm.deptid = this.$route.query.deptid
  },
  methods: {
    // 添加井
    addWell() {
      this.$refs.addwell.initDialog(this.groupForm.id)
    },
    // 添加人
    addPerson() {
      this.$refs.adduser.initDialog(this.groupForm.id)
    },
    // 刷新用户列表
    refreshUser() {
      this.$refs.listuser.fetchData()
    },
    // 刷新井列表
    refreshWell() {
      this.$refs.listwell.fetchData()
    },
    // 保存
    save() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 调用后台请求
          this.btnLoading = true
          editGroup(this.groupForm).then(response => {
            if (response.code === 200) {
              this.$message.success('保存成功!')
            }
            this.btnLoading = false
          }).catch(() => {
            this.btnLoading = false
          })
        }
      })
    },
    // 返回
    back() {
      this.$router.back()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .main-form{
    margin: 20px 30px;
    padding: 10px;
  }
  .group-list{
    width:80%;
    .el-table td{
      padding:3px 0 !important;
    }
  }
</style>