<template>
  <section class="content">
    <el-form>
      <el-form-item label="可选属性">
        <el-select
          v-model="coursePropertyId"
          :remote-method="getCoursesProperty"
          :loading="coursePropertyLoading"
          remote
          filterable
          clearable
          placeholder="属性名"
          @change="onSelChange"
        >
          <el-option
            v-for="item in coursePropertyList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table
      :data="paperData.data"
      style="width: 100%"
      border
      :span-method="objectSpanMethod"
    >
      <el-table-column label="蓝图属性" align="center">
        <el-table-column
          v-for="(colval, colIndex) in headFirst"
          :key="colIndex"
        >
          <template slot="header">
            <span style="margin-left: 10px">{{ colval }}</span>
          </template>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row[colIndex] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="大题" align="center">
        <el-table-column
          v-for="(colval, colIndex) in headSecond"
          :key="colIndex"
        >
          <template slot="header">
            <span style="margin-left: 10px">{{ colval }}</span>
          </template>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row[colIndex + 2] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
import { QUESTION_API } from "@/constants/constants.js";
import { mapState } from "vuex";

export default {
  props: {
    paperId: {
      type: Number,
      default: null,
    },
    courseId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      coursePropertyLoading: false,
      coursePropertyList: [],
      paperData: {},
      coursePropertyId: null,
      loading: false,
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
    headFirst: function () {
      if (!this.paperData.head) {
        return null;
      }
      return this.paperData.head.slice(0, 2);
    },
    headSecond: function () {
      if (!this.paperData.head) {
        return null;
      }
      return this.paperData.head.slice(2);
    },
  },
  //初始化查询
  created() {
    this.init();
  },
  methods: {
    getCoursesProperty(name) {
      this.coursePropertyLoading = true;
      this.$httpWithMsg
        .get(
          QUESTION_API +
            "/courseProperty/enable?courseId=" +
            this.courseId +
            "&name=" +
            name
        )
        .then((response) => {
          this.coursePropertyList = response.data;
          this.coursePropertyLoading = false;
        });
    },
    onSelChange() {
      this.$http
        .get(
          QUESTION_API +
            "/paper/blue?id=" +
            this.paperId +
            "&coursePropertyId=" +
            this.coursePropertyId +
            "&rootOrgId=" +
            this.user.rootOrgId
        )
        .then((response) => {
          this.paperData = response.data;
        });
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let span of this.paperData.rowspan) {
          if (span[0] == rowIndex) {
            return {
              rowspan: span[1] - span[0] + 1,
              colspan: 1,
            };
          } else if (span[0] < rowIndex && span[1] >= rowIndex) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },

    init() {
      this.getCoursesProperty("");
    },
  },
};
</script>
