<template>
  <div class="group-total-wrapper">
    <!-- <div class="search-wrapper">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-input v-model="groupName" placeholder="请输入组名" />
        </el-col>
        <el-col :span="18">
          <el-button type="success">搜索</el-button>
        </el-col>
      </el-row>
    </div> -->
    <div class="tools-wrapper">
      <el-button type="primary" @click="addGroupDialog = true">新增</el-button>
      <el-button type="warning" :disabled="isableEdit" @click="editGroupDialog = true">编辑</el-button>
      <el-button type="danger" :disabled="isableDelete" @click="deleteGroup">删除</el-button>
    </div>
    <div class="group-list-wrapper">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <el-tooltip class="item" effect="dark" content="操作组">
            <span class="role-span">组名</span>
          </el-tooltip>
        </div>
        <div class="checks-wrapper">
          <div v-for="item in groupList" :key="item.groupId" class="checks">
            <input type="checkbox" :checked="item.checked" @input="groupInput($event, item)">{{ '&nbsp;&nbsp;' + item.groupName }}
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="添加组名"
      :visible.sync="addGroupDialog"
      width="27%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addForm"
        :model="formInfo"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <!-- <el-row>
          <el-col :span="12"> -->
        <el-form-item
          label="组名:"
          prop="groupName"
        >
          <el-input
            v-model="formInfo.groupName"
          />
        </el-form-item>
        <!-- </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGroupDialog = false">取消</el-button>
        <el-button type="primary" @click="addGroupConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑组名"
      :visible.sync="editGroupDialog"
      width="27%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editForm"
        :model="formInfo"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item
          label="组名"
          prop="groupName"
        >
          <el-input
            v-model="formInfo.groupName"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editGroupDialog = false">取消</el-button>
        <el-button type="primary" @click="editGroupConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllGroup, addGroup, deleteGroup } from '@/api/industry.js'
import { editGroup } from '../../../api/industry'
export default {
  data() {
    return {
      // 所有组名
      groupList: [
      ],
      // 新增组名对话框
      addGroupDialog: false,
      // 编辑组名对话框
      editGroupDialog: false,
      // 表单信息
      formInfo: {
        groupName: ''
      },
      // 控制是否编辑按钮可用
      isableEdit: true,
      // 控制是否删除按钮可以用
      isableDelete: true,
      // 规则
      rules: {
        groupName: [
          { required: true, message: '请输入组名', trigger: 'blur' },
          { min: 1, message: '长度大于1个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 是否可以编辑组名
    // isableEdit() {
    //   return this.groupList.filter(item => item.checked === true).length === 0
    // },
    // 是否可以删除组名
    // isableDelete() {
    //   return this.groupList.filter(item => item.checked === true).length > 0
    // }
  },
  mounted() {
    // 获取所有分组
    this.initGroups()
  },
  methods: {
    // 初始化所有的用户组
    async initGroups() {
      await getAllGroup().then(res => {
        this.groupList = [...res.content]
        for (let i = 0; i < this.groupList.length; i++) {
          this.groupList[i].checked = false
        }
      })
      this.isableEdit = true
      this.isableDelete = true
    },
    // 确认提交当前的用户组
    addGroupConfirm() {
      // this.$refs['addForm'].validate((valid) => {
      //   if (valid) {
      //     alert('keyizengjia')
      //   } else {
      //     alert('bukeytianjia')
      //   }
      // })
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          // 调用接口提交用户信息
          addGroup(this.formInfo.groupName).then(res => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.initGroups()
            this.addGroupDialog = false
          }, () => {
            this.$message.error('提交失败')
          })
        } else {
          this.$message.error('请输入组名')
        }
      })
    },
    // 删除
    deleteGroup() {
      this.$confirm('此操作不可逆, 确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(
        () => {
          deleteGroup(this.groupList.filter(item => item.checked).map(item => item.groupId)).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.initGroups()
          }, () => {
            this.$message.error('删除失败')
          })
        }
      )
    },
    // 编辑组名对话框确认提交
    editGroupConfirm() {
      this.editGroupDialog = false
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          // 调用接口
          editGroup(this.groupList.filter(item => item.checked)[0].groupId, this.formInfo.groupName).then(res => {
            console.log(res, 'res')
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.initGroups()
          }, () => {
            this.$message.error('编辑失败')
          })
        } else {
          this.$message.error('请输入组名')
        }
      })
    },
    // 调用 input 的选中和取消事件处理
    groupInput($event, item) {
      // console.log($event, item)
      item.checked = !item.checked
      this.isableEdit = !(this.groupList.filter(item => item.checked).length === 1)
      this.isableDelete = !(this.groupList.filter(item => item.checked).length > 0)
    }
  }
}
</script>

<style lang="scss">
  .group-total-wrapper {
    padding: 20px;
    .search-wrapper {
      margin-left: 10px;
    }
    .tools-wrapper {
      margin: 10px;
    }
    .group-list-wrapper {
      margin: 15px 15px 15px 10px;
    }
  }
</style>
