<template>
  <div class="mark-param-marker-leader">
    <div class="box-justify part-box part-box-pad">
      <div>
        <p class="tips-info">
          1.科组长支持查看该课程下全部学生的成绩及查看分析报告！
        </p>
        <p class="tips-info">2.支持绑定多个科组长！</p>
      </div>
      <div>
        <mark-status field="markerLeader"></mark-status>
      </div>
    </div>

    <div class="part-box part-box-pad">
      <table class="table">
        <colgroup>
          <col />
          <col width="100" />
        </colgroup>
        <tr>
          <th>科组长</th>
          <th>操作</th>
        </tr>
        <tr>
          <td>
            <el-tag
              v-for="user in users"
              :key="user.id"
              closable
              size="medium"
              :disable-transitions="false"
              class="mb-1 mr-1"
              @close="toDeleteUser(user)"
            >
              {{ user.label }}
            </el-tag>
          </td>
          <td>
            <el-button class="btn-primary" type="text" @click="toEdit"
              >编辑</el-button
            >
          </td>
        </tr>
      </table>
    </div>

    <div class="text-center">
      <el-button type="primary" :disabled="loading" @click="submit"
        >提交</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>

    <select-type-user
      ref="SelectTypeUser"
      special-privilege="SUBJECT_HEADER"
      dialog-title="选择科组长"
      :user-ids="curMarkLeaders"
      :user-limit-count="0"
      @confirm="userSelected"
    ></select-type-user>
  </div>
</template>

<script>
import { examBindMarkLeader } from "../../api";
import SelectTypeUser from "../SelectTypeUser.vue";
import { mapState, mapMutations } from "vuex";
import MarkStatus from "./MarkStatus.vue";

export default {
  name: "mark-param-marker-leader",
  components: { SelectTypeUser, MarkStatus },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      users: [],
    };
  },
  computed: {
    ...mapState("markParam", ["markLeader", "markParamInfos"]),
    curMarkLeaders() {
      return this.users.map((item) => item.id);
    },
  },
  mounted() {
    this.users = this.markLeader.map((item) => {
      return { ...item };
    });
  },
  methods: {
    ...mapMutations("markParam", ["setMarkLeader"]),
    toDeleteUser(user) {
      this.users = this.users.filter((item) => item.id !== user.id);
    },
    userSelected(users) {
      this.users = users;
    },
    toEdit() {
      this.$refs.SelectTypeUser.open();
    },
    async submit() {
      if (!this.users.length) {
        this.$message.error("请选择科组长");
        return;
      }

      if (this.loading) return;
      this.loading = true;

      const markLeader = this.users.map((item) => {
        return {
          id: item.id,
          name: item.name,
          orgName: item.orgName,
          loginName: item.loginName,
          label: item.label,
        };
      });
      const res = await examBindMarkLeader({
        id: this.markParamInfos.basicPaperInfo.id,
        markLeader,
      }).catch(() => {});
      this.loading = false;
      if (!res) return;
      this.setMarkLeader(markLeader);
      this.$message.success("绑定成功！");
      this.$emit("confirm");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
