<template>
  <a-card :bordered="false" title="组卷策略信息">
    <a-form-model :rules="rules" :model="form" v-bind="formItemLayout">
      <a-row :gutter="24">
        <a-col :md="10" :sm="12">
          <a-form-model-item label="总分" prop="totalScore">
            <a-input-number v-model="form.totalScore" :disabled="true" />
          </a-form-model-item>
        </a-col>
        <a-col :md="14" :sm="12">
          <a-form-model-item label="及格分数" prop="passScore">
            <a-input-number v-model="form.passScore" :min="1" :max="100" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="10" :sm="12">
          <a-form-model-item label="考试时长" prop="examTime">
            <a-input-number :min="0" v-model="form.examTime" />
          </a-form-model-item>
        </a-col>
        <a-col :md="14" :sm="12">
          <a-form-model-item label="默认组卷题量" prop="topicNumber">
            <a-input-number :min="0" v-model="form.topicNumber" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <h4>考试开启条件：</h4>
        <a-col :md="10" :sm="12">
          <a-form-model-item label="学时时长" prop="examOpenCondition">
            <a-input-number :min="0" v-model="form.examOpenCondition" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-card :bordered="false" title="组卷策略详情">
        <a-table
          :columns="columns"
          :data-source="tableData"
          bordered
          :position="{ disabled: false }"
          :pagination="false"
        >
          <template slot="topicNum" slot-scope="text, record">
            <a-input-number style="margin: -5px 0" v-model="record.topicNum" :min="0" :max="record.totalNum" />
          </template>
          <template slot="topicScore" slot-scope="text, record">
            <a-input-number style="margin: -5px 0" v-model="record.topicScore" :min="0" />
          </template>
          <template slot="totalScore" slot-scope="text, record">
            <p>{{ record.topicScore }}</p>
          </template>
          <template slot="footer" :style="{ float: 'left' }">
            <p class="right">总分数：{{ form.totalScore }} 分</p>
          </template>
        </a-table>
      </a-card>
    </a-form-model>
    <a-col :span="24" style="text-align: center;">
      <a-button type="primary" size="default" @click="toPrev" style="margin-right: 8px;">上一步</a-button>
      <a-button type="primary" size="default" @click="toSave" style="margin-right: 8px;">保存</a-button>
      <a-button type="primary" size="default" @click="toIssue">发布</a-button>
    </a-col>
  </a-card>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import { getQuestionNumByCourseIds } from '@/api/course/question/question'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    projectForm: {
      type: Object
    }
  },
  data() {
    // 这里存放数据
    return {
      form: this.projectForm,
      formItemLayout: { labelCol: { span: 4 }, wrapperCol: { span: 14 } },
      rules: {
        totalScore: [{ required: true, message: '请输入组卷总分', trigger: 'blur' }],
        trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        trainClass: [{ required: true, message: '请选择培训分类', trigger: 'blur' }]
      },
      columns: [
        { title: '序号', key: 'i', dataIndex: 'i', width: 70, scopedSlots: { customRender: 'serial' } },
        {
          title: '题目类型',
          dataIndex: 'topicType',
          key: 'topicType',
          customRender: (text, record, index) => {
            if (text == 1) return '单选题'
            if (text == 2) return '多选题'
            if (text == 3) return '判断题'
            if (text == 4) return '简答题'
            if (text == 5) return '填空题'
          }
        },
        { title: '总题量', dataIndex: 'totalNum', key: 'totalNum' },
        {
          title: '考试题量',
          dataIndex: 'topicNum',
          width: 100,
          key: 'topicNum',
          scopedSlots: { customRender: 'topicNum' }
        },
        {
          title: '单题分值',
          dataIndex: 'topicScore',
          width: 100,
          key: 'topicScore',
          scopedSlots: { customRender: 'topicScore' }
        },
        {
          title: '总分',
          dataIndex: 'totalScore',
          key: 'total',
          customRender: (value, row, index) => {
            if (!row.topicNum || !row.topicScore) return ''
            return row.topicNum * row.topicScore + '分'
          }
        }
      ],
      tableData: [],
      totalScore: 0
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    tableData: {
      deep: true,
      handler: function() {
        let sum = 0
        this.tableData.forEach(t => {
          if (t.topicNum && t.topicScore) {
            let score = t.topicNum * t.topicScore;
            sum = sum + score;
          }
        })
        this.form.totalScore = sum
      }
    }
  },
  // 方法集合
  methods: {
    //保存
    toSave() {
      this.form.testPaperTactics = this.tableData;
      this.form.projectStatus = 1
      this.$emit('executeSave', this.form)
    },
    //发布
    toIssue() {
      this.form.testPaperTactics = this.tableData
      this.form.projectStatus = 2
      this.$emit('executeIssue', this.form)
    },
    //上一步
    toPrev() {
      this.$emit('prevStep', this.form)
    },
    initTable() {
      let ids = this.form.lessonIds.map(t => {
        return parseInt(t.ids)
      })
      getQuestionNumByCourseIds({ ids: ids }).then(res => {
        this.tableData = res.data
        if (this.tableData && this.form.testPaperTactics) {
          this.tableData.forEach((t1, t1Index) => {
            this.form.testPaperTactics.forEach(t2 => {
              if (t1.topicType === t2.topicType) {
                this.$set(this.tableData[t1Index], 'topicNum', t2.topicNum)
                this.$set(this.tableData[t1Index], 'topicScore', t2.topicScore)
              }
            })
          })
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initTable()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
}
</script>
<style scoped>
.right {
  /* 右对齐 */
  text-align: right;
  font-size: 16px;
}
</style>
