<div class="page">
    <HeaderMain></HeaderMain>
    <main class="main-content" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="title-content">
            <div class="create-test-box">
                <div class="create-test">创建测试</div>
                <img style="width:16px; height:20px; margin-left: 7px; margin-right: 7px;"
                    src="../../assets/images/right-arrow.png" alt="">
                <div class="select-test">选择测题</div>
            </div>
            <el-dropdown class="selection" trigger="click" @command="handleCommand">
                <el-button type="primary" style="overflow: hidden;">{{currentProject}} <i
                        class="el-icon-caret-bottom icon-right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" style="max-height: 200px;overflow-y: auto">
                    <el-dropdown-item v-for="(item, index) in houseList" :key="item.houseId" :command="item.houseId">
                        {{item.houseName}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <div class="content" v-if="pageModel!=null && pageModel.resultSet!=null">
            <div class="item-test" v-for="(item, index) in pageModel.resultSet" :key="index">
                <div class="item-left">
                    <img style="width:22px; height:22px;" src="../../assets/images/test-icon@2x.png" alt="">
                    <span>{{item.title}}</span>
                </div>
                <div class="item-right">
                    <span class="project-name">{{item.houseName}}</span>
                    <span class="qr-num">共{{item.questionCount}}题</span>
                    <div class="watch-test" @click="showQRDialog(item.testcaseId)">
                        <div class="watch-icon">
                        </div>
                        <span>查看测试</span>
                    </div>
                    <div class="use-test">
                        <div class="use-icon">
                        </div>
                        <span>使用此测试</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="dialog" v-show="isShowDialog">
        <div class="dialog-content" v-if="cncTestDetailSingle!=null">
            <img class="close" src="../../assets/images/close-white.png" alt="" @click="close">
            <div class="content-box">
                <div class="dialog-title">标题：{{cncTestDetailSingle.title}}</div>
                <div class="dialog-qr" ref="dialogQR" v-loading="loading">
                    <div style="border-bottom: #D4D4D4 solid 1px;" v-for="(questionItem, index) in cncTestDetailSingle.questionList" :key="index">
                        <div class="qr-item"
                            v-if="questionItem.optionList[0]!=null && (questionItem.optionList[0].imageUrl==null||questionItem.optionList[0].imageUrl=='')">
                            <span class="title">{{index+1|currentOptionNum}}：{{questionItem.content}}</span>
                            <div class="qr-as-text">
                                <span v-for="(qrItem, index) in questionItem.optionList"
                                    :key="qrItem.optionId">{{index+1|transtion}}. {{qrItem.content}}</span>
                            </div>
                        </div>
                        <div class="qr-item" v-else>
                            <span class="title">{{index+1|currentOptionNum}}：{{questionItem.content}}</span>
                            <div class="qr-as-img">
                                <div class="qr-img" v-for="(qrItem, index) in questionItem.optionList"
                                    :key="qrItem.optionId">
                                    <img class="qr-image" :src="qrItem.imageUrl" alt="">
                                    <span class="qr-desc">{{index+1|transtion}}. {{qrItem.content}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>