<template>
  <div id="courseCheck">
    <el-dialog
      @opened="prepareEnd"
      :visible.sync="dialogVisibleTableBoxs"
      width="1100px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">添加课程</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisibleTableBoxs = false"
          />
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <!-- 搜索框 -->
        <el-input
          style="width: 230px; margin: 0px 10px"
          :size="size"
          v-model="formData['key']"
          placeholder="课程标题/课程编码/标题前缀"
        ></el-input>
        <el-button :size="size" type="primary" @click="getInfos(1)"
          >查询</el-button
        >
        <el-button :size="size" @click="getInfos(0)">重置</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        @selection-change="selectCheck"
        :row-key="getRowKeys"
        :header-cell-style="{
          'background-color': '#eee',
          padding: '8px',
          color: '#333',
        }"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
          header-align="center"
          :selectable="checkboxT"
          :reserve-selection="true"
        >
        </el-table-column>
        <template v-for="(item, index) in tableSet">
          <el-table-column
            v-if="item.scope !== 'inputs'"
            :width="item.width"
            :key="index"
            :label="item.label"
            align="center"
            :show-overflow-tooltip="true"
            header-align="center"
          >
            <template slot-scope="scope">
              <span v-if="item.scope === 'Status'">
                {{
                  scope.row[item.prop] === 1
                    ? "发布"
                    : scope.row[item.prop] === 0
                    ? "未发布"
                    : "未知"
                }}
              </span>
              <span v-else>{{ scope.row[item.prop] }}</span></template
            >
          </el-table-column></template
        >
      </el-table>
      <pagination
        :total="total"
        :pageSize="formData.pageSize"
        :currentPage="formData.pageNum"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTableBoxs = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="activeLists.length === 0"
          @click="submitTab"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
export default {
  components: { pagination },
  data() {
    return {
      size: "small",
      dialogVisibleTableBoxs: false,
      tableData: [],
      tableSet: [
        { label: "课程编码", prop: "code", width: "140px" },
        { label: "名称前缀", prop: "prefixName", width: "160px" },
        { label: "课程标题", prop: "courseName" },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "Status",
          width: "120px",
        },
      ],
      formData: {},
      activeLists: [],
      disCheckList: [],
      total: 0,
    };
  },
  methods: {
    /**
     * 初始
     */
    openBox(obj, array, eduId) {
      this.disCheckList = array;
      this.formData = JSON.parse(JSON.stringify(obj));
      //获取业务层次-课程
      this.getInfos();
      this.dialogVisibleTableBoxs = true;
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
      });
    },
    /**
     * 搜索数据
     */
    getInfos(int) {
      //重置0
      if (int === 0) {
        this.formData.pageSize = 10;
        this.formData.pageNum = 1;
        delete this.formData.majorId;
        delete this.formData.subjectId;
        delete this.formData.key;
      }
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      this.$api.inquireCourseListS(this.formData).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    /**
     * 开启动画结束执行
     */
    prepareEnd() {
      this.activeLists = []; //初始清空勾选数据
    },
    /**
     * 提交回调数据
     */
    submitTab() {
      this.$message.success("添加成功");
      this.dialogVisibleTableBoxs = false;
      this.$emit("backData", this.activeLists);
    },
    selectCheck(value) {
      this.activeLists = value;
    },
    checkboxT(row, index) {
      if (this.disCheckList.indexOf(row.courseId) !== -1) {
        return false;
      } else {
        return true;
      }
    },
    getRowKeys(row) {
      return row.courseId;
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.getInfos();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.getInfos();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
