<template>
  <el-dialog
    ref="dialog"
    title="添加课程"
    width="800px"
    :visible.sync="visible"
    :modal="false"
    append-to-body
    custom-class="side-dialog"
    @close="closeDialog"
  >
    <el-form
      ref="form"
      class="part-filter-form padding-none"
      :model="form"
      :rules="rules"
      :inline="true"
      label-position="right"
      label-width="100px"
    >
      <el-form-item label="课程名称">
        <el-input v-model="form.name" placeholder="请输入课程名称" />
      </el-form-item>
      <el-form-item label="课程层次">
        <el-select v-model="form.level" placeholder="请选择" clearable>
          <el-option
            v-for="item in levelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="handleSearchBtn"> 查询 </el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="table"
      class="part-box-border"
      :data="tableData"
      resizable
      stripe
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column width="85" label="课程ID">
        <span slot-scope="scope">{{ scope.row.id }}</span>
      </el-table-column>
      <el-table-column width="200" label="课程代码">
        <span slot-scope="scope">{{ scope.row.code }}</span>
      </el-table-column>
      <el-table-column label="课程名称">
        <span slot-scope="scope">{{ scope.row.name }}</span>
      </el-table-column>
      <el-table-column width="100" label="课程层次">
        <span slot-scope="scope">{{ scope.row.level | levelTypeFilter }}</span>
      </el-table-column>
    </el-table>
    <div class="part-page">
      <el-pagination
        v-if="paginationShow"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200, 300]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <div slot="footer">
      <el-button type="primary" :loading="loading" @click="submitForm"
        >确定</el-button
      >
      <el-button type="danger" plain @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { QUESTION_API } from "@/constants/constants";
import { LEVEL_TYPE } from "../constants/constants.js";
export default {
  name: "DataPrevillegeAddCourseDialog",
  props: {
    userId: { type: String, default: "" },
    rootOrgId: { type: [Number, String], default: null },
  },
  data() {
    return {
      visible: false,
      form: {
        name: "",
        level: "",
      },
      levelList: LEVEL_TYPE,
      rules: {},
      loading: false,
      paginationShow: false,
      tableData: [],
      noBatchSelected: true,
      currentPage: 1,
      pageSize: 10,
      total: 10,
    };
  },
  methods: {
    handleSearchBtn() {
      this.currentPage = 1;
      this.search();
    },
    async search() {
      var param = new URLSearchParams(this.form);
      var url =
        QUESTION_API +
        "/course/coursePageForDataRule/" +
        this.currentPage +
        "/" +
        this.pageSize +
        "?" +
        param +
        "&userId=" +
        this.userId +
        "&rootOrgId=" +
        this.rootOrgId;
      this.loading = true;
      return this.$httpWithMsg.get(url).then((response) => {
        this.tableData = response.data.content;
        this.currentPage = response.data.number;
        this.total = response.data.totalElements;
        this.loading = false;
        this.paginationShow = true;
      });
    },
    async openDialog() {
      this.visible = true;
      try {
        await this.search();
      } catch (error) {
        console.log(error);
        this.$notify({ type: "error", title: "获取课程列表失败" });
      }
    },
    closeDialog() {
      this.visible = false;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.search();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
    async submitForm() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        console.log("校验失败", error);
        return;
      }

      const refIds = this.$refs.table.selection.map((v) => v.id);
      console.log(refIds);
      if (refIds.length === 0) {
        this.$notify({ type: "warning", message: "请先选择一行或多行" });
        return;
      }

      try {
        this.loading = true;
        // await saveActivity(data);
        await this.$httpWithMsg.post(QUESTION_API + "/user/data/rule/add", {
          refIds,
          type: "COURSE",
          userId: this.userId,
        });
        this.$emit("reload");
        this.$notify({ title: "保存成功", type: "success" });
        this.closeDialog();
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
