<template>
    <div class="wrap">
        <img class="sth manager" src="@/assets/img/manager.png" alt="">
        <img class="sth guide" src="@/assets/img/guide.png" alt="">
        
        <div class="actions">
            <ul class="btns">
                <li @click="showTake">取号</li>
                <li @click="showData">填单</li>
                <li @click="showCopy">复印</li>
                <li>返回</li>
            </ul>
        </div>

        <el-dialog :visible.sync="takeVisible" width="1280px" @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">
                <li :class="{checked: takeCheck == 1}" @click="checkTake(1)">
                    <img src="@/assets/svg/cash.svg" alt="">
                    <p>现金业务</p>
                </li>
                <li :class="{checked: takeCheck == 2}" @click="checkTake(2)">
                    <img src="@/assets/svg/non-cash.svg" alt="">
                    <p>个人非现金业务</p>
                </li>
                <li :class="{checked: takeCheck == 3}" @click="checkTake(3)">
                    <img src="@/assets/svg/company.svg" alt="">
                    <p>公司业务</p>
                </li>
                <li :class="{checked: takeCheck == 4}" @click="checkTake(4)">
                    <img src="@/assets/svg/financial.svg" alt="">
                    <p>理财业务</p>
                </li>
            </ul>
            <div class="dia-footer">
                <button type="button" @click="confirmTake">确定</button>
            </div>
        </el-dialog>
        
        <el-dialog :visible.sync="takeResultVisible" width="580px" :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="takeResultVisible = false">
            </div>
            <div class="result">
                <img src="@/assets/img/finish.png" alt="">
                <h6>取号成功</h6>
                <p class="text">您选择了现金业务</p>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dataVisible" width="1280px" @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(1)}" @click="checkData(1)">
                    <img src="@/assets/img/idCard-sm.png" alt="">
                    <p>开户申请书</p>
                </li>
                <li :class="{checked: checkList.includes(2)}" @click="checkData(2)">
                    <img src="@/assets/img/idCard-copy-sm.png" alt="">
                    <p>密码挂失申请书</p>
                </li>
                <li :class="{checked: checkList.includes(3)}" @click="checkData(3)">
                    <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
                    <p>特殊业务申请书</p>
                </li>
                <li :class="{checked: checkList.includes(4)}" @click="checkData(4)">
                    <img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt="">
                    <p style="font-size: 12px">开立单位银行结算账户申请书</p>
                </li>
                <li :class="{checked: checkList.includes(1)}" @click="checkData(5)">
                    <img src="@/assets/img/idCard-sm.png" alt="">
                    <p>现金存款凭证</p>
                </li>
                <li :class="{checked: checkList.includes(2)}" @click="checkData(6)">
                    <img src="@/assets/img/idCard-copy-sm.png" alt="">
                    <p>转账凭证</p>
                </li>
                <li :class="{checked: checkList.includes(3)}" @click="checkData(7)">
                    <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
                    <p>现金支票</p>
                </li>
                <li :class="{checked: checkList.includes(4)}" @click="checkData(8)">
                    <img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt="">
                    <p>转账支票</p>
                </li>
                <li :class="{checked: checkList.includes(2)}" @click="checkData(6)">
                    <img src="@/assets/img/idCard-copy-sm.png" alt="">
                    <p>支票领购单</p>
                </li>
                <li :class="{checked: checkList.includes(3)}" @click="checkData(7)">
                    <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
                    <p>现金缴款单</p>
                </li>
                <li :class="{checked: checkList.includes(4)}" @click="checkData(8)">
                    <img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt="">
                    <p>境外汇款申请书</p>
                </li>
            </ul>
            <div class="dia-footer">
                <button type="button">确定</button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="copyVisible" width="1280px" @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 :class="{checked: checkList.includes(1)}" @click="checkData(1)">
                    <img src="@/assets/img/idCard-sm.png" alt="">
                    <p>身份证</p>
                </li>
                <li :class="{checked: checkList.includes(3)}" @click="checkData(3)">
                    <img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="">
                    <p>开户申请书</p>
                </li>
            </ul>
            <div class="dia-footer">
                <button type="button">确定</button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'index',
    data() {
        return {
            takeCheck: '',
            takeVisible: false,
            takeResultVisible: false,
            dataVisible: false,
            checkList: [],
            copyVisible: false
        }
    },
    mounted() {
        
    },
    methods: {
        showTake(type){
            this.takeVisible = true
        },
        checkTake(id){
            this.takeCheck = id
        },
        closeTakeDia(){
            this.takeVisible = false
        },
        closeTake(){
            this.takeCheck = ''
        },
        confirmTake(){
            this.takeVisible = false
            this.takeResultVisible = true
        },

        showData(){
            this.dataVisible = true
        },
        checkData(id){
            this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id),1) : this.checkList.push(id)
        },
        closeDataDia(){
            this.dataVisible = false
        },
        closeData(){
            this.checkList = []
        },
        
        showCopy(){
            this.copyVisible = true
        },
        closeCopyDia(){
            this.copyVisible = false
        },
    }
};
</script>

<style lang="scss" scoped>
    .wrap{
        .sth{
            position: absolute;
            &.cp{
                cursor: pointer;
            }
        }
        .guide{
            top: 90px;
            left: 0;
            width: 222px;
            cursor: pointer;
            &:hover{
                opacity: .9;
            }
        }
        .bg{
            top: 0;
            left: 0;
            width: 100%;
        }
        .manager{
            top: 68px;
            left: 0;
            width: 100%;
        }
    }
    .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: 280px;
                margin-right: 50px;
                text-align: center;
                color: #fff;
                font-size: 32px;
                line-height: 94px;
                background: url(../../../assets/img/lobby-btn-bg.png) 0 0/cover no-repeat;
                cursor: pointer;
                &:hover{
                    opacity: .9;
                }
                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }
    /deep/.data-dia{
        .take-list{
            width: 810px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                display: inline-flex;
                align-items: center;
                width: 380px;
                height: 180px;
                border: 4px solid #DBDBDB;
                border-radius: 20px;
                cursor: pointer;
                background-color: rgba(216,216,216,0.10);
                &:first-child{
                    margin: 0 50px 50px 0;
                }
                &:last-child{
                    margin-left: 50px;
                }
                img{
                    margin: 0 45px;
                }
                p{
                    font-size: 22px;
                    color: #000;
                    font-weight: bold;
                }
                &.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;
            }
        }
    }
</style>