<template>
  <div style="width: 100%;height: 100%;">
    <div style="margin-top: 10px;position: absolute; right: 50px;">
      <el-button size="small" type="primary">导出试题</el-button>
      <el-button size="small" type="primary" @click="goBack">返回</el-button>
    </div>
    <el-card style="width: 45%;margin-left: 50px;margin-top: 60px;display: inline-block;height: calc(100% - 100px);">
      <div slot="header">
        <span>理论试题列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addTheoryQuestion">添加试题</el-button>
        <el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" @click="theoryReview">预览</el-button>
      </div>
      <el-table
        :data="theoryQuestionList"
        style="width: 100%"
      >
        <el-table-column
          prop="type"
          label="类型"
        >
          <template slot-scope="scope">
            <el-tag
              type="primary"
              disable-transitions
            >{{ QuestionTypeMap[scope.row.type] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="topic"
          label="题目"
        />
        <el-table-column
          prop="score"
          label="分值"
        />
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="removeQuestion(index, scope)">移出</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card style="width: 45%;margin-left: calc(10% - 100px);margin-top: 60px;display: inline-block;height: calc(100% - 100px);">
      <div slot="header">
        <span>实操试题列表</span>
        <el-button style="float: right; padding: 3px 0" type="text">添加试题</el-button>
        <el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" @click="operateReview">预览</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="type"
          label="类型"
        >
          <template slot-scope="scope">
            <el-tag
              type="primary"
              disable-transitions
            >{{ QuestionTypeMap[scope.row.type] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="topic"
          label="题目"
        />
        <el-table-column
          prop="score"
          label="分值"
        />
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="removeQuestion(index, scope)">移出</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <theory-review ref="theoryReview" />
    <theory-question ref="theoryQuestion" />
  </div>
</template>

<script>
import TheoryReview from './theoryReview';
import TheoryQuestion from './theoryQuestion';
export default {
    name: 'GeneratPaper',
    components: {
        TheoryReview,
        TheoryQuestion
    },
    data() {
        return {
            tableData: [],
            QuestionTypeMap: {
                select: '选择题',
                judge: '判断题'
            },
            theoryQuestionList: []
        };
    },
    methods: {
        removeQuestion(index, row) {},
        addTheoryQuestion() {
            this.$refs.theoryQuestion.doShow();
        },
        goBack() {
            this.$router.go(-1);
        },
        theoryReview() {
            this.$refs.theoryReview.doShow();
        },
        operateReview() {
        }
    }
};
</script>

<style scoped>

</style>
