<div class="page">
    <HeaderMain></HeaderMain>
    <main class="main-content">
        <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">{{currentProject}} <i class="el-icon-caret-bottom icon-right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="无锡路劲">无锡路劲</el-dropdown-item>
                    <el-dropdown-item command="宁波WIII">宁波WIII</el-dropdown-item>
                    <el-dropdown-item command="香港置地">香港置地</el-dropdown-item>
                    <el-dropdown-item command="河南建业">河南建业</el-dropdown-item>
                    <el-dropdown-item command="西安金茂府">西安金茂府</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <div class="content">
            <div class="item-test" v-for="(item, index) in tests" :key="index">
                <div class="item-left">
                    <img style="width:22px; height:22px;" src="../../assets/images/test-icon@2x.png" alt="">
                    <span>定制你的家居香气</span>
                </div>
                <div class="item-right">
                    <span class="project-name">无锡路劲</span>
                    <span class="qr-num">共21题</span>
                    <div class="watch-test" @click="showQRDialog(index)">
                        <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">
            <img class="close" src="../../assets/images/close-white.png" alt="" @click="close">
            <div class="content-box">
                <div class="dialog-title">标题：测测你的隐形人格</div>
                <div class="dialog-qr" ref="dialogQR" v-loading="loading">
                    <div class="qr-item">
                        <span class="title">题目一：你的个人情况是什么样的？</span>
                        <div class="qr-as-text">
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                        </div>
                    </div>
                    <div class="qr-item">
                        <span class="title">题目二：你的个人情况是什么样的？</span>
                        <div class="qr-as-img">
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                            <div class="qr-img">
                                <img class="qr-image"
                                    src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565170081382&di=376f9d3f796303d14bcae93c939ed6f0&imgtype=0&src=http%3A%2F%2Fpic107.nipic.com%2Ffile%2F20160819%2F21074618_162727428000_2.jpg"
                                    alt="">
                                <span class="qr-desc">A.就是否会对减肥后视镜大黄蜂季jdjd度的</span>
                            </div>
                        </div>
                    </div>
                    <div class="qr-item">
                        <span class="title">题目一：你的个人情况是什么样的？</span>
                        <div class="qr-as-text">
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                            <span>A.50后、60后</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>