<template>
  <div class="sort_box margin_bs">
    试卷排序：
    <el-radio-group v-model="form.type">
      <el-radio :label="1">顺序</el-radio>
      <el-radio :label="2">随机</el-radio>
    </el-radio-group>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span>{{ item.name }}</span>
        <el-radio v-model="radio" :label="1">取题</el-radio>
        <el-input-number
          style="margin: 0px 6px; width: 100px"
          v-model="form[item.key].qnum"
          @blur="blur(form[item.key], 'qnum')"
          controls-position="right"
          :min="0"
          size="mini"
        ></el-input-number>
        <el-radio
          v-model="form[item.key].randomNum"
          :label="1"
          :disabled="form[item.key].randomNum == 0 && index != 0"
          >顺序</el-radio
        >
        <el-input-number
          style="margin: 0px 6px; width: 100px"
          v-model="form[item.key].orderNum"
          controls-position="right"
          @blur="blur(form[item.key], 'orderNum')"
          :min="1"
          :max="4"
          size="mini"
        ></el-input-number>
        <el-radio
          v-model="form[item.key].randomNum"
          :label="0"
          :disabled="
            form.type == 1 || (form[item.key].randomNum == 1 && index != 0)
          "
          >随机</el-radio
        >
        <template v-if="form[item.key].knowledIds.length">
          <el-radio v-model="radio" :label="1">知识点取题</el-radio>
          <el-input-number
            style="margin: 0px 6px; width: 100px"
            v-model="form[item.key].knum"
            @blur="blur(form[item.key], 'knum')"
            controls-position="right"
            :min="0"
            :max="form[item.key].qnum"
            size="mini"
          ></el-input-number>
        </template>

        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handelClick(item.key)"
          >更多</el-button
        >
      </li>
    </ul>
    <Base-dialog
      title="选择知识点"
      width="660px"
      center
      :appendToBody="true"
      :isShow.sync="isShow"
      @submit="submit"
    >
      <el-table
        ref="table"
        :data="tableData"
        border
        @select="select"
        @select-all="select"
        row-key="knowledgeId"
      >
        <el-table-column
          :reserve-selection="true"
          type="selection"
          width="55"
          align="center"
        >
        </el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="knowledgeName"
          label="知识点标题"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 20px 0 0 200px"
        @current-change="getKnowledgeList"
        :current-page.sync="params.pageNum"
        :page-size="params.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </Base-dialog>
  </div>
</template>

<script>
import { knowledgeList } from "@/api/resource/volumeManagement";
export default {
  props: {
    formData: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isShow: false,
      list: [
        { name: "单选题", key: "singleChoice" },
        { name: "多选题", key: "multipleChoice" },
        { name: "判断题", key: "trueFalseQuestion" },
        { name: "案例题", key: "caseQuestion" },
      ],
      tableData: [{ name: 1 }],
      selectList: [],
      form: {},
      radio: 1,
      params: {},
      total: 0,
      key: "",
    };
  },
  methods: {
    blur(item, key) {
      if (!item[key]) {
        item[key] = 0;
      }
    },
    handleSizeChange(v) {
      this.params = {
        pageNum: 1,
        pageSize: v,
      };
      this.getKnowledgeList();
    },
    handleCurrentChange(v) {
      this.params.pageNum = v;
      this.getKnowledgeList();
    },
    handelClick(key) {
      this.isShow = true;
      this.key = key;
      this.params = {
        pageNum: 1,
        pageSize: 10,
      };
      this.$nextTick(() => {
        this.$refs.table.clearSelection();
      });
      this.getKnowledgeList();
    },
    submit(e) {
      this.isShow = false;
    },
    select(val) {
      this.form[this.key].knowledIds = val.map((e) => e.knowledgeId);
    },
    getKnowledgeList() {
      knowledgeList(this.params).then(({ rows, total }) => {
        this.tableData = rows;
        this.total = total;
        rows.forEach((item) => {
          if (this.form[this.key].knowledIds.includes(item.knowledgeId)) {
            this.$nextTick(() => {
              this.$refs.table.toggleRowSelection(item, true);
            });
          }
        });
      });
    },
    initform() {
      this.form = {
        singleChoice: {
          knowledIds: [],
          knum: 0,
          orderNum: 1,
          qnum: 0,
          randomNum: 1,
        },
        multipleChoice: {
          knowledIds: [],
          knum: 0,
          orderNum: 2,
          qnum: 0,
          randomNum: 1,
        },
        trueFalseQuestion: {
          knowledIds: [],
          knum: 0,
          orderNum: 3,
          qnum: 0,
          randomNum: 1,
        },
        caseQuestion: {
          knowledIds: [],
          knum: 0,
          orderNum: 4,
          qnum: 0,
          randomNum: 1,
        },
        type: 1,
      };
    },
    init() {
      this.initform();
    },
  },
  watch: {
    "form.singleChoice.randomNum": {
      handler(val) {
        this.list.forEach((ele) => {
          this.form[ele.key].randomNum = val;
        });
      },
    },
    formData: {
      handler(val) {
        if (!val) {
          this.init();
        } else {
          var objs = Object.keys(JSON.parse(val));
          this.form = JSON.parse(val);
          if (!objs.includes("trueFalseQuestion")) {
            this.form.trueFalseQuestion = {
              knowledIds: [],
              knum: 0,
              orderNum: 3,
              qnum: 0,
              randomNum: 1,
            };
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.sort_box {
  ul {
    padding-left: 76px;
    margin: 0;
    margin-top: 14px;
    li {
      margin-bottom: 10px;
      span {
        margin-right: 20px;
      }
      /deep/ {
        .el-radio {
          margin: 0 10px;
        }
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
