<template>
  <div class="grading-user-manage">
    <div class="part-box-head">
      <div class="part-box-head-right">
        <Button
          shape="circle"
          type="success"
          icon="recode-white icon"
          @click="toAdd"
          >新增账号</Button
        >
        <Button
          shape="circle"
          type="success"
          icon="upload-white icon"
          @click="toExport"
          >导出表格</Button
        >
      </div>
    </div>
    <Table
      ref="TableList"
      :columns="columns"
      :data="users"
      disabled-hover
      border
    ></Table>

    <!-- modify-grading-user -->
    <modify-grading-user
      :instance="curUser"
      @modified="getList"
      ref="ModifyGradingUser"
    ></modify-grading-user>
  </div>
</template>

<script>
import { gradingUserList, deleteGradingUser, resetPwd } from "@/api";
import ModifyGradingUser from "./components/ModifyGradingUser";
import { ROLE_TYPE, MARKER_RIGHT_TYPE } from "@/constants/enumerate";

export default {
  name: "grading-user-manage",
  components: { ModifyGradingUser },
  data() {
    return {
      subjectId: this.$route.params.subjectId,
      workId: this.$route.params.workId,
      subject: "",
      users: [],
      curUser: {},
      columns: [
        {
          type: "index",
          title: "序号",
          width: 80,
          align: "center"
        },
        {
          title: "科目",
          key: "subject"
        },
        {
          title: "账号",
          key: "loginName"
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "角色",
          key: "roleName"
        },
        {
          title: "权限",
          key: "rightName"
        },
        {
          title: "权重",
          key: "weight"
        },
        {
          title: "操作",
          key: "action",
          width: 130,
          align: "center",
          className: "table-action",
          render: (h, param) => {
            let actions = [
              {
                icon: "md-settings",
                attrs: {
                  title: "重置密码"
                },
                action: () => {
                  this.toResetPwd(param.row);
                }
              },
              {
                icon: "md-create",
                attrs: {
                  title: "编辑"
                },
                action: () => {
                  this.toEdit(param.row);
                }
              },
              {
                icon: "md-trash",
                classes: ["icon-danger"],
                attrs: {
                  title: "删除"
                },
                action: () => {
                  this.toDelete(param.row);
                }
              }
            ];
            return h("div", this.$tableIconAction(h, actions));
          }
        }
      ]
    };
  },
  mounted() {
    this.subject = this.subjectId.split("-")[1];
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        workId: this.workId,
        subject: this.subject
      };
      const data = await gradingUserList(datas);
      this.users = data.map(item => {
        item.roleName = ROLE_TYPE[item.role];
        item.rightName = MARKER_RIGHT_TYPE[item.markRight];
        return item;
      });
    },
    async toResetPwd(row) {
      await resetPwd({ userId: row.id, password: "123456" });
      this.$Message.success("重置密码成功！");
    },
    toAdd() {
      this.curUser = {
        workId: this.workId,
        subject: this.subject
      };
      this.$refs.ModifyGradingUser.open();
    },
    toEdit(row) {
      this.curUser = row;
      this.$refs.ModifyGradingUser.open();
    },
    toDelete(row) {
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前账号吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteGradingUser(id);
      this.$Message.success("删除成功！");
      this.getList();
    },
    toExport() {
      window.open(
        `${this.GLOBAL.domain}/api/export/users?workId=${this.workId}`
      );
    }
  }
};
</script>
