<template>
    <div>
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="handCancle"
            width="900px" :maskClosable="false" :destroyOnClose="true">
            <div slot="title">答题卡样式<span style="font-size: 12px;color:orange">（不选取默认为自动样式）</span></div>
            <div class="modal-box" style="padding:0">
                <a-row>题型分类：{{typeName}}</a-row>
                <!-- 客观题 -->
                <div class="type-box" v-if="questionCategory==0">
                    <div>
                        样式选择：
                        <a-radio-group v-model="QuestionTypeAnswerSheetStyle" button-style="solid">
                            <a-radio-button :value="10">
                                横向
                            </a-radio-button>
                            <a-radio-button :value="11">
                                竖向
                            </a-radio-button>
                        </a-radio-group>
                        <div class="img-box" v-if="QuestionTypeAnswerSheetStyle">
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==10"
                                :url="require('@/assets/images/answerSheet/0-0.png')" />
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==11"
                                :url="require('@/assets/images/answerSheet/0-1.png')" />
                        </div>
                    </div>
                </div>
                <!-- 判断题 -->
                <div class="type-box" v-if="questionCategory==1">
                    <div>
                        样式选择：
                        <a-radio-group v-model="QuestionTypeAnswerSheetStyle" button-style="solid">
                            <a-radio-button :value="10">
                                横向
                            </a-radio-button>
                            <a-radio-button :value="11">
                                竖向
                            </a-radio-button>
                        </a-radio-group>
                        <div class="img-box" v-if="QuestionTypeAnswerSheetStyle">
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==10"
                                :url="require('@/assets/images/answerSheet/1-0.png')" />
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==11"
                                :url="require('@/assets/images/answerSheet/1-1.png')" />
                        </div>
                    </div>
                </div>
                <!-- 非客观题 -->
                <div class="type-box" v-if="questionCategory==2">
                    <div>
                        样式选择：
                        <a-radio-group v-model="QuestionTypeAnswerSheetStyle" button-style="solid">
                            <a-radio-button :value="20">
                                试题框
                            </a-radio-button>
                            <a-radio-button :value="21">
                                单横线
                            </a-radio-button>
                            <a-radio-button :value="22">
                                多横线
                            </a-radio-button>
                            <a-radio-button :value="23">
                                网格
                            </a-radio-button>
                            <a-radio-button :value="-1">
                                无样式
                            </a-radio-button>
                        </a-radio-group>
                        <div class="img-box" v-if="QuestionTypeAnswerSheetStyle">
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==20"
                                :url="require('@/assets/images/answerSheet/2-0.png')" />
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==21"
                                :url="require('@/assets/images/answerSheet/2-1.png')" />
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==22"
                                :url="require('@/assets/images/answerSheet/2-2.png')" />
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==23"
                                :url="require('@/assets/images/answerSheet/2-3.png')" />
                            <ImageView v-if="QuestionTypeAnswerSheetStyle==-1"
                                :url="require('@/assets/images/answerSheet/2-4.png')" />
                        </div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import { GetDisciplineSortSetting, UpdateDisciplineSortSetting } from '@/api/api'
    import ImageView from '@/components/ImageView.vue'
    export default {
        components: {
            ImageView
        },
        data() {
            return {
                spinning: false,
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
                papaerInfo: {},
                data: {},
                QuestionTypeAnswerSheetStyle: 0,
                questionCategory: null,
                activeType: {}
            };
        },
        computed: {
            typeName() {
                if (!this.data.data) {
                    return ''
                }
                let str = '',
                    questionCategory = this.data.data.length > 0 ? this.data.data[0].questionCategory : null;
                switch (questionCategory) {
                    case 0: str = "客观题";
                        break;
                    case 1: str = "判断题";
                        break;
                    case 2: str = "非客观题";
                        break;
                }
                return str;
            }
        },
        mounted() {

        },
        methods: {
            showModal(data, papaerInfo) {
                console.log(papaerInfo, 'papaerInfo')
                this.papaerInfo = papaerInfo;
                this.data = data;
                this.questionCategory = this.data.data.length > 0 ? this.data.data[0].questionCategory : null;
                let arr = papaerInfo.paperSetting[6].realParam.QuestionTypeStyles;
                arr.forEach(item => {
                    if (item.DisciplineQuestionTypeId == data.type) {
                        this.activeType = item;
                        this.QuestionTypeAnswerSheetStyle = item.AnswerSheetStyle
                    }
                })
                console.log(arr, 'arr')
                this.visible = true;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log(this.activeType, 'activeType')
                        if (JSON.stringify(this.activeType) != '{}') {
                            this.activeType.AnswerSheetStyle = this.QuestionTypeAnswerSheetStyle;
                        } else {
                            let arr = this.papaerInfo.paperSetting[6].realParam.QuestionTypeStyles;
                            if (arr.findIndex(item => item.DisciplineQuestionTypeId == this.data.type) > -1) {
                                return;
                            }
                            arr.push({
                                DisciplineQuestionTypeId: this.data.type,
                                AnswerSheetStyle: this.QuestionTypeAnswerSheetStyle
                            })
                        }
                        this.$message.success('设置成功，请在右侧“保存设置”处保存更改')
                        this.handCancle();
                    }
                })
            },
            handCancle() {
                this.visible = false;
                this.data = {};
                this.activeType={};
                this.QuestionTypeAnswerSheetStyle = 0;
                this.questionCategory = null;
            }
        },
    };
</script>
<style scoped>
    .type-box {
        margin: 8px 0;
    }

    .img-box {
        margin: 8px 0;
        border: 1px solid #000;
    }
</style>