<template>
    <div>
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="handCancle" width="900px"
            :maskClosable="false">
            <template slot="title">
                分值设置<span style="color:orange;font-size: 10px;">（当前设置的分数将会在保存试卷时一并保存）</span>
            </template>
            <template slot="footer">
                <span></span>
            </template>
            <div class="modal-box" style="padding:0">
                <div class="bordr-bottom-gray flex-align">
                    <div>
                        <span class="m-r8">总题量：{{data.length}} </span>
                        <span class="m-r8">总分数：{{totalScore}} </span>
                    </div>
                    <div>
                        合格分数：
                        <a-input-number v-model="qualifiedScore" :min="0" />
                    </div>
                </div>
                <div style="width:100%;">
                    <table width="100%" class="table-box" cellspacing="0">
                        <tr>
                            <th>序号</th>
                            <th colspan="4">题干</th>
                            <th colspan="2">学科</th>
                            <th colspan="2" class="text-score">分值</th>
                        </tr>
                        <tr v-for="(item,index) in groupQuestion">
                            <td colspan="9">
                                <table width="100%" class="table-box" cellspacing="0">
                                    <tr>
                                        <td colspan="7" class="text-left  border-l">
                                            {{(index+1)|NoToChinese}}、{{item.name}}（共{{item.data.length}}题，{{item.score}}分）
                                        </td>
                                        <td colspan="2" class="text-left border-box text-left">
                                            <a-input-number :min="0" @change="val=>onChange(val,item)" />分/题</td>
                                    </tr>
                                    <tr v-for="(v,k) in item.data">
                                        <td class="border-box text-num">{{k+1}}</td>
                                        <td colspan="4" class="border-box" style="text-align: left;">
                                            {{v.shortName}}</td>
                                        <td colspan="2">{{v.discipline}}</td>
                                        <td colspan="2" class="text-left border-box text-left">
                                            <a-input-number :min="0" v-model="v.singleScore" />分</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import { groupArr } from '@/utils/tools'
    export default {
        components: {
        },
        data() {
            return {
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
                data: [],
                qualifiedScore: 0
            };
        },
        computed: {
            groupQuestion() {
                let arr = groupArr(this.data, 'disciplineQuestionTypeId', 'disciplineQuestionType')
                console.log(arr, 'arr')
                arr.forEach(item => {
                    item.score = item.data.reduce((total, v) => {
                        return total + v.singleScore
                    }, 0)
                })
                return arr;
            },
            totalScore() {
                return this.groupQuestion.reduce((total, v) => {
                    return total + v.score
                }, 0)
            }
        },
        watch: {
            totalScore(nVal) {
                console.log(nVal, '新的总分')
                this.$parent.totalScore = nVal;
            },
            qualifiedScore(nVal) {
                console.log(nVal, '新的合格分')
                this.$parent.qualifiedScore = nVal;
            },
        },
        mounted() {

        },
        methods: {
            onChange(val, item) {
                console.log(val, 'val')
                console.log(item, 'item')
                item.data.forEach(v => {
                    v.singleScore = val;
                })
            },
            showModal(data) {
                console.log(data, 'data')
                this.data = data;
                this.qualifiedScore = this.$parent.qualifiedScore;
                console.log(this.$parent.qualifiedScore,'this.$parent.qualifiedScore')
                this.visible = true;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {

                    }
                })
            },
            handCancle() {
                this.visible = false;
            }
        },
    };
</script>
<style scoped>
    table {
        width: 100%;
        table-layout: fixed;
    }

    th {
        text-align: center;
        border: 1px solid rgba(232, 232, 232, 1);
        /* padding: 4px 0; */
    }

    table tr td {
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
    }

    .border-box {
        border: 1px solid rgba(232, 232, 232, 1);
    }

    .border-l {
        border: 1px solid rgba(232, 232, 232, 1);
        border-right: none;
    }

    .text-left {
        text-align: left;
        padding-left: 16px;
    }
</style>