<template>
  <div id="bankCheck">
    <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-select
          style="margin-left: 10px"
          v-model="formData['examType']"
          placeholder="请选择题卷类型"
          :size="size"
          @change="getInfos(1)"
        >
          <el-option
            v-for="(items, indexs) in examTypeList"
            :key="indexs"
            :label="items.label"
            :value="items.value"
          ></el-option>
        </el-select>
        <!-- 搜索框 -->
        <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',
        }"
        max-height="600px"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
          header-align="center"
          :selectable="checkbox"
          :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-if="item.scope === 'businessType'">
                {{ scope.row[item.prop1] }}-{{ scope.row[item.prop2] }}
              </span>
              <span v-else-if="item.scope === 'type'">
                {{
                  scope.row[item.prop] === 1
                    ? "模块卷"
                    : scope.row[item.prop] === 2
                    ? "章卷"
                    : scope.row[item.prop] === 3
                    ? "试卷"
                    : "未知"
                }}
              </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: [],
      examTypeList: [
        {
          label: "模块卷",
          value: 1,
        },
        {
          label: "章卷",
          value: 2,
        },
        {
          label: "试卷",
          value: 3,
        },
      ],
      tableSet: [
        { label: "题卷编码", prop: "code", width: "120" },
        { label: "题卷前缀", prop: "prefixName", width: "120" },
        { label: "题卷名称", prop: "name", width: "300" },
        { label: "科目", prop: "subjectName", width: "160" },
        {
          label: "业务层次",
          prop1: "projectName",
          prop2: "businessName",
          width: "300",
          scope: "businessType",
        },
        { label: "教育类型", prop: "educationName", width: "160" },
        { label: "题库类型", prop: "type", scope: "type", width: "120" },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "Status",
          width: "120",
        },
      ],
      formData: {},
      activeLists: [],
      disCheckList: [],
      sujectTypeList: [],
      total: 0,
    };
  },
  methods: {
    /**
     * 初始
     */
    openBox(obj, array) {
      this.disCheckList = array;
      this.formData = JSON.parse(JSON.stringify(obj));
      //获取业务层次-科目
      this.getsubjectInit();
      //获取业务层次-课程
      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.subjectId;
        delete this.formData.key;
      }
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      switch (this.formData.examType) {
        case 1:
          this.$api.inquireBankModule(this.formData).then((res) => {
            for (let k = 0; k < res.rows.length; k++) {
              res.rows[k].ids = 1 + "-" + res.rows[k].moduleExamId;
              res.rows[k].type = 1;
              res.rows[k].name = res.rows[k].moduleName;
            }
            this.tableData = res.rows;
            this.total = res.total;
          });
          break;
        case 2:
          this.$api.inquirebankchapterList(this.formData).then((res) => {
            for (let k = 0; k < res.rows.length; k++) {
              res.rows[k].ids = 2 + "-" + res.rows[k].chapterExamId;
              res.rows[k].type = 2;
              res.rows[k].name = res.rows[k].name;
            }
            this.tableData = res.rows;
            this.total = res.total;
          });
          break;
        case 3:
          this.$api.inquirebankexamList(this.formData).then((res) => {
            for (let k = 0; k < res.rows.length; k++) {
              res.rows[k].ids = 3 + "-" + res.rows[k].examId;
              res.rows[k].type = 3;
              res.rows[k].name = res.rows[k].examName;
            }
            this.tableData = res.rows;
            this.total = res.total;
          });
          break;
        default:
          break;
      }
    },
    /**
     * 获取业务层次-科目
     */
    getsubjectInit() {
      this.$api
        .inquireCourseSubject({
          status: 1,
          businessId: this.formData.businessId,
        })
        .then((res) => {
          this.sujectTypeList = res.rows;
        });
    },
    /**
     * 开启动画结束执行
     */
    prepareEnd() {
      this.activeLists = []; //初始清空勾选数据
    },
    /**
     * 提交回调数据
     */
    submitTab() {
      this.$message.success("添加成功");
      this.dialogVisibleTableBoxs = false;
      this.$emit("backData", this.activeLists);
    },
    selectCheck(value) {
      this.activeLists = value;
    },
    checkbox(row, index) {
      if (this.disCheckList.indexOf(row.ids) !== -1) {
        return false;
      } else {
        return true;
      }
    },
    getRowKeys(row) {
      return row.ids;
    },
    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>
