<template>
  <div id="moreListCheck">
    <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">
        <div style="margin-bottom: 14px">
          筛选：
          <el-button
            :size="size"
            v-for="(item, index) in type"
            :key="index"
            :type="item.value === activeType ? 'primary' : ''"
            @click="getInfos(1, item.value)"
            >{{ item.label }}</el-button
          >
        </div>
        <!-- 搜索框 -->
        <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="keyId"
        v-loading="loading"
        :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 compayList(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 },
  props:["bfCourseId"],
  data() {
    return {
      size: "small",
      dialogVisibleTableBoxs: false,
      tableData: [],
      tableSet: [
        { label: "编码", prop: "code", width: "140px" },
        { label: "名称前缀", prop: "prefixName", width: "160px" },
        { label: "模块标题", prop: "moduleName", type: 1 },
        { label: "章标题", prop: "name", type: 2 },
        { label: "节标题", prop: "name", type: 3 },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "Status",
          width: "120px",
        },
      ],
      type: [
        {
          label: "模块",
          value: 1,
        },
        {
          label: "章",
          value: 2,
        },
        {
          label: "节",
          value: 3,
        },
      ],
      formData: {},
      activeLists: [],
      disCheckList: [],
      total: 0,
      activeType: 1, //默认第一次进来选中模块
      loading: false,
    };
  },
  computed: {
    compayList: function () {
      return function (array) {
        let ary = [];
        ary = array.filter((item) => {
          if (item.type) {
            if (item.type === this.activeType) {
              return item;
            }
          } else {
            return item;
          }
        });
        return ary;
      };
    },
  },
  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, activeType) {
      //重置0
      if (int === 0) {
        this.formData.pageSize = 10;
        this.formData.pageNum = 1;
        delete this.formData.key;
      }
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (activeType) {
        this.activeType = activeType;
      }
      this.changeType(this.activeType);
    },
    changeType(int) {
      this.activeType = int;
      this.loading = true;
      switch (int) {
        case 1:
          //获取模块列表
          this.getModuleList();
          break;
        case 2:
          //获取章列表
          this.getChapterList();
          break;
        case 3:
          //获取节列表
          this.getSectionList();
          break;

        default:
          break;
      }
    },
    /**
     * 模块
     */
    getModuleList() {
      this.$api
        .inquireCourseListmodule(this.formData)
        .then((res) => {
          res.rows.forEach((item) => {
            item.keyId = `1-${item.moduleId}`;
            item.name = item.moduleName;
          });
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 章
     */
    getChapterList() {
      this.$api
        .inquireCourseListchapter(this.formData)
        .then((res) => {
          res.rows.forEach((item) => {
            item.keyId = `2-${item.chapterId}`;
          });
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 节
     */
    getSectionList() {
      this.$api
        .inquireCourseSection(this.formData)
        .then((res) => {
          res.rows.forEach((item) => {
            item.keyId = `3-${item.sectionId}`;
          });
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 开启动画结束执行
     */
    prepareEnd() {
      this.activeLists = []; //初始清空勾选数据
    },
    /**
     * 提交回调数据
     */
    submitTab() {
      try {
        let ary = this.activeLists.map((item) => {
          const splitStr = item.keyId.split("-").map(Number);
          return {
            newActive:true,
            type: splitStr[0],
            menuId: splitStr[1],
            menuName: item.name,
            code: item.code,
            courseId:this.bfCourseId,
            publishStatus: item.publishStatus,
            durationTime: item.durationTime,
            sectionType: splitStr[0] === 3 ? item.sectionType : "",
            auditionMinute:
              splitStr[0] === 3
                ? this.$methodsTools.secondToDate(item.durationTime, false)
                : undefined,
          };
        });
        this.$message.success("添加成功");
        this.dialogVisibleTableBoxs = false;
        this.$emit("backData", ary);
      } catch (error) {
        this.$message.error("添加失败,请联系管理员");
      }
    },
    selectCheck(value) {
      this.activeLists = value;
    },
    checkboxT(row, index) {
      if (this.disCheckList.indexOf(row.keyId) !== -1) {
        return false;
      } else {
        return true;
      }
    },
    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>
