<template>
    <div class="steps2">
        <div class="des-box" v-for="item in examBox.disciplines" :key="item.id">
            <div class="des-subject">
                {{item.name}}
            </div>
            <table width="100%" class="table-box" cellspacing="0">
                <!-- 表头开始 -->
                <tr>
                    <th rowspan="2">序号</th>
                    <th rowspan="2">{{examBox.paperCompositionModel==0?'章节':'知识点'}}
                        <a-tooltip>
                            <template slot="title">
                                添加{{examBox.paperCompositionModel==0?'章节':'知识点'}}
                            </template>
                            <a-icon type="plus" class="point" @click="addChapter(item)" />
                        </a-tooltip>
                    </th>
                    <th rowspan="2">题型</th>
                    <th rowspan="2">题量</th>
                    <th rowspan="2">题型分值</th>
                    <th colspan="5">题型难度占比</th>
                    <th rowspan="2">删除</th>
                </tr>
                <tr>
                    <th>容易</th>
                    <th>较易</th>
                    <th>中等</th>
                    <th>困难</th>
                    <th>较难</th>
                </tr>
                <!-- 表头结束 -->
                <template v-if="item.groupArr.length>0">
                    <tr v-for="(v,k) in item.groupArr" :key="k">
                        <td>{{k+1}}</td>
                        <td>
                            {{v.name}}
                            <a-tooltip>
                                <template slot="title">
                                    删除{{examBox.paperCompositionModel==0?'章节':'知识点'}}
                                </template>
                                <a-icon type="minus-circle" class="point" @click="delChaper(item,v)" />
                            </a-tooltip>
                            <a-tooltip>
                                <template slot="title">
                                    添加题型
                                </template>
                                <a-icon type="plus-circle" class="point" @click="addQuestionType(item,v)" />
                            </a-tooltip>
                        </td>
                        <td>
                            <div class="flex-column flex-align">
                                <a-select v-for="(i,indexi) in v.QuestionType" v-model="i.disciplineQuestionTypeId"
                                    :key="indexi" class="input-item" size="small" style="width:100px;"
                                    placeholder="选择题型">
                                    <a-select-option :value="item.id" @click="QuestionTypeChange(item,i)"
                                        v-for="(item,index) in oQuestionType(item.questionTypeArr,v)" :key="item.id">
                                        {{item.name}}</a-select-option>
                                </a-select>
                            </div>
                        </td>
                        <td>
                            <div class="flex-column flex-align">
                                <a-input-number @change="(val)=>countChange(val,i,v,item)" class="input-item"
                                    v-for="(i,indexi) in v.QuestionType" :key="indexi" v-model="i.count" size="small"
                                    :min="0" style="width:60px;" />
                            </div>
                        </td>
                        <td>
                            <div class="flex-column flex-align">
                                <div class="input-item" v-for="(i,indexi) in v.QuestionType" :key="indexi">
                                    <a-input-number @change="(val)=>scoreChange(val,i,v,item)" v-model="i.singleScore"
                                        size="small" :min="0" style="width:60px;" />
                                    <span>分/题</span></div>
                            </div>

                        </td>
                        <td>
                            <div class="flex-column flex-align" v-for="(i,indexi) in v.QuestionType" :key="indexi">
                                <a-input-number @change="(val)=>difficultyChange(val,i,0,v,item)"
                                    v-model="i.difficultySettings[0].count" class="input-item" size="small" :min="0"
                                    :max="10" style="width:50px;" />
                            </div>
                        </td>
                        <td>
                            <div class="flex-column flex-align" v-for="(i,indexi) in v.QuestionType" :key="indexi">
                                <a-input-number @change="(val)=>difficultyChange(val,i,1,v,item)"
                                    v-model="i.difficultySettings[1].count" class="input-item" size="small" :min="0"
                                    :max="10" style="width:50px;" />
                            </div>
                        </td>
                        <td>
                            <div class="flex-column flex-align" v-for="(i,indexi) in v.QuestionType" :key="indexi">
                                <a-input-number @change="(val)=>difficultyChange(val,i,2,v,item)"
                                    v-model="i.difficultySettings[2].count" class="input-item" size="small" :min="0"
                                    :max="10" style="width:50px;" />
                            </div>
                        </td>
                        <td>
                            <div class="flex-column flex-align" v-for="(i,indexi) in v.QuestionType" :key="indexi">
                                <a-input-number @change="(val)=>difficultyChange(val,i,3,v,item)"
                                    v-model="i.difficultySettings[3].count" class="input-item" size="small" :min="0"
                                    :max="10" style="width:50px;" />
                            </div>
                        </td>
                        <td>
                            <div class="flex-column flex-align" v-for="(i,indexi) in v.QuestionType" :key="indexi">
                                <a-input-number @change="(val)=>difficultyChange(val,i,4,v,item)"
                                    v-model="i.difficultySettings[4].count" class="input-item" size="small" :min="0"
                                    :max="10" style="width:50px;" />
                            </div>
                        </td>
                        <td>
                            <div class="del-text" v-for="(i,indexi) in v.QuestionType" :key="indexi">
                                <a @click="delQuestionType(i,v,indexi,item)">删除题型</a>
                            </div>
                        </td>
                    </tr>
                </template>
                <template v-else>
                    <tr>
                        <td style="border:none"></td>
                        <td style="border:none"></td>
                        <td style="border:none"></td>
                        <a-empty />
                    </tr>
                </template>
                <tr>
                    <td>合计</td>
                    <td>共计{{item.groupArr.length}}个{{examBox.paperCompositionModel==0?'章节':'知识点'}}</td>
                    <td>共计{{subjectQuestionType(item)}}个题型</td>
                    <td>{{subjectQuestionNum(item)}}题</td>
                    <td>{{subjectScore(item)}}分</td>
                    <td colspan="6"></td>
                </tr>
            </table>
        </div>
        <AddChapter ref="AddChapter" />
    </div>
</template>
<script>
    const difficultySettings = [
        {
            difficulty: 1,
            count: 0
        },
        {
            difficulty: 2,
            count: 0
        },
        {
            difficulty: 3,
            count: 0
        },
        {
            difficulty: 4,
            count: 0
        },
        {
            difficulty: 5,
            count: 0
        },
    ]
    import AddChapter from './AddChapter.vue'
    import { DisciplineQuestionTypeGetList } from '@/api/api'
    export default {
        props: ['examBox'],
        components: {
            AddChapter
        },
        data() {
            return {
                difficultySettings,
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
            };
        },
        computed: {
            oQuestionType() {
                return (data, v) => {
                    // return data.filter(item => v.QuestionType.findIndex(i => i.disciplineQuestionTypeId == item.id) == -1)
                    // let arr = [];
                    // data.forEach(item => {
                    //     let bo = v.QuestionType.findIndex(i => i.disciplineQuestionTypeId == item.id) == -1;
                    //     if (bo) {
                    //         arr.push(item)
                    //     }
                    // })
                    // console.log(arr,'arr999999999999999')
                    // return arr
                    return data
                }
            },
            disciplines() {
                return this.examBox.disciplines
            },
            subjectQuestionType() {
                return (data) => {
                    let len = 0;
                    if (data.groupArr) {
                        data.groupArr.forEach(item => {
                            len += item.QuestionType.length
                        })
                    }
                    return len;
                }
            },
            subjectQuestionNum() {
                return (data) => {
                    let num = 0;
                    if (data.groupArr) {
                        data.groupArr.forEach(item => {
                            num += item.count
                        })
                    }
                    return num;
                }
            },
            subjectScore() {
                return (data) => {
                    let num = 0;
                    if (data.groupArr) {
                        data.groupArr.forEach(item => {
                            num += item.score
                        })
                    }
                    return num;
                }
            }
        },
        watch: {
            disciplines: {
                handler(nVal) {
                    console.log(nVal, 'nVal学科')
                    nVal.forEach(item => {
                        let data = {
                            disciplineId: item.id
                        }
                        DisciplineQuestionTypeGetList(data).then(res => {
                            item.questionTypeArr = res;
                            console.log(res, '学科题型' + item.name)
                        })
                    })
                },
                immediate: true,
            }
        },
        mounted() {

        },
        methods: {
            //选择题型
            QuestionTypeChange(item, i) {
                console.log(item, 'item')
                console.log(i, 'i')
                i.name = item.name;
            },
            //计算学科总分
            subjectScoreTotal(item) {
                console.log(item, 'item计算学科分')
                item.totalScore = item.groupArr.reduce((total, value) => {
                    return total += value.score;
                }, 0)
                item.totalCount = item.groupArr.reduce((total, value) => {
                    return total += value.count;
                }, 0)
            },
            //删除题型
            delQuestionType(i, v, index, item) {
                console.log(i, 'i')
                console.log(v, 'v')
                console.log(index, 'index')
                console.log(item, 'item')
                v.QuestionType.splice(index, 1)
                v.count = v.QuestionType.reduce((total, value) => {
                    return total += value.count;
                }, 0)
                v.score = v.QuestionType.reduce((total, value) => {
                    return total += value.totalScore;
                }, 0)
                this.subjectScoreTotal(item)
            },
            //分值改变
            scoreChange(val, i, v, item) {
                console.log(val, 'val')
                console.log(i, 'i')
                console.log(v, 'v')
                console.log(item, 'item')
                // let questionNum = i.difficultySettings.reduce((total, value) => {
                //     return total += value.count;
                // }, 0)
                i.totalScore = val * i.count;
                i.score = val;
                v.score = v.QuestionType.reduce((total, value) => {
                    return total += value.totalScore;
                }, 0)
                this.subjectScoreTotal(item)
            },
            //题量改变
            countChange(val, i, v, item) {
                console.log(val, 'val')
                console.log(i, 'i')
                console.log(v, 'v')
                console.log(this.examBox, 'examBox')
                let difficulty = JSON.parse(JSON.stringify(this.examBox.difficulty));
                let activeTotal = 0;
                difficulty.forEach(item => {
                    item.count = Math.floor(val * item.proportion / 100)
                    activeTotal = activeTotal + item.count
                })
                let surplusCount = val - activeTotal;
                console.log(surplusCount, 'surplusCount')
                difficulty.forEach(item => {
                    if (item.proportion && surplusCount > 0) {
                        item.count += 1;
                        surplusCount--;
                    }
                })
                console.log(difficulty)
                i.difficultySettings = difficulty;
                v.count = v.QuestionType.reduce((total, value) => {
                    return total += value.count;
                }, 0)
                this.scoreChange(i.score, i, v, item)
            },
            //难度输入框值改变
            difficultyChange(val, i, num, v, item) {
                console.log(val, 'val')
                console.log(i, 'i')
                console.log(num, 'num')
                i.difficultySettings[num].count = val;
                i.count = i.difficultySettings.reduce((total, item) => {
                    return total = total + item.count
                }, 0)
                v.count = v.QuestionType.reduce((total, value) => {
                    return total += value.count;
                }, 0)
                this.scoreChange(i.score, i, v, item)
            },
            //添加题型
            addQuestionType(item, v) {
                console.log(item, 'item')
                if (item.questionTypeArr.length == 0) {
                    this.$message.error('此学科无题型，请在基础数据中配置');
                    return;
                }
                console.log(v, 'v')
                v.QuestionType.push({
                    id: v.id,//章节id
                    disciplineQuestionTypeId: item.questionTypeArr[0].id,//题型id
                    name:item.questionTypeArr[0].name,
                    count: 0,//题量
                    totalScore: 0,//分值
                    score: 0,
                    difficultySettings: JSON.parse(JSON.stringify(this.difficultySettings)),//难度设置
                })
            },
            //删除章节
            delChaper(item, v) {
                console.log(item, 'item')
                console.log(v, 'v')
                item.groupArr = item.groupArr.filter(data => data.id != v.id);
            },
            addChapter(item = {}) {
                console.log(item, 'item')
                this.$refs.AddChapter.showModal(item)
            },
        }
    };
</script>
<style scoped>
    .steps2 {
        height: 100%;
    }

    .des-box {
        width: 100%;
    }

    .des-subject {
        border: 1px solid rgba(232, 232, 232, 1);
        padding: 8px;
        font-size: 16px;
    }

    .table-box {
        margin-bottom: 36px;
    }

    th {
        background-color: #d9d9d9;
    }

    td {
        padding: 8px 0;
    }

    th,
    td {
        text-align: center;
        border: 1px solid rgba(232, 232, 232, 1);
    }

    .input-item {
        margin-bottom: 8px;
    }

    .point {
        cursor: pointer;
        margin-left: 8px;
    }

    .point:hover {
        color: rgb(24, 144, 255);
    }

    .del-text {
        line-height: 32px;
    }
</style>