<template>
  <div id="bankContent">
    <div style="margin-bottom: 20px">
      <el-button @click="addCourse" size="small">添加</el-button>
      <el-button
        @click="openAudition"
        type="success"
        size="small"
        v-if="tableData.length > 0"
        >试做设置</el-button
      >
    </div>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{
        'background-color': '#eee',
        padding: '8px',
        color: '#333',
      }"
      :default-sort="{ prop: 'sort', order: 'ascending' }"
    >
      <el-table-column
        v-for="(item, index) in tableSet"
        :width="item.width"
        :key="index"
        :label="item.label"
        align="center"
        :show-overflow-tooltip="true"
        header-align="center"
        :sortable="item.prop === 'sort'"
        sort-by="sort"
        :prop="item.prop"
      >
        <template slot-scope="scope">
          <span v-if="item.scope === 'types'">{{
            scope.row[item.prop] === 1
              ? "录播"
              : scope.row[item.prop] === 2
              ? "直播"
              : scope.row[item.prop] === 3
              ? "回放"
              : "未知"
          }}</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-if="item.scope === 'busin'">
            {{ scope.row[item.prop1] + " - " + scope.row[item.prop2] }}
          </span>
          <span v-else-if="item.scope === 'Status'">
            {{
              scope.row[item.prop] === 1
                ? "发布"
                : scope.row[item.prop] === 0
                ? "未发布"
                : "未知"
            }}
          </span>
          <div v-else-if="item.scope === 'inputs'">
            <el-input-number
              style="width: 50px"
              size="small"
              :controls="false"
              v-model="scope.row[item.prop]"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </div>
          <span v-else>{{ scope.row[item.prop] }}</span></template
        >
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="100px">
        <template slot-scope="scope">
          <el-button type="text" @click="delBank(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <bank-check ref="bankCheck" @backData="backBankData" />
    <popple-set-tk
      :key="Math.random()"
      ref="poppleSetTk"
      :tableData="tableData"
      :examConfigList="examConfigList"
      @uploadArrays="uploadArrays"
    />
  </div>
</template>

<script>
import poppleSetTk from "../../poppleSetTKCOPY.vue";
import bankCheck from "./bankCheck.vue";
export default {
  components: { poppleSetTk, bankCheck },
  props: ["listData"],
  data() {
    return {
      tableData: [],
      examConfigList: [],
      tableSet: [
        { label: "排序", prop: "sort", scope: "inputs", width: "100" },
        { label: "题卷编码", prop: "code", width: "150" },
        { label: "题卷名称", prop: "name" },
        { label: "科目", prop: "subjectName", width: "130" },
        { label: "题库类型", prop: "type", scope: "type", width: "120" },
      ],
    };
  },
  mounted() {
    this.$bus.$on("sendBybusBank", () => {
      this.tableData = [];
      this.examConfigList = [];
    });
  },
  methods: {
    /**
     * 获取初始题库列表
     */
    getBybusBanktableData(id) {
      this.$api.inquireGoodsbanklist({ goodsId: id }).then((res) => {
        res.data.map((item) => {
          if (item.type === 1) {
            item.moduleExamId = item.majorId;
            item.ids = item.type + "-" + item.majorId;
          }
          if (item.type === 2) {
            item.chapterExamId = item.majorId;
            item.ids = item.type + "-" + item.majorId;
          }
          if (item.type === 3) {
            item.examId = item.majorId;
            item.ids = item.type + "-" + item.majorId;
          }
        });
        this.tableData = res.data;
      });
    },
    /**
     * 获取初始题库试做列表
     */
    getBybusBankexam(examList) {
      this.examConfigList = examList;
    },
    /**
     * 点击试做函数
     */
    openAudition() {
      console.log(this.examConfigList, "examConfigList");
      this.$refs.poppleSetTk.dialogVisible = true;
    },
    /**
     * 试做回调数据
     */
    uploadArrays(arrays) {
      this.examConfigList = arrays;
    },
    /**
     * 点击添加函数
     */
    addCourse() {
      //搜索条件
      var data = {
        businessId: this.listData.businessId,
        pageNum: 1,
        pageSize: 10,
        status: 1,
        examType: 1,
      };
      //已选题卷
      var aList = this.tableData.map((item) => {
        return item.ids;
      });
      //打开选择课程组件
      this.$refs.bankCheck.openBox(data, aList);
    },
    /**
     * 选择题库回调数据
     */
    backBankData(array) {
      let copyData = JSON.parse(JSON.stringify(array));
      if (this.tableData.length) {
        let maxIndex = 0;
        this.tableData.forEach((item) => {
          if (item.sort > maxIndex) {
            maxIndex = item.sort;
          }
        });
        copyData.forEach((item, index) => {
          item.sort = maxIndex + index + 1;
        });
      } else {
        copyData.forEach((item, index) => {
          item.sort = index + 1;
        });
      }
      this.tableData = this.tableData.concat(copyData);
    },
    /**
     * 删除题卷
     */
    delBank(item) {
      let splitItem = item.ids.split("-").map(Number);
      const FINDINDEX = this.tableData.findIndex((items) => {
        return items.ids === item.ids;
      });
      this.tableData.splice(FINDINDEX, 1);
      //结构特殊-后期考虑优化
      this.examConfigList = this.examConfigList.filter((items) => {
        let arr = items.TypeId.split("-").map(Number);
        if (splitItem[0] === 1) {
          if (arr.length === 4) {
            if (arr[1] !== splitItem[1]) {
              return items;
            }
          } else {
            return items;
          }
        }
        if (splitItem[0] === 2) {
          if (arr.length === 3) {
            if (arr[1] !== splitItem[1]) {
              return items;
            }
          } else {
            return items;
          }
        }
        if (splitItem[0] === 3) {
          if (arr.length === 2) {
            if (arr[1] !== splitItem[1]) {
              return items;
            }
          } else {
            return items;
          }
        }
      });
      this.$message.success("删除成功");
    },
  },
};
</script>

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