<template>
  <div class="grading-group-manage">
    <div class="part-box-top">
      <Button type="success" icon="md-add" @click="toAddGroup">新增分组</Button>
    </div>
    <div class="group-user part-box" v-if="users.length">
      <draggable group="user" :list="users">
        <Tag
          color="primary"
          size="large"
          v-for="(user, uindex) in users"
          :key="uindex"
        >
          {{ user.name }}
        </Tag>
      </draggable>
    </div>
    <div class="group-list">
      <div class="group-box" v-for="(group, gindex) in groups" :key="gindex">
        <div class="group-head">
          <h2 class="group-name">{{ group.name }}</h2>
          <div class="group-del" @click="delGroup(gindex)">
            <Icon type="md-close" />
          </div>
        </div>
        <div class="group-body">
          <draggable class="group-drag" group="user" :list="group.markers">
            <Tag
              color="primary"
              size="large"
              v-for="(user, uindex) in group.markers"
              :key="uindex"
              @on-close="removeGroupUser(uindex, group)"
              closable
            >
              {{ user.name }}
            </Tag>
          </draggable>
        </div>
      </div>
    </div>
    <div class="group-action">
      <Button
        type="primary"
        @click="submit"
        :disabled="!this.groups.length || isSubmit"
        >确认</Button
      >
    </div>
  </div>
</template>

<script>
import {
  gradingGroupList,
  markUserList,
  updateGradingGroup,
  deleteGradingGroup
} from "@/api";
import draggable from "vuedraggable";

export default {
  name: "grading-group-manage",
  components: { draggable },
  data() {
    return {
      workId: this.$route.params.workId,
      subjectId: this.$route.params.subjectId,
      groups: [],
      users: [],
      isSubmit: false
    };
  },
  mounted() {
    this.getGroupList();
    this.getMarkUserList();
  },
  methods: {
    async getGroupList() {
      this.groups = await gradingGroupList(this.subjectId);
    },
    async getMarkUserList() {
      const data = await markUserList({
        workId: this.workId,
        subjectId: this.subjectId.split("-")[1]
      });
      this.users = data.filter(user => !user.groupId);
    },
    submit() {
      if (this.isSubmit) return;
      const hasNoneGroup = this.groups.some(group => !group.markers.length);
      if (hasNoneGroup) {
        this.$Modal.confirm({
          title: "操作警告",
          content: "当前分组列表中存在空组，确定要保存空组吗？",
          onOk: () => {
            this.save();
          }
        });
        return;
      }
      this.save();
    },
    async save() {
      this.isSubmit = true;
      const toSaveAll = this.groups.map(group => {
        return updateGradingGroup(this.subjectId, group);
      });
      const result = await Promise.all(toSaveAll).catch(() => {});
      this.isSubmit = false;
      if (!result) {
        this.$Message.error("保存失败，请重新尝试！");
        return;
      }
      this.$Message.success("保存成功！");
    },
    toAddGroup() {
      this.groups.push({
        id: "",
        name: "评卷组" + (this.groups.length + 1),
        markers: [],
        subject: this.subjectId.split("-")[1],
        workId: this.workId
      });
    },
    removeGroupUser(uindex, group) {
      this.users.push({ ...group.markers[uindex] });
      group.markers.splice(uindex, 1);
    },
    delGroup(gindex) {
      const group = this.groups[gindex];
      if (!group.id) {
        this.removeGroup(gindex);
        return;
      }

      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前账号吗？",
        onOk: async () => {
          await deleteGradingGroup(this.subjectId, group.id);
          this.removeGroup(gindex);
          this.$Message.success("删除成功！");
        }
      });
    },
    removeGroup(gindex) {
      const group = this.groups[gindex];
      this.users = [...this.users, ...group.markers];
      this.groups.splice(gindex, 1);
      this.groups.map((group, index) => {
        group.name = "评卷组" + (index + 1);
      });
    }
  }
};
</script>
