<template>
  <div class="data-privilege">
    <div v-loading="loading" class="privilege-part privilege-header">
      <!-- 正文信息 -->
      <div class="privilege-header-top">
        <div class="part-box-header">
          <h1 class="part-box-title">{{ userName }}</h1>
          <div>
            <el-button type="primary" icon="icon icon-save-white" @click="save"
              >保存</el-button
            >
            <el-button type="danger" plain icon="icon icon-back" @click="back"
              >返回</el-button
            >
          </div>
        </div>
        <el-form
          ref="form"
          :inline="true"
          :model="form"
          inline-message
          class="form-tight"
          label-position="left"
        >
          <el-form-item label="审核权限" label-width="120px">
            <el-radio-group v-model="form.auditAuthority" class="input">
              <el-radio label="FIRST">初级</el-radio>
              <el-radio label="SECOND">中级</el-radio>
              <el-radio label="THIRD">高级</el-radio>
            </el-radio-group></el-form-item
          >
          <el-form-item style="margin-left: 60px">
            <el-button type="danger" plain size="small" @click="clear"
              >清空</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="part-tabs">
        <div class="part-tabs-item is-active" @click="activeName = 'tab1'">
          <div class="part-tabs-name">关联课程</div>
        </div>
      </div>
    </div>
    <div class="privilege-part privilege-body">
      <div v-if="activeName === 'tab1'">
        <div class="box-justify">
          <el-switch
            v-model="form.defaultStatusCourse"
            active-text="全部课程"
            @change="(enabled) => saveDefaultStatus('Course', enabled)"
          ></el-switch>
          <div v-if="!form.defaultStatusCourse">
            <el-button
              size="small"
              type="danger"
              icon="icon icon-delete-white"
              :disabled="noBatchSelectedCourse"
              @click="deleteBatch('Course')"
              >删除</el-button
            >
            <el-button
              size="small"
              type="primary"
              icon="icon icon-plus-white"
              @click="addCourse"
              >添加</el-button
            >
          </div>
        </div>
        <div v-if="!form.defaultStatusCourse" class="privilege-table">
          <el-table
            ref="tableCourse"
            :data="tableDataCourse"
            resizable
            @selection-change="selectChange"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column width="85" label="课程ID">
              <span slot-scope="scope">{{ scope.row.courseId }}</span>
            </el-table-column>
            <el-table-column width="200" label="课程代码">
              <span slot-scope="scope">{{ scope.row.courseCode }}</span>
            </el-table-column>
            <el-table-column label="课程名称">
              <span slot-scope="scope">{{ scope.row.courseName }}</span>
            </el-table-column>
            <el-table-column width="100" label="层次">
              <span slot-scope="scope">{{ scope.row.courseLevel }}</span
              >>
            </el-table-column>
          </el-table>
          <div class="part-page">
            <el-pagination
              v-if="paginationShow"
              :current-page="currentPageCourse"
              :page-size="pageSizeCourse"
              :page-sizes="[10, 20, 50, 100, 200, 300]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCourse"
              @current-change="handleCurrentChangeCourse"
              @size-change="handleSizeChangeCourse"
            />
          </div>
        </div>
      </div>
    </div>

    <DataPrevillegeAddCourseDialog
      ref="addCourseDialog"
      :user-id="form.userId"
      :root-org-id="form.rootOrgId"
      @reload="init"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { QUESTION_API } from "@/constants/constants.js";
import { object2QueryString } from "@/utils/utils";
import DataPrevillegeAddCourseDialog from "./data_previllege_add_course";

export default {
  name: "DataPrevillege",
  components: {
    DataPrevillegeAddCourseDialog,
  },
  data() {
    return {
      userName: "",
      rolePrivileges: {
        user_data_rule_setting: false,
      },
      loading: false,
      style: {
        label_width_tab1: "160px",
        label_width_tab2: "160px",
        label_width_tab3: "160px",
      },
      activeName: "tab1",
      toActiveName: null,
      form: {
        userId: "",
        rootOrgId: null,
        defaultStatusCourse: false,
        auditAuthority: "",
      },
      paginationShow: false,
      selectedChanged: false,
      tableDataCourse: [],
      noBatchSelectedCourse: true,
      currentPageCourse: 1,
      pageSizeCourse: 10,
      totalCourse: 10,
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  async created() {
    await this.initPrivileges();
    if (!this.rolePrivileges.user_data_rule_setting) {
      this.$alert("没有权限访问！", "提示", {
        confirmButtonText: "确定",
        callback: () => {
          this.back();
        },
      });
      return;
    }

    this.form.userId = this.$route.params.userId;
    this.form.rootOrgId = this.$route.params.rootOrgId;
    await this.init();
    this.$nextTick(function () {
      this.paginationShow = true;
    });
  },
  mounted() {
    setTimeout(() => {
      this.$store.commit("UPDATE_CURRENT_PATHS", ["用户管理", "权限设置"]);
    }, 200);
  },
  methods: {
    async save() {
      try {
        await this.$httpWithMsg.post(
          QUESTION_API + "/user/updateAuditAuthority",
          {
            auditAuthority: this.form.auditAuthority,
            id: this.form.userId,
          }
        );

        this.$notify({
          type: "success",
          message: "保存成功",
        });
        await this.back();
      } catch (error) {
        console.log(error);
      }
    },
    clear() {
      this.form.auditAuthority = null;
    },
    async init() {
      this.$httpWithMsg
        .get(QUESTION_API + "/user/" + this.form.userId)
        .then((res) => {
          this.userName = res.data.name + "(" + res.data.roleNamesStr + ")";
          if (!this.form.auditAuthority)
            this.form.auditAuthority = res.data.auditAuthority;
        });
      const reqs = [];
      const defaultPrevilleges = ["COURSE"];
      for (const defP of defaultPrevilleges) {
        let url =
          QUESTION_API +
          "/user/data/rule/default/status?" +
          `userId=${this.form.userId}&type=${defP}`;
        reqs.push(this.$httpWithMsg.post(url));
      }

      const preVillegeList = ["Course"];

      for (const defP of preVillegeList) {
        let url =
          QUESTION_API + "/user/data/rule/list/for/" + defP.toLowerCase();
        const pageNo = this.$data["currentPage" + defP];
        const pageSize = this.$data["pageSize" + defP];
        reqs.push(
          this.$httpWithMsg.post(url, {
            userId: this.form.userId,
            pageNo,
            pageSize,
          })
        );
      }

      try {
        this.loading = true;

        const promiseAll = await Promise.all(reqs);
        // console.log(promiseAll);
        this.form.defaultStatusCourse = promiseAll[0].data;
        this.tableDataCourse = promiseAll[1].data.content;
        this.currentPageCourse = promiseAll[1].data.number;
        this.totalCourse = promiseAll[1].data.totalElements;
      } finally {
        this.loading = false;
      }
    },
    noBatchSelected(type) {
      if (!this.$refs[type + "Table"]) return false;
      console.log(this.$refs[type + "Table"].selection.length);
      return this.$refs[type + "Table"].selection.length;
    },
    selectChange() {
      this.noBatchSelectedCourse =
        this.$refs.tableCourse && !this.$refs.tableCourse.selection.length;
    },
    handleSizeChangeCourse(val) {
      this.pageSizeCourse = val;
      this.currentPageCourse = 1;
      this.init();
    },
    handleCurrentChangeCourse(val) {
      this.currentPageCourse = val;
      this.init();
    },
    back() {
      this.$router.back();
    },
    async saveDefaultStatus(type, enabled) {
      try {
        await this.$httpWithMsg.post(
          QUESTION_API +
            "/user/data/rule/default/status/update?" +
            object2QueryString({
              enabled,
              type: type.toUpperCase(),
              userId: this.form.userId,
            })
        );
        this.$notify({
          type: "success",
          message: "更新成功",
        });
      } catch (error) {
        this.form["defaultStatus" + type] = !enabled;
      }
    },
    async deleteBatch(type) {
      const refIds = this.$refs["table" + type].selection.map((v) => v.refId);

      try {
        await this.$httpWithMsg.post(QUESTION_API + "/user/data/rule/delete", {
          refIds,
          type: type.toUpperCase(),
          userId: this.form.userId,
        });

        this.$notify({
          type: "success",
          message: "删除成功",
        });
        await this.init();
      } catch (error) {
        console.log(error);
      }
    },
    addCourse() {
      this.$refs.addCourseDialog.openDialog();
    },
    async initPrivileges() {
      let params = new URLSearchParams();
      params.append(
        "privilegeCodes",
        Object.keys(this.rolePrivileges).toString()
      );
      var url = QUESTION_API + "/rolePrivilege/checkPrivileges?" + params;
      await this.$httpWithMsg.post(url).then((response) => {
        this.rolePrivileges = response.data;
      });
    },
  },
};
</script>
