<template>
    <div class="app-container">
        <div class="header">
            <div class="">
                <div class="topheader" style="padding-left: 20px;">
                    问卷类型：
                    <el-radio-group v-model="list.questionType">
                        <el-radio label="REGULAR_QUESTIONNAIRE">普通问卷</el-radio>
                        <el-radio label="SATISFACTION_QUESTIONNAIRE">满意度问卷</el-radio>
                    </el-radio-group>
                </div>
                <div class="topheader" style="text-align: right;">
                    <el-button size="medium" @click="goback">返回</el-button>
                    <!-- <el-button size="medium" type="primary" plain>预览问卷</el-button> -->
                    <el-button size="medium" type="primary" @click="upload">保存</el-button>
                    <!-- <el-button size="medium" type="primary" @click="releaseupload">保存并发布</el-button> -->
                </div>
            </div>
            <div class="bottomheader">
                <div class="questiontypes">
                    <div class="typetitle">
                        基本题型
                    </div>
                    <div class="texts" v-for="item in basicQuestiontypes" :key="item.id" @click="addquestion(item)">
                        <img :src="item.src" alt="">
                        <div>{{ item.name }}</div>
                    </div>
                    <div class="typetitle">
                        组合题型
                    </div>
                    <div class="texts" v-for="item in combinationQuestiontypes" :key="item.id"
                        @click="addquestion(item)">
                        <img :src="item.src" alt="">
                        <div>{{ item.name }}</div>
                    </div>
                    <div class="typetitle">
                        其他题型
                    </div>
                    <div class="texts" v-for="item in otherQuestiontypes" :key="item.id" @click="addquestion(item)">
                        <img :src="item.src" alt="">
                        <div>{{ item.name }}</div>
                    </div>
                </div>
                <div class="questionnairedetails">
                    <div>
                        <div class="questionnaire-title">
                            问卷标题:
                        </div>
                        <input type="text" class="title-input" v-model="list.questionnaireName">
                        <div class="questionnaire-title" style="margin-top:30px">
                            问卷说明:
                        </div>
                        <el-input type="textarea" class="editor" :rows="6" placeholder="请输入内容"
                            :autosize="{ minRows: 6, maxRows: 10 }" v-model="list.questionnaireDescription">
                        </el-input>
                    </div>
                    <div class="addArea" v-if="questionlist.length == 0">
                        <div class="addtext">
                            点击左侧题型添加题目
                        </div>
                    </div>
                    <div class="questionlist" v-else>
                        <draggable v-model="questionlist">
                            <transition-group>
                                <div class="questionitem" v-for="(item, index) in questionlist" :key="item.id">
                                    <div v-if="item.questionType == 'MULTIPLE_CHOICE'" class="item"
                                        @click.stop="selectquestion(item, index)">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title">
                                            <span>题目： </span>
                                            <el-input placeholder="请输入题目" v-model="item.questionName" clearable>
                                            </el-input>
                                        </div>
                                        <div class="options">
                                            <span>选项： </span>
                                            <div>
                                                <div v-for="(uitem, uindex) in item.questionSubjectOptionList"
                                                    :key="uindex" style="display:flex;margin-bottom:10px">
                                                    <el-input placeholder="请输入内容" v-model="uitem.optionName" clearable>
                                                    </el-input>
                                                    <el-button icon="el-icon-close" type="text"
                                                        style="color:red;margin-left:10px"
                                                        @click.stop="deloption(item, uitem, index, uindex)"></el-button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="more">
                                            <el-button size="medium" icon="el-icon-plus" type="text"
                                                @click.stop="addoption(item)">添加选项</el-button>
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'" class="item"
                                        @click.stop="selectquestion(item, index)">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title">
                                            <span>题目： </span>
                                            <el-input placeholder="请输入题目" v-model="item.questionName" clearable>
                                            </el-input>
                                        </div>
                                        <div class="options">
                                            <span>选项： </span>
                                            <div>
                                                <div v-for="(uitem, uindex) in item.questionSubjectOptionList"
                                                    :key="uindex" style="display:flex;margin-bottom:10px">
                                                    <el-input placeholder="请输入内容" v-model="uitem.optionName" clearable>
                                                    </el-input>
                                                    <el-button icon="el-icon-close" type="text"
                                                        style="color:red;margin-left:10px"
                                                        @click.stop="deloption(item, uitem, index, uindex)"></el-button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="more">
                                            <el-button size="medium" icon="el-icon-plus" type="text"
                                                @click.stop="addoption(item)">添加选项</el-button>
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'FILL_IN_THE_BLANKS'" class="item"
                                        @click.stop="selectquestion(item, index)">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title">
                                            <span>题目： </span>
                                            <el-input placeholder="请输入题目" v-model="item.questionName" clearable>
                                            </el-input>
                                        </div>
                                        <div class="options" style="align-items:center">
                                            <span>回答： </span>
                                            <el-input style="margin:0;width:300px" disabled
                                                placeholder="填写问卷时,用户需要在此输入答案" />
                                        </div>
                                        <div class="more">
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'SCORING_QUESTIONS'" class="item"
                                        @click.stop="selectquestion(item, index)">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title">
                                            <span>题目： </span>
                                            <el-input placeholder="请输入题目" v-model="item.questionName" clearable>
                                            </el-input>
                                        </div>
                                        <div class="options">
                                            <span>选项： </span>
                                            <div>
                                                <el-select v-model="item.optionCount" placeholder="请选择"
                                                    @change="selectchange($event, item)" style="padding-left:10px">
                                                    <el-option v-for="item in optionlist" :key="item.value"
                                                        :label="item.label" :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="more">
                                            <el-radio-group>
                                                <el-radio :label="1" disabled v-if="item.optionCount > 0">1</el-radio>
                                                <el-radio :label="2" disabled v-if="item.optionCount > 1">2</el-radio>
                                                <el-radio :label="3" disabled v-if="item.optionCount > 2">3</el-radio>
                                                <el-radio :label="4" disabled v-if="item.optionCount > 3">4</el-radio>
                                                <el-radio :label="5" disabled v-if="item.optionCount > 4">5</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'" class="item">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title" style="width:85%">
                                            <span>标题： </span>
                                            <el-input placeholder="请输入标题" v-model="item.questionDescription" clearable>
                                            </el-input>
                                        </div>
                                        <div v-for="(aitem, aindex) in item.list" :key="aitem.id" class="combination"
                                            @click.stop="selectquestion(aitem, index, item, aindex)">
                                            <div class="questionName" style="padding-top:0">
                                                {{ aindex + 1 }}. {{ aitem.title }}
                                            </div>
                                            <div class="title">
                                                <span>题目： </span>
                                                <el-input placeholder="请输入题目" v-model="aitem.questionName" clearable>
                                                </el-input>
                                            </div>
                                            <div class="options">
                                                <span>选项： </span>
                                                <div>
                                                    <div v-for="(uitem, uindex) in aitem.questionSubjectOptionList"
                                                        :key="uindex" style="display:flex">
                                                        <el-input placeholder="请输入内容" v-model="uitem.optionName"
                                                            clearable>
                                                        </el-input>
                                                        <el-button icon="el-icon-close" type="text"
                                                            style="color:red;margin:10px 0 0 10px"
                                                            @click.stop="deloption(aitem, uitem, aindex, uindex)"></el-button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="more">
                                                <el-button size="medium" icon="el-icon-plus" type="text"
                                                    @click.stop="addoption(aitem)">添加选项</el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'" class="item">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title" style="width:85%">
                                            <span>标题： </span>
                                            <el-input placeholder="请输入标题" v-model="item.questionDescription" clearable>
                                            </el-input>
                                        </div>
                                        <div v-for="(aitem, aindex) in item.list" :key="aitem.id" class="combination"
                                            @click.stop="selectquestion(aitem, index, item, aindex)">
                                            <div class="questionName" style="padding-top:0">
                                                {{ aindex + 1 }}. {{ aitem.title }}
                                            </div>
                                            <div class="title">
                                                <span>题目： </span>
                                                <el-input placeholder="请输入题目" v-model="aitem.questionName" clearable>
                                                </el-input>
                                            </div>
                                            <div class="options">
                                                <span>选项： </span>
                                                <div>
                                                    <div v-for="(uitem, uindex) in aitem.questionSubjectOptionList"
                                                        :key="uindex" style="display:flex;margin-bottom:10px">
                                                        <el-input placeholder="请输入内容" v-model="uitem.optionName"
                                                            clearable>
                                                        </el-input>
                                                        <el-button icon="el-icon-close" type="text"
                                                            style="color:red;margin-left:10px"
                                                            @click.stop="deloption(aitem, uitem, aindex, uindex)"></el-button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="more">
                                                <el-button size="medium" icon="el-icon-plus" type="text"
                                                    @click.stop="addoption(aitem)">添加选项</el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'" class="item">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title" style="width:85%">
                                            <span>标题： </span>
                                            <el-input placeholder="请输入标题" v-model="item.questionDescription" clearable>
                                            </el-input>
                                        </div>
                                        <div v-for="(aitem, aindex) in item.list" :key="aitem.id" class="combination"
                                            @click.stop="selectquestion(aitem, index, item, aindex)">
                                            <div class="questionName" style="padding-top:0">
                                                {{ aindex + 1 }}. {{ aitem.title }}
                                            </div>
                                            <div class="title">
                                                <span>题目： </span>
                                                <el-input placeholder="请输入题目" v-model="aitem.questionName" clearable>
                                                </el-input>
                                            </div>
                                            <div class="options" style="align-items:center">
                                                <span>回答： </span>
                                                <el-input style="margin:0;width:300px" v-model="aitem.option" disabled
                                                    placeholder="填写问卷时,用户需要在此输入答案" />
                                            </div>
                                            <div class="more">
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'" class="item">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title" style="width:85%">
                                            <span>标题： </span>
                                            <el-input placeholder="请输入标题" v-model="item.questionDescription" clearable>
                                            </el-input>
                                        </div>
                                        <div v-for="(aitem, aindex) in item.list" :key="aitem.id" class="combination"
                                            @click.stop="selectquestion(aitem, index, item, aindex)">
                                            <div class="questionName" style="padding-top:0">
                                                {{ aindex + 1 }}. {{ aitem.title }}
                                            </div>
                                            <div class="title">
                                                <span>题目： </span>
                                                <el-input placeholder="请输入题目" v-model="aitem.questionName" clearable>
                                                </el-input>
                                            </div>
                                            <div class="options">
                                                <span>选项： </span>
                                                <div>
                                                    <el-select v-model="aitem.optionCount" placeholder="请选择"
                                                        @change="selectchange($event, aitem)" style="padding-left:10px">
                                                        <el-option v-for="yitem in optionlist" :key="yitem.value"
                                                            :label="yitem.label" :value="yitem.value">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                            </div>
                                            <div class="more">
                                                <el-radio-group>
                                                    <el-radio :label="1" disabled
                                                        v-if="aitem.optionCount > 0">1</el-radio>
                                                    <el-radio :label="2" disabled
                                                        v-if="aitem.optionCount > 1">2</el-radio>
                                                    <el-radio :label="3" disabled
                                                        v-if="aitem.optionCount > 2">3</el-radio>
                                                    <el-radio :label="4" disabled
                                                        v-if="aitem.optionCount > 3">4</el-radio>
                                                    <el-radio :label="5" disabled
                                                        v-if="aitem.optionCount > 4">5</el-radio>
                                                </el-radio-group>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'DATE_BLANKS_SUBJECT'" class="item"
                                        @click.stop="selectquestion(item, index)">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title">
                                            <span>题目： </span>
                                            <el-input placeholder="请输入题目" v-model="item.questionName" clearable>
                                            </el-input>
                                        </div>
                                        <div class="options" style="align-items:center">
                                            <span>回答： </span>
                                            <el-input style="" disabled prefix-icon="el-icon-date"
                                                placeholder="填写问卷时,用户在此选择日期" />
                                        </div>
                                        <div class="more">
                                        </div>
                                    </div>
                                    <div v-if="item.questionType == 'TIME_BLANKS_SUBJECT'" class="item"
                                        @click.stop="selectquestion(item, index)">
                                        <img src="@/assets/system/yidong.png" alt="" class="delicon yidong">
                                        <img src="@/assets/system/gb.png" alt="" class="delicon"
                                            @click.stop="delquestion(item, index)">
                                        <div class="questionName">
                                            {{ index + 1 }}. {{ item.title }}
                                        </div>
                                        <div class="title">
                                            <span>题目： </span>
                                            <el-input placeholder="请输入题目" v-model="item.questionName" clearable>
                                            </el-input>
                                        </div>
                                        <div class="options" style="align-items:center">
                                            <span>回答： </span>
                                            <el-input style="" v-model="item.option" disabled prefix-icon="el-icon-time"
                                                placeholder="填写问卷时,用户在此选择时间" />
                                        </div>
                                        <div class="more">
                                        </div>
                                    </div>
                                </div>
                            </transition-group>
                        </draggable>
                    </div>
                </div>
                <div class="totalScore">
                    <div class="totalscore-title">
                        总分：{{ questionnaireTotalScore }}分
                    </div>
                    <div class="totalscore-title" style="font-size:14px">
                        Q{{ questionitem.index + 1 }}
                        <span
                            v-if="questionitem.questionType == 'COMBINATION_RADIO_SUBJECT' || questionitem.questionType == 'COMBINATION_MULTIPLE_SUBJECT' || questionitem.questionType == 'COMBINATION_BLANKS_SUBJECT' || questionitem.questionType == 'COMBINATION_SCORING_SUBJECT'">
                            - {{ questionitem.aindex + 1 }}
                        </span>: 整题分值设置
                    </div>
                    <div class="text">是否计分
                        <el-switch v-model="questionitem.whetherScore" :disabled="questionitem.disabled"
                            @change="changeswitch">
                        </el-switch>
                    </div>
                    <div class="text" style="border:none">计分方式</div>
                    <div class="introduce">
                        <el-select v-model="questionitem.scoringMethod" placeholder="请选择计分方式" clearable
                            style="width:200px" disabled>
                            <el-option v-for="dict in dict.type.scoring_method" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </div>
                    <div v-if="questionitem.scoringMethod == 'NOT_UNIQUE_ANSWER' && questionitem.whetherScore">
                        <div class="text" style="border:none">各选项分值
                        </div>
                        <div v-for="item in questionitem.questionSubjectOptionList" :key="item.optionid"
                            class="optionitem">
                            <div class="optionName">
                                {{ item.optionName }}
                            </div>
                            <el-input-number v-model="item.optionScore" :min="0" :max="100"
                                :controls="false"></el-input-number>
                            <span style="padding-left:10px">
                                分
                            </span>
                        </div>
                    </div>
                    <div v-if="questionitem.scoringMethod == 'UNIQUE_ANSWER' && questionitem.whetherScore">
                        <div class="text" style="border:none">本题答案及答案分值
                        </div>
                        <div v-for="item in questionitem.questionSubjectOptionList" :key="item.optionid"
                            class="optionitem">
                            <div class="optionName">
                                <!-- <el-checkbox v-model="item.checked" :label="item.optionName"></el-checkbox> -->
                                {{ item.optionName }}
                            </div>
                            <el-input-number v-model="item.optionScore" :min="0" :max="100"
                                :controls="false"></el-input-number>
                            <!-- :disabled="!item.checked" -->
                            <span style="padding-left:10px">
                                分
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getQuestion, addQuestion, updateQuestion } from "@/api/system/question";
import draggable from 'vuedraggable'
export default {
    name: "addQuestionnaire",
    dicts: ['scoring_method'],
    components: {
        draggable
    },
    data() {
        return {
            id: 99999999999,
            optionid: 99,
            otherQuestiontypes: [
                {
                    id: 'DATE_BLANKS_SUBJECT',
                    name: '日期填空题',
                    src: require('@/assets/system/riqi.png')
                },
                {
                    id: 'TIME_BLANKS_SUBJECT',
                    name: '时间填空题',
                    src: require('@/assets/system/shijian.png')
                },
            ],
            combinationQuestiontypes: [
                {
                    id: 'COMBINATION_RADIO_SUBJECT',
                    name: '组合单选题',
                    src: require('@/assets/system/danxuans.png')
                },
                {
                    id: 'COMBINATION_MULTIPLE_SUBJECT',
                    name: '组合多选题',
                    src: require('@/assets/system/duoxuans.png')
                },
                {
                    id: 'COMBINATION_BLANKS_SUBJECT',
                    name: '组合填空题',
                    src: require('@/assets/system/tiankongs.png')
                },
                {
                    id: 'COMBINATION_SCORING_SUBJECT',
                    name: '组合打分题',
                    src: require('@/assets/system/dafens.png')
                },
            ],
            basicQuestiontypes: [
                {
                    id: 'MULTIPLE_CHOICE',
                    name: '单选题',
                    src: require('@/assets/system/danxuan.png')
                },
                {
                    id: 'MULTIPLE_CHOICE_QUESTIONS',
                    name: '多选题',
                    src: require('@/assets/system/duoxuan.png')
                },
                {
                    id: 'FILL_IN_THE_BLANKS',
                    name: '填空题',
                    src: require('@/assets/system/tiankong.png')
                },
                {
                    id: 'SCORING_QUESTIONS',
                    name: '打分题',
                    src: require('@/assets/system/dafen.png')
                },
            ],
            list: {
                questionnaireName: undefined,
                questionnaireDescription: undefined,
                questionnaireTotalScore: 0,  //总分
                questionSubjectList: [],
                questionType: undefined,
            },
            //题目arr
            questionlist: [],
            //打分题选项
            optionlist: [{
                value: 2,
                label: '2'
            }, {
                value: 3,
                label: '3'
            }, {
                value: 4,
                label: '4'
            }, {
                value: 5,
                label: '5'
            }],
            //选择的题目list
            questionitem: {
                scoringMethod: '',
                whetherScore: false,
                disabled: true,
                index: -1,
            },
        };
    },
    watch: {
    },
    created() {
        if (this.$route.query.id) {
            this.info();
        }
    },
    computed: {
        questionnaireTotalScore: function () {
            var score = 0
            this.questionlist.forEach(e => {
                if (e.whetherScore) {
                    if (!e.list) {
                        if (e.questionSubjectOptionList?.length > 0) {
                            if (e.questionType == "MULTIPLE_CHOICE_QUESTIONS") {
                                e.questionScore = e.questionSubjectOptionList[0].optionScore
                                e.questionSubjectOptionList.forEach(el => {
                                    score += el.optionScore
                                })
                            } else {
                                e.questionScore = e.questionSubjectOptionList[0].optionScore
                                e.questionSubjectOptionList.forEach(el => {
                                    if (el.optionScore > e.questionScore) {
                                        e.questionScore = el.optionScore
                                    }
                                })
                                score += e.questionScore
                            }
                        }
                    } else {
                        if (e.questionType == "MULTIPLE_CHOICE_QUESTIONS") {
                            e.list.forEach(el => {
                                el.questionScore = el.questionSubjectOptionList[0].optionScore
                                el.questionSubjectOptionList.forEach(ele => {
                                    score += ele.questionScore
                                })
                            })
                        } else {
                            e.list.forEach(el => {
                                el.questionScore = el.questionSubjectOptionList[0].optionScore
                                el.questionSubjectOptionList.forEach(ele => {
                                    if (ele.optionScore > el.questionScore) {
                                        el.questionScore = ele.optionScore
                                    }
                                })
                                score += el.questionScore
                            })
                        }
                    }
                }
            })
            this.list.questionnaireTotalScore = score
            return score
        },
    },
    methods: {
        addquestion(item) {
            this.id++
            if (this.questionlist.length > 0) {
                if (this.questionlist[this.questionlist.length - 1].questionName == '' || this.questionlist[this.questionlist.length - 1].questionDescription == '') {
                    return this.$message.error('请填写完在继续添加');
                }
            }
            if (item.id == 'MULTIPLE_CHOICE') {
                this.questionlist.push({
                    questionType: 'MULTIPLE_CHOICE',
                    id: this.id++,
                    title: '单选题',
                    questionName: '',
                    questionNumber: '',
                    //是否计分
                    whetherScore: false,
                    disabled: false,
                    //计分方式
                    scoringMethod: '',
                    questionSubjectOptionList: [{
                        optionid: ++this.optionid,
                        optionName: '',
                        optionAnswer: '',
                        //题目名称
                        questionName: '',
                        //题目序号
                        questionNumber: '',
                        optionScore: 0,
                    }, {
                        optionid: ++this.optionid,
                        optionName: '',
                        optionAnswer: '',
                        //题目名称
                        questionName: '',
                        //题目序号
                        questionNumber: '',
                        optionScore: 0,
                    }],
                })
            } else if (item.id == 'MULTIPLE_CHOICE_QUESTIONS') {
                this.questionlist.push({
                    questionType: 'MULTIPLE_CHOICE_QUESTIONS',
                    id: this.id++,
                    questionName: '',
                    title: '多选题',
                    questionSubjectOptionList: [{
                        optionid: ++this.optionid,
                        optionName: '',
                        optionAnswer: '',
                        //题目名称
                        questionName: '',
                        //题目序号
                        questionNumber: '',
                        optionScore: 0,
                    }, {
                        optionid: ++this.optionid,
                        optionName: '',
                        optionAnswer: '',
                        //题目名称
                        questionName: '',
                        //题目序号
                        questionNumber: '',
                        optionScore: 0,
                    }],
                    //是否计分
                    whetherScore: false,
                    disabled: false,
                    //计分方式
                    scoringMethod: '',
                })
            } else if (item.id == 'FILL_IN_THE_BLANKS') {
                this.questionlist.push({
                    questionType: 'FILL_IN_THE_BLANKS',
                    id: this.id++,
                    questionName: '',
                    title: '填空题',
                    //是否计分
                    whetherScore: false,
                    disabled: true,
                })
            } else if (item.id == 'SCORING_QUESTIONS') {
                this.questionlist.push({
                    questionType: 'SCORING_QUESTIONS',
                    id: this.id,
                    questionName: '',
                    title: '打分题',
                    //是否计分
                    whetherScore: false,
                    disabled: false,
                    optionCount: '',
                    //计分方式
                    scoringMethod: '',
                    questionSubjectOptionList: [],
                })
            } else if (item.id == 'COMBINATION_RADIO_SUBJECT') {
                this.questionlist.push({
                    title: '组合单选题',
                    questionType: 'COMBINATION_RADIO_SUBJECT',
                    id: this.id++,
                    questionDescription: '',
                    list: [
                        {
                            questionType: 'COMBINATION_RADIO_SUBJECT',
                            id: this.id++,
                            questionName: '',
                            title: '单选题',
                            //是否计分
                            whetherScore: false,
                            disabled: false,
                            //计分方式
                            scoringMethod: '',
                            questionDescription: '',
                            questionSubjectOptionList: [{
                                optionid: ++this.optionid,
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                                optionAnswer: '',
                                optionName: '',
                                optionScore: 0,
                            }, {
                                optionid: ++this.optionid,
                                optionName: '',
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                                optionScore: 0,
                                optionAnswer: '',
                            }],
                        }, {
                            questionType: 'COMBINATION_RADIO_SUBJECT',
                            id: this.id++,
                            questionName: '',
                            title: '单选题',
                            //是否计分
                            whetherScore: false,
                            disabled: false,
                            //计分方式
                            scoringMethod: '',
                            questionDescription: '',
                            questionSubjectOptionList: [{
                                optionid: ++this.optionid,
                                optionName: '',
                                optionAnswer: '',
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                                optionScore: 0,
                            }, {
                                optionid: ++this.optionid,
                                optionName: '',
                                optionScore: 0,
                                optionAnswer: '',
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                            }],
                        },
                    ],
                })
            } else if (item.id == 'COMBINATION_MULTIPLE_SUBJECT') {
                this.questionlist.push({
                    title: '组合多选题',
                    questionDescription: '',
                    questionType: 'COMBINATION_MULTIPLE_SUBJECT',
                    id: this.id++,
                    list: [
                        {
                            questionType: 'COMBINATION_MULTIPLE_SUBJECT',
                            id: this.id++,
                            questionName: '',
                            questionDescription: '',
                            title: '多选题',
                            questionSubjectOptionList: [{
                                optionid: ++this.optionid,
                                optionName: '',
                                optionScore: 0,
                                // checked: false,
                                optionAnswer: '',
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                            }, {
                                optionid: ++this.optionid,
                                optionScore: 0,
                                optionName: '',
                                // checked: false,
                                optionAnswer: '',
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                            }],
                            //是否计分
                            whetherScore: false,
                            disabled: false,
                            //计分方式
                            scoringMethod: '',
                        }, {
                            questionType: 'COMBINATION_MULTIPLE_SUBJECT',
                            id: this.id++,
                            questionName: '',
                            questionDescription: '',
                            title: '多选题',
                            questionSubjectOptionList: [{
                                optionid: ++this.optionid,
                                optionName: '',
                                optionScore: 0,
                                // checked: false,
                                optionAnswer: '',
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                            }, {
                                optionid: ++this.optionid,
                                optionScore: 0,
                                optionName: '',
                                // checked: false,
                                optionAnswer: '',
                                //题目名称
                                questionName: undefined,
                                //题目序号
                                questionNumber: undefined,
                            }],
                            //是否计分
                            whetherScore: false,
                            disabled: false,
                            //计分方式
                            scoringMethod: '',
                        },
                    ],
                })
            } else if (item.id == 'COMBINATION_BLANKS_SUBJECT') {
                this.questionlist.push({
                    title: '组合填空题',
                    questionDescription: '',
                    questionType: 'COMBINATION_BLANKS_SUBJECT',
                    id: this.id++,
                    list: [
                        {
                            questionType: 'COMBINATION_BLANKS_SUBJECT',
                            id: this.id++,
                            questionDescription: '',
                            questionName: '',
                            title: '填空题',
                            //是否计分
                            whetherScore: false,
                            disabled: true,
                        }, {
                            questionType: 'COMBINATION_BLANKS_SUBJECT',
                            questionDescription: '',
                            id: this.id++,
                            questionName: '',
                            title: '填空题',
                            //是否计分
                            whetherScore: false,
                            disabled: true,
                        },
                    ],
                })
            } else if (item.id == 'COMBINATION_SCORING_SUBJECT') {
                this.questionlist.push({
                    title: '组合打分题',
                    questionDescription: '',
                    questionType: 'COMBINATION_SCORING_SUBJECT',
                    id: this.id++,
                    list: [
                        {
                            questionType: 'COMBINATION_SCORING_SUBJECT',
                            id: this.id++,
                            questionName: '',
                            questionDescription: '',
                            optionCount: '',
                            title: '打分题',
                            //是否计分
                            whetherScore: false,
                            disabled: false,
                            //计分方式
                            scoringMethod: '',
                            questionSubjectOptionList: [],
                        }, {
                            questionType: 'COMBINATION_SCORING_SUBJECT',
                            id: this.id++,
                            questionDescription: '',
                            optionCount: '',
                            questionName: '',
                            title: '打分题',
                            //是否计分
                            whetherScore: false,
                            disabled: false,
                            //计分方式
                            scoringMethod: '',
                            questionSubjectOptionList: [],
                        },
                    ],
                })
            } else if (item.id == 'DATE_BLANKS_SUBJECT') {
                this.questionlist.push({
                    questionType: 'DATE_BLANKS_SUBJECT',
                    id: this.id++,
                    questionName: '',
                    questionNumber: '',
                    title: '日期填空题',
                    //是否计分
                    whetherScore: false,
                    disabled: true,
                })
            } else if (item.id == 'TIME_BLANKS_SUBJECT') {
                this.questionlist.push({
                    questionType: 'TIME_BLANKS_SUBJECT',
                    id: this.id++,
                    questionNumber: '',
                    questionName: '',
                    title: '时间填空题',
                    //是否计分
                    whetherScore: false,
                    disabled: true,
                })
            }
            if (this.questionlist.length == 1) {
                this.questionitem = this.questionlist[0]
                this.questionitem.index = 0
                if (item.id == 'COMBINATION_RADIO_SUBJECT' || item.id == 'COMBINATION_MULTIPLE_SUBJECT' || item.id == 'COMBINATION_BLANKS_SUBJECT' || item.id == 'COMBINATION_SCORING_SUBJECT') {
                    this.questionitem = this.questionlist[0].list[0]
                    this.questionitem.index = 0
                    this.questionitem.aindex = 0
                }
            }
        },
        selectquestion(item, index, topitem, aindex) {
            this.questionitem = item
            this.questionitem.index = index
            if (this.questionitem.questionType == 'COMBINATION_RADIO_SUBJECT' || this.questionitem.questionType == 'COMBINATION_MULTIPLE_SUBJECT' || this.questionitem.questionType == 'COMBINATION_BLANKS_SUBJECT' || this.questionitem.questionType == 'COMBINATION_SCORING_SUBJECT') {
                this.questionitem.aindex = aindex
            }
        },
        delquestion(item, index) {
            console.log(index)
            if (this.questionlist.length == 1) {
                this.$message.error('请保留一条题目！');
                return
            }
            if (this.questionitem.id == this.questionlist[index].id) {
                this.questionlist.splice(index, 1)
                let aindex = 0
                this.questionlist.forEach(e => {
                    e.index = aindex++
                })
                this.questionitem = this.questionlist[0]
                this.questionitem.index = 0
            } else {
                this.questionlist.splice(index, 1)
                let aindex = 0
                this.questionlist.forEach(e => {
                    e.index = aindex++
                })
            }
        },
        addoption(item) {
            if (item.questionSubjectOptionList.length == 6) {
                return this.$message.error('多选最多为六个选项！');
            }
            item.questionSubjectOptionList.push({
                optionid: ++this.optionid,
                optionName: '',
                optionScore: 0,
                optionAnswer: '',
                // checked: false,
            })
        },
        deloption(item, uitem, index, uindex) {
            if (item.questionSubjectOptionList.length > 2) {
                item.questionSubjectOptionList.splice(uindex, 1)
            } else {
                this.$message.error('最少保留两条选项！');
            }
        },
        changeswitch(e) {
            if (e) {
                if (this.questionitem.questionType == 'MULTIPLE_CHOICE' || this.questionitem.questionType == 'SCORING_QUESTIONS' || this.questionitem.questionType == 'COMBINATION_SCORING_SUBJECT' || this.questionitem.questionType == 'COMBINATION_RADIO_SUBJECT') {
                    this.questionitem.scoringMethod = 'NOT_UNIQUE_ANSWER'
                } else if (this.questionitem.questionType == 'MULTIPLE_CHOICE_QUESTIONS' || this.questionitem.questionType == 'COMBINATION_MULTIPLE_SUBJECT') {
                    this.questionitem.scoringMethod = 'UNIQUE_ANSWER'
                }
            } else {
                this.questionitem.scoringMethod = ''
            }
        },
        selectchange(e, item) {
            item.questionSubjectOptionList = []
            for (var i = 0; i < e; i++) {
                item.questionSubjectOptionList.push({
                    optionid: ++this.optionid,
                    optionName: i + 1,
                    optionScore: 0,
                    // checked: false,
                    optionAnswer: '',
                    //题目名称
                    questionName: undefined,
                    //题目序号
                    questionNumber: undefined,
                })
            }
        },
        //保存
        upload() {
            if (!this.list.questionType) {
                this.$message.error('请选择问卷类型！');
                return
            }
            this.list.questionSubjectList = []
            this.questionlist.forEach((e, eindex) => {
                e.questionNumber = eindex + 1
                if (e.questionType == 'COMBINATION_RADIO_SUBJECT' || e.questionType == 'COMBINATION_MULTIPLE_SUBJECT' || e.questionType == 'COMBINATION_BLANKS_SUBJECT' || e.questionType == 'COMBINATION_SCORING_SUBJECT') {
                    e.list.forEach((el, elindex) => {
                        el.questionDescription = e.questionDescription
                        el.questionNumber = (eindex + 1) + '.' + (elindex + 1)
                        if (e.questionType != 'COMBINATION_BLANKS_SUBJECT') {
                            el.questionSubjectOptionList.forEach(ele => {
                                ele.optionAnswer = ele.optionName
                                ele.questionName = el.questionName
                                ele.questionNumber = el.questionNumber
                            })
                        }
                        this.list.questionSubjectList.push(el)
                    })
                } else {
                    if (e.questionType != 'DATE_BLANKS_SUBJECT' && e.questionType != 'TIME_BLANKS_SUBJECT' && e.questionType != 'FILL_IN_THE_BLANKS') {
                        e.questionSubjectOptionList.forEach(el => {
                            el.optionAnswer = el.optionName
                            el.questionName = e.questionName
                            el.questionNumber = e.questionNumber
                        })
                    }
                    this.list.questionSubjectList.push(e)
                }
            })
            this.list.questionSubjectList?.forEach(e => {
                e.questionNumber = Number(e.questionNumber)
                e.questionSubjectOptionList?.forEach(el => {
                    el.questionNumber = Number(el.questionNumber)
                })
            })
            this.list.questionCount = this.questionlist.length
            if (this.$route.query.id) {
                updateQuestion(this.list).then(res => {
                    this.$confirm('编辑保存成功, 是否返回上一页?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                            this.$router.push({
                                path: "/knowledge/question",
                            });
                        })
                    }).catch(() => {
                        this.$modal.msgSuccess("编辑保存成功");
                    });
                })
            } else {
                addQuestion(this.list).then(res => {
                    this.$confirm('新增保存成功, 是否返回上一页?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {
                        this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                            this.$router.push({
                                path: "/knowledge/question",
                            });
                        })
                    }).catch(() => {
                        this.$modal.msgSuccess("新增保存成功");
                    });
                })
            }
        },
        //保存并发布
        releaseupload() { },
        info() {
            getQuestion(this.$route.query.id).then(res => {
                this.list = res.data
                res.data.questionSubjectList.forEach(e => {
                    if (e.questionType == 'MULTIPLE_CHOICE') {
                        e.title = '单选题'
                        this.questionlist.push(e)
                    } else if (e.questionType == 'MULTIPLE_CHOICE_QUESTIONS') {
                        e.title = '多选题'
                        this.questionlist.push(e)
                    } else if (e.questionType == 'FILL_IN_THE_BLANKS') {
                        e.title = '填空题'
                        this.questionlist.push(e)
                    } else if (e.questionType == 'SCORING_QUESTIONS') {
                        e.title = '打分题'
                        this.questionlist.push(e)
                    } else if (e.questionType == 'DATE_BLANKS_SUBJECT') {
                        e.title = '日期填空题'
                        this.questionlist.push(e)
                    } else if (e.questionType == 'TIME_BLANKS_SUBJECT') {
                        e.title = '时间填空题'
                        this.questionlist.push(e)
                    } else if (e.questionType == 'COMBINATION_RADIO_SUBJECT') {
                        e.title = '单选题'
                    } else if (e.questionType == 'COMBINATION_MULTIPLE_SUBJECT') {
                        e.title = '多选题'
                    } else if (e.questionType == 'COMBINATION_BLANKS_SUBJECT') {
                        e.title = '填空题'
                    } else if (e.questionType == 'COMBINATION_SCORING_SUBJECT') {
                        e.title = '打分题'
                    }
                })
                var data = res.data.questionSubjectList.filter(e => e.questionType == 'COMBINATION_RADIO_SUBJECT' || e.questionType == 'COMBINATION_MULTIPLE_SUBJECT' || e.questionType == 'COMBINATION_BLANKS_SUBJECT' || e.questionType == 'COMBINATION_BLANKS_SUBJECT')
                var echararr = [];
                for (var i = 0; i < data.length; i++) {
                    var arrindex = echararr.findIndex((item, index, arr) => { return item.questionDescription === data[i].questionDescription })//获取下标
                    if (arrindex == -1) {//不存在盘符数据的添加盘符数据
                        echararr.push({
                            title: data[i].questionType == 'COMBINATION_RADIO_SUBJECT' ? '组合单选题' : data[i].questionType == 'COMBINATION_MULTIPLE_SUBJECT' ? '组合多选题' : data[i].questionType == 'COMBINATION_BLANKS_SUBJECT' ? '组合填空题' : data[i].questionType == 'COMBINATION_SCORING_SUBJECT' ? '组合打分题' : '',
                            questionType: data[i].questionType,
                            id: this.id++,
                            questionDescription: data[i].questionDescription,
                            list: [data[i]]
                        });
                    } else {//有盘符则往盘符数据中添加
                        echararr[arrindex].list.push(data[i])
                    }
                }
                this.questionlist = [...this.questionlist, ...echararr]
            })
        },
        goback() {
            this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                this.$router.push({
                    path: "/knowledge/question",
                });
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 14px 0 0;
    background-color: #F2F3F5 !important;
    width: 100%;

    .header {
        background-color: #fff;
        width: 98%;
        margin: 0 auto;
        border-radius: 8px;

        .bottomheader {
            width: 98%;
            background-color: #F2F3F5 !important;
            margin: 14px auto;
            padding: 30px 0;
            display: flex;

            .questionlist {
                margin-top: 40px;

                .item {
                    position: relative;
                }

                .delicon {
                    position: absolute;
                    top: 10px;
                    width: 16px;
                    height: 16px;
                    right: 10px;
                    color: red;
                }

                .yidong {
                    right: 50px;
                }

                .questionitem {
                    padding-bottom: 1px;
                    border-radius: 5px;
                    margin: 40px auto;
                    background-color: #fff;
                    box-shadow: 0px 2px 4px 0px rgba(162, 162, 162, 0.5);
                    width: 100%;
                    margin: 20px auto;

                    .combination {
                        border-radius: 5px;
                        padding-top: 25px;
                        width: 90%;
                        margin: 30px auto;
                        box-shadow: 0 0px 6px 3px rgba(162, 162, 162, 0.5);
                    }

                    .more {
                        display: flex;
                        border-radius: 5px;
                        margin: 0 auto;
                        background-color: #fff;
                        width: 60%;
                        padding: 30px 0;
                    }

                    .options {
                        display: flex;
                        border-radius: 5px;
                        margin: 40px auto;
                        background-color: #fff;
                        width: 80%;
                        margin: 0 auto;

                        span {
                            display: inline-block;
                            width: 60px;
                            line-height: 35px;
                        }

                        .el-input {
                            margin-left: 10px !important;
                            display: block;
                            border: none;
                            border-radius: 5px;
                            height: 30px;
                            line-height: 30px;
                            margin-bottom: 14px;
                            margin: 0;
                            width: 300px
                        }
                    }

                    .title {
                        width: 80%;
                        margin: 20px auto 30px;
                        text-align: left;

                        span {
                            display: inline-block;
                            width: 60px;
                        }

                        .el-input {
                            border: none;
                            padding-left: 10px;
                            border-radius: 5px;
                            width: 400px;
                            height: 30px;
                            line-height: 30px;
                        }
                    }

                    .questionName {
                        padding: 20px 0 0 20px;
                    }
                }
            }

            .totalScore {
                width: 20%;
                margin-left: 20px;
                height: 790px;
                background: #FFFFFF;
                overflow: scroll;
                overflow-x: hidden !important;

                .optionitem {
                    width: 80%;
                    height: 36px;
                    margin: 20px auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;

                    .optionName {
                        width: 50%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    ::v-deep .el-input-number {
                        width: 56px;
                    }
                }

                .text {
                    font-size: 16px;
                    color: #333333;
                    line-height: 30px;
                    width: calc(100% - 60px);
                    margin: 20px auto 0;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #E2E2E2;
                }

                .introduce {
                    width: calc(100% - 60px);
                    margin: 0 auto;
                    font-size: 14px;
                    color: #999999;
                    line-height: 30px;
                    padding-bottom: 10px;
                    text-align: left;
                    border-bottom: 1px solid #E2E2E2;
                }

                .totalscore-title {
                    padding: 20px 0 0 20px;
                    font-weight: 600;
                    font-size: 26px;
                    color: #333333;
                    line-height: 30px;
                }
            }

            .questionnairedetails {
                padding-left: 30px;
                width: calc(60% - 30px);
                overflow: scroll;
                overflow-x: hidden !important;
                height: 790px;

                .editor {
                    background-color: #fff;
                    box-shadow: 0px 2px 4px 0px rgba(162, 162, 162, 0.5);
                    border-radius: 4px;
                    border: none;
                }

                .addArea {
                    margin: 40px 0;
                    width: 100%;
                    border-radius: 8px;
                    border: 1px dashed #999999;
                }

                .addtext {
                    font-weight: 400;
                    font-size: 12px;
                    color: #999999;
                    line-height: 100px;
                    text-align: center;
                }

                .title-input {
                    width: 700px;
                    height: 40px;
                    padding-left: 20px;
                    background: #FFFFFF;
                    border: none;
                    box-shadow: 0px 2px 4px 0px rgba(162, 162, 162, 0.5);
                    border-radius: 4px;
                }

                .questionnaire-title {
                    font-size: 22px;
                    margin-bottom: 15px;
                    color: #333333;
                }
            }

            .questiontypes {
                width: calc(20% - 30px);
                margin: 0 0 0 30px;
                height: 790px;
                background: #FFFFFF;

                .texts:hover {
                    box-shadow: 2px 3px 3px 2px rgba(162, 162, 162, 0.5);
                }

                .texts:active {
                    background-color: #E8F4FF;
                }

                .texts {
                    border-radius: 5px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    height: 50px;
                    padding: 0 0 0 30px;

                    div {
                        margin-left: 10px;
                        font-weight: 600;
                        font-size: 16px;
                        color: #333333;
                        line-height: 30px;
                    }

                    img {
                        width: 20px;
                        height: 20px;
                    }
                }

                .typetitle {
                    padding: 20px 0 10px 20px;
                    font-weight: 600;
                    font-size: 22px;
                    color: #666666;
                    line-height: 30px;
                }
            }
        }

        .topheader {
            width: 50%;
            display: inline-block;
            padding-right: 30px;
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #D9D9D9;
        }
    }
}
</style>
