<template>
    <div class="wrap">
         <!-- src="@/assets/img/manager.png" -->
        <img class="sth manager" v-lazy="lazy1" alt="">
        <div class="sth guide" @click="toPart" alt="">
            返回
        </div>
        <div class="actions">
            <ul class="btns">
                <li @click="showTake" class=" duration-1000">取号</li>
                <li @click="showData" class=" duration-1000">填单</li>
                <li @click="showCopy" class=" duration-1000">复印</li>
                <li @click="showRecaption" class=" duration-1000">取回</li>
            </ul>
        </div>
        <el-dialog :visible.sync="takeVisible" style="width: 100%" @close="closeTake" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
            <div slot="title" class="dia-header">
                <div class="data-title">取号机</div>
                <img class="close" src="@/assets/svg/close.svg" alt="" @click="closeTakeDia">
            </div>
            <p class="tips">- 请选择办理的业务 -</p>
            <ul class="take-list">
                <!-- @click="checkTake(index)" -->
                <li v-for="(item, index) in handleBusiness" :class="{checked: takeCheck == index}" :key="item.key"  @click="checkTake(index)">
                    <img :src="item.img" :alt="item.name" :title="item.name">
                    <p>{{ item.name }}</p>
                </li>
                <!-- <li :class="{checked: takeCheck == 400}" @click="checkTake(400)">
                    <img src="@/assets/svg/cash.svg" alt="">
                    <p>现金业务</p>
                </li>
                <li :class="{checked: takeCheck == 401}" @click="checkTake(401)">
                    <img src="@/assets/svg/non-cash.svg" alt="">
                    <p>个人非现金业务</p>
                </li>
                <li :class="{checked: takeCheck == 402}" @click="checkTake(402)">
                    <img src="@/assets/svg/company.svg" alt="">
                    <p>公司业务</p>
                </li>
                <li :class="{checked: takeCheck == 403}" @click="checkTake(403)">
                    <img src="@/assets/svg/financial.svg" alt="">
                    <p>理财业务</p>
                </li> -->
            </ul>
            <div class="dia-footer">
                <button type="button" @click="confirmTake" v-throttle>确定</button>
            </div>
        </el-dialog>
        <!-- :visible.sync="takeResultVisible" -->
        <el-dialog  :visible.sync="takeResultVisible" width="400px" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
            <div slot="title" class="dia-header">
                <div class="data-title">{{ workingName + '机'}}</div>
                <img class="close" src="@/assets/svg/close.svg" alt="" @click="takeResultVisible = false">
            </div>
            <div class="result">
                <div style='width: 60px;height: 60px;margin: auto'>
                    <img src="@/assets/img/finish.png" alt="">
                </div>
                <h6>{{ workingName + '成功'}}</h6>
                <p v-if="workingName === '取号'" class="text">您选择了{{ handleBusiness[takeCheck]? handleBusiness[takeCheck].name: ''}}</p>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dataVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
            <div slot="title" class="dia-header">
                <div class="data-title">银行单据</div>
                <img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia">
            </div>
            <p class="tips">- 请单击选中所需材料、双击可放大预览 -</p>
            <ul class="list">
                <li :class="{checked: checkList.includes(elImg[0].key)}" @click="checkData(elImg[0].key)">
                    <el-image
                        :src="elImg[0].img"
                        :fit="elImgFit"
                        :title="elImg[0].name"
                        :alt="elImg[0].name"
                        ></el-image>
                    
                    <!-- <img style='width: 100%;height: 154px' src="@/assets/img/goods/accountApplyBook.jpg" alt=""> -->
                    <p>{{ elImg[0].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[1].key)}" @click="checkData(elImg[1].key)">
                    <img :src="elImg[1].img" :alt="elImg[1].name" :title="elImg[1].name">
                    <p>{{ elImg[1].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[2].key)}" @click="checkData(elImg[2].key)">
                    <el-image
                        style="margin-top: 0"
                        :src="elImg[2].img"
                        :fit="elImgFit"
                        ></el-image>
                    <p>{{ elImg[2].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[3].key)}" @click="checkData(elImg[3].key)">
                    <!-- <img class="" :src="elImg[3].img" :alt="elImg[3].name" :title="elImg[3].name"> -->
                    <el-image
                        style="margin-top: 0"
                        :src="elImg[3].img"
                        :fit="elImgFit"
                        ></el-image>
                    <p style="font-size: 14px;line-height: 15px">{{ elImg[3].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[4].key)}" @click="checkData(elImg[4].key)">
                    <img :src="elImg[4].img" :alt="elImg[4].name" :title="elImg[4].name">
                    <p>{{ elImg[4].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[5].key)}" @click="checkData(elImg[5].key)">
                    <img :src="elImg[5].img" :alt="elImg[5].name" :title="elImg[5].name">
                    <p>{{ elImg[5].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[6].key)}" @click="checkData(elImg[6].key)">
                    <!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> -->
                    <el-image
                        :src="elImg[6].img"
                        :fit="elImgFit"
                        :title="elImg[6].name"
                        :alt="elImg[6].name"
                        lazy></el-image>
                    <p>{{ elImg[6].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[7].key)}" @click="checkData(elImg[7].key)">
                    <img style="margin-top: 10px" :src="elImg[7].img" :alt="elImg[7].name" :title="elImg[7].name">
                    <p>{{ elImg[7].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[8].key)}" @click="checkData(elImg[8].key)">
                    <img :src="elImg[8].img" :alt="elImg[8].name" :title="elImg[8].name">
                    <p>{{ elImg[8].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[9].key)}" @click="checkData(elImg[9].key)">
                    <!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> -->
                    <el-image
                        :src="elImg[9].img"
                        :fit="elImgFit"
                        :title="elImg[9].name"
                        :alt="elImg[9].name"
                        lazy></el-image>
                    <p>{{ elImg[9].name }}</p>
                </li>
                <li :class="{checked: checkList.includes(elImg[10].key)}" @click="checkData(elImg[10].key)">
                    <img style="margin-top: 10px" :src="elImg[10].img" :alt="elImg[10].name" :title="elImg[10].name">
                    <p>{{ elImg[10].name }}</p>
                </li>
                <!-- 这个是占位的！ -->
                <li class="sitting2"></li>
                <li class="sitting2"></li>
                <li class="sitting2"></li>
                <li class="sitting2"></li>
            </ul>
            
            
            <div class="dia-footer">
                <button type="button" v-throttle @click="fillIt">确定</button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="copyVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia ">
            <div slot="title" class="dia-header">
                <div class="data-title">复印</div>
                <img class="close" src="@/assets/svg/close.svg" alt="" @click="closeCopyDia">
            </div>
            <p class="tips">- 请单击选中复印材料、双击可放大预览 -</p>
            <ul class="list" style="justify-content: center">
                <li v-for="item in elImg2" :class="{checked: checkList.includes(item.key)}" @click="checkData(item.key)" :key="item.key">
                    <!-- <img :src="item.img" :title="item.name" :alt="item.name"> -->
                    <el-image
                        style="margin-top: -10"
                        :src="item.img"
                        :fit="elImgFit"
                        ></el-image>
                    <p>{{ item.name }}</p>
                </li>
            </ul>
            <div class="dia-footer">
                <button type="button" v-throttle @click="sureCopy">确定</button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="recaptionVisible" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia  ">
            <div slot="title" class="dia-header">
                <div class="data-title">取回</div>
                <img class="close" src="@/assets/svg/close.svg" alt="" @click="closeRecaption">
            </div>
            <p class="tips">- 请单击选中复印材料、双击可放大预览 -</p>
            <ul class="list" style="justify-content: center">
                <li :class="{checked: checkList.includes(13)}" @click="checkData(13)">
                    <img src="@/assets/img/idCard-sm.png" alt="">
                    <p>身份证</p>
                </li>
                <li :class="{checked: checkList.includes(405)}" @click="checkData(405)" style='margin-left: 10px'>
                    <!-- <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt=""> -->
                    <el-image
                        style="margin-top: -10"
                        :src="elImg[0].img"
                        :fit="elImgFit"
                        ></el-image>
                    <p>开户申请书</p>
                </li>
            </ul>
            <div class="dia-footer">
                <button type="button" v-throttle @click="takeBack">确定</button>
            </div>
        </el-dialog>

        <!-- 图片查看器 -->
        <el-dialog
            custom-class="data-dia"
            :visible.sync="showImg"
            width="634px"
            >
            <img :src="imgSrc" class="w-full" alt="">
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
const projectId = sessionStorage.getItem('projectId')
const startTime = sessionStorage.getItem('startTime')
import { addOperation, getOperation } from '@/api/http'
import saveSystemModule from '@/mixins/saveSystemModule'

export default {
    name: 'index',
    data() {
        return {
            workingName: '', // 正在工作的机器
            clickNum: 0, // 点击次数
            imgSrc: '',
            showImg: false,
            takeCheck: -1,
            takeVisible: false,
            takeResultVisible: false,
            dataVisible: false,
            checkList: [],
            copyVisible: false,
            recaptionVisible: false,
            elImgFit: 'contain',
            handleBusiness: [
                { key: 400, name: '现金业务', img: require('@/assets/svg/cash.svg') },
                { key: 401, name: '个人非现金业务', img: require('@/assets/svg/non-cash.svg') },
                { key: 402, name: '公司业务', img: require('@/assets/svg/company.svg') },
                { key: 403, name: '理财业务', img: require('@/assets/svg/financial.svg') }
            ],
            elImg: [
                { img: require('@/assets/img/goods/accountApplyBook.jpg'), name: '开户申请书', key: 405 },
                { img: require('@/assets/img/idCard-copy-sm.png'), name: '密码挂失申请书', key: 406 },
                { img: require('@/assets/img/goods/businessSpecialApplication.png'), name: '特殊业务申请书', key: 407 },
                { img: require('@/assets/img/goods/ApplicationBankSettlement.png'), name: '开立单位银行结算账户申请书', key: 408 },
                { img: require('@/assets/img/goods/CashCertificate.png'), name: '现金存款凭证', key: 409 },
                { img: require('@/assets/img/goods/zzpt.png'), name: '转账凭证', key: 410 },
                { img: require('@/assets/img/goods/xjzp.png'), name: '现金支票', key: 411 },
                { img: require('@/assets/img/goods/sy-zzzp.png'), name: '转账支票', key: 412 },
                { img: require('@/assets/img/goods/CheckCoupons.png'), name: '支票领购单', key: 413 },
                { img: require('@/assets/img/goods/cash-sm.png'), name: '现金缴款单', key: 414 },
                { img: require('@/assets/img/goods/cash-sm.png'), name: '境外汇款申请书', key: 415 },
            ],
            elImg2: [
                
                { img: require('@/assets/img/goods/accountApplyBook.jpg'), name: '开户申请书', key: 405 },
                { img: require('@/assets/img/idCard-sm.png'), name: '身份证', key: 13 },

            ],
            listLi1 : [
                {checked: 1, click: 1, src: require('@/assets/img/goods/accountApplyBook.jpg'), title: '开户申请书'},
                {checked: 2, click: 2, src: require('@/assets/img/idCard-copy-sm.png'), title: '密码挂失申请书'},
                {checked: 3, click: 3, src: require('@/assets/img/goods/businessSpecialApplication.png'), title: '特殊业务申请书'},
                {checked: 4, click: 4, src: require('@/assets/img/goods/cash-sm.png'), title: '开立单位银行结算账户申请书'},
                {checked: 1, click: 5, src: require('@/assets/img/goods/CashCertificate.png'), title: '现金存款凭证'},

                {checked: 2, click: 6, src: require('@/assets/img/goods/zzpt.png'), title: '转账凭证'},
                {checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'},
                {checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金支票'},
                {checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '转账支票'},
                {checked: 2, click: 6, src: require('@/assets/img/idCard-copy-sm.png'), title: '支票领购单'},
                {checked: 3, click: 7, src: require('@/assets/img/open-account-apply-sm.png'), title: '现金缴款单'},
                {checked: 4, click: 8, src: require('@/assets/img/goods/cash-sm.png'), title: '境外汇款申请书'},
            ],
            lazy1: require('@/assets/img/manager.png')
        }
    },
    mixins: [saveSystemModule],
    mounted() {
        
    },
    methods: {
        showTake(type){
            this.workingName = '取号'
            this.takeVisible = true
        },
        checkTake(index){
            if(this.takeCheck === index) {
                this.takeCheck = -1
            }else {
                this.takeCheck = index
            }
        },
        closeTakeDia(){
            this.takeVisible = false
        },
        closeTake(){
            // this.takeCheck = 0
        },
        // 取号
        confirmTake(){
            if(this.takeCheck < 0) {
                this.$message({
                    message: '请选择一个您要办理的业务',
                    type: 'warning',
                    center: true
                });
                return 
            }

            // "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,5,25,33,43"
            const formList = [];
            formList.push({"answerId":this.handleBusiness[this.takeCheck].key,"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286,399,' + this.handleBusiness[this.takeCheck].key, "type": ""})
            const params= {
                parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286,399',
                lcJudgmentRuleReq:formList,
                projectId:+projectId,
                startTime:startTime,
            }
            addOperation(params).then((data)=>{
                this.takeVisible = false
                this.takeResultVisible = true
                setTimeout(() => {
                    if(this.takeResultVisible) {
                        this.takeResultVisible = false
                    }
                }, 700)
            }).catch((error)=>{
                this.$message({
                    showClose: true,
                    message: '网络可能有问题哦,取号失败',
                    type: 'warning',
                    center: true
                });
            })

            
        },
        // 填单
        fillIt() {
            const formList = [];
            const checkList = [...this.checkList]
            if(this.checkList.length <= 0) {
                this.$message({
                    message: '请选择至少一个填单',
                    type: 'warning',
                    center: true
                });
                return 
            }
            for(let i=0; i<checkList.length; i++) {
                formList.push({"answerId":checkList[i],"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286,404,' + checkList[i], "type": ""})
            }
            const params= {
                parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286, 404',
                lcJudgmentRuleReq:formList,
                projectId:+projectId,
                startTime:startTime,
            }
            addOperation(params).then((data)=>{
                // ...
                this.dataVisible = false
                this.checkList = []
                this.takeResultVisible = true
                setTimeout(() => {
                    if(this.takeResultVisible) {
                        this.takeResultVisible = false
                    }
                }, 700)
            }).catch((error)=>{
                this.$message({
                    showClose: true,
                    message: '网络可能有问题哦,填单失败',
                    type: 'warning',
                    center: true
                });
            })
        },
        // 复印
        sureCopy() {
            const formList = [];
            const checkList = [...this.checkList]
            if(this.checkList.length <= 0) {
                this.$message({
                    message: '请选择至少一个文件进行复印',
                    type: 'warning',
                    center: true
                });
                return 
            }
            for(let i=0; i<checkList.length; i++) {
                formList.push({"answerId":checkList[i],"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286,416,' + checkList[i], "type": ""})
            }
            const params= {
                parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286, 416',
                lcJudgmentRuleReq:formList,
                projectId:+projectId,
                startTime:startTime,
            }
            addOperation(params).then((data)=>{
                // ...
                this.copyVisible = false
                this.checkList = []
                this.takeResultVisible = true
                setTimeout(() => {
                    if(this.takeResultVisible) {
                        this.takeResultVisible = false
                    }
                }, 700)
            }).catch((error)=>{
                this.$message({
                    showClose: true,
                    message: '网络可能有问题哦,填单失败',
                    type: 'warning',
                    center: true
                });
            })
        },
        // 取回
        takeBack() {
            const formList = [];
            const checkList = [...this.checkList]
            if(this.checkList.length <= 0) {
                this.$message({
                    message: '请取回至少一个文件',
                    type: 'warning',
                    center: true
                });
                return 
            }
            for(let i=0; i<checkList.length; i++) {
                formList.push({"answerId":checkList[i],"emptyOne": "", "emptyTwo": '', "operationIds": '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286,553,' + checkList[i], "type": ""})
            }
            const params= {
                parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',286, 553',
                lcJudgmentRuleReq:formList,
                projectId:+projectId,
                startTime:startTime,
            }
            addOperation(params).then((data)=>{
                // ...
                this.recaptionVisible = false
                this.checkList = []
                this.takeResultVisible = true
                setTimeout(() => {
                    if(this.takeResultVisible) {
                        this.takeResultVisible = false
                    }
                }, 700)
            }).catch((error)=>{
                this.$message({
                    showClose: true,
                    message: '网络可能有问题哦,填单失败',
                    type: 'warning',
                    center: true
                });
            })
        },
        // 返回跳转路由 没啥好看的
        toPart(){
            this.$router.push('/index/list')
            // let token = sessionStorage.getItem('token')
            // let cid = sessionStorage.getItem('cid')
            // let systemId = sessionStorage.getItem('systemId')

            // let projectId = sessionStorage.getItem('projectId')
            // let  assessmentId = sessionStorage.getItem('assessmentId')
            // let classId =  sessionStorage.getItem('classId')
            // if (projectId){
            //     //线上
            //     // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId
            //     //测试服
            //     location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId
            //     //本地
            //     // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId+'&projectId='+projectId+'&assessmentId='+assessmentId+'&classId='+classId
            // }else{
            //     //线上
            //     // location.href = 'http://www.huorantech.cn/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
            //     //测试服
            //     location.href = 'http://39.108.250.202/banksystem/#/index/list?'+'token='+token+'&cid='+cid+'&systemId='+systemId
            //     // 本地
            //     // location.href = "http://192.168.31.254:8093/#/index/list?"+'token='+token+'&cid='+cid+'&systemId='+systemId
            // }
        },
        dblClickFn(item,val){/* 选中/预览  单/双击函数 */
            let that = this
            this.clickNum++
            if (this.clickNum === 2) {  //  处理双击事件
                this.clickNum = 0;  
                this.showImg = true
                this.imgSrc = item.img
            }
            setTimeout(function () {
                if (that.clickNum === 1) {//  处理单击事件
                    that.clickNum = 0;
                }
            }, 200)
        },
        showData(){
            this.workingName = '填单'
            this.dataVisible = true
        },
        checkData(id){
            this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id),1) : this.checkList.push(id)

            this.clickNum++
            if (this.clickNum === 2) {  //  处理双击事件
                let itemIndex = -1
                if(this.workingName === '填单') {
                    itemIndex = this.elImg.findIndex(item => item.key === id)
                    this.imgSrc = this.elImg[itemIndex].img
                }else if(this.workingName === '复印') {
                    itemIndex = this.elImg2.findIndex(item => item.key === id)
                    this.imgSrc = this.elImg2[itemIndex].img
                }
                this.clickNum = 0;  
                this.showImg = true
                
            }
            setTimeout(() => {
                if (this.clickNum === 1) {//  处理单击事件
                    this.clickNum = 0;
                }
            }, 200)
        },
        closeDataDia(){
            this.dataVisible = false
        },
        closeData(){
            this.checkList = []
        },
        
        showCopy(){
            this.workingName = '复印'
            this.copyVisible = true
        },
        closeCopyDia(){
            this.copyVisible = false
        },
        showRecaption() {
            this.workingName = '取回'
            this.recaptionVisible = true
        },
        closeRecaption() {
            this.recaptionVisible = false
        },
    }
};
</script>

<style lang="scss" scoped>
    .wrap{
        background: rgb(245,246,248);
        width:100%;
        //min-height:900px;
        overflow:hidden;
        .sth{
            position: absolute;
            &.cp{
                cursor: pointer;
            }
        }
        .guide{
            top: 80px;
            left: 10px;
            width: 150px;
            cursor: pointer;
            background:url(../../../assets/img/lobby-btn-bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            line-height: 50px;
            font-size: 24px;
            text-align: center;
            color: #fff;

            &:hover{
                opacity: .9;
            }
        }
        .manager{
            top: 68px;
            left: 10%;
            width: 80%;
            height: calc(100% - 68px);
        }
    }
    .actions{
        position: fixed;
        bottom: 0;
        left: 50%;
        padding: 55px;
        transform: translateX(-50%);
        background-color: rgba(255,255,255,.7);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        .btns{
            display: flex;
            justify-content: space-between;
            li{
                width: 200px;
                margin-right: 50px;
                text-align: center;
                color: #fff;
                font-size: 28px;
                line-height: 70px;
                background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }
    /deep/.data-dia{
        // width:80%;
        width: 800px;
        min-width:400px;
        margin: auto;
        .take-list{
            width: 600px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                display: inline-flex;
                align-items: center;
                width: 250px;
                height: 120px;
                border: 4px solid #DBDBDB;
                border-radius: 20px;
                cursor: pointer;
                background-color: rgba(216,216,216,0.10);
                &:first-child{
                    margin: 0 0px 30px 0;
                }
                &:last-child{
                    //margin-left: 30px;
                }
                img{
                    margin-left: 10px;
                    width: 30%;
                }
                p{
                    font-size: 18px;
                    color: #000;
                    text-align: center;
                    font-weight: bold;
                    padding: 0 15px;
                }
                &.checked{
                    background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat;
                    border-color: #6191FF;
                }
            }
        }
        .result{
            margin: 30px 0 20px;
            text-align: center;
            img{
                width: 136px;
            }
            h6{
                margin: 30px 0 10px;
                font-size: 30px;
                color: #000;
            }
            .text{
                font-size: 22px;
                color: #797979;
            }
        }
        .list {
            max-height: 30vh;
            overflow: auto;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            &>li {
                width: 140px;
                height: 140px;
                margin: 10px 0;
                // 这里和common.js混了！
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                overflow: hidden;
                padding: 10px;
                // &>img {
                //     width: 100%;
                //     //max-width: 90%;
                // }
                &>.el-image {
                     width: 100%;
                    max-height: 80px;
                    overflow: hidden;
                    img {
                        //transform: translateY(-35%);
                        // width: 100%;
                    }
                }
                p{
                    font-size: 14px;
                    line-height: 40px;
                }
            }
        }
    }

    .sitting2 {
        opacity: 0;
        cursor: default!important;
    }
</style>