<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',
          customRender: (value, row, index) => {
            if (!row.topicNum || !row.topicScore) return '';
            return (row.topicNum * row.topicScore) + '分'
          },
        },
      ],
      tableData:  [],
      totalScore: 0,
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    tableData: function () {
      let sum = 0;
      this.tableData.forEach(element => {
        if(element.totalScore){
          console.log('单条总分数',element.totalScore)
          sum = sum + element.totalScore;
        }
      });
      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 => {
            this.form.testPaperTactics.forEach(t2 => {
              if(t1.topicType === t2.topicType){
                t1.topicNum = t2.topicNum
                t1.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>