<template>
    <el-dialog :visible.sync="showBusiness" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia">
        <div slot="title" class="dia-header2">
            <div class="data-title2">请选择业务</div>
            <div class="close"><img v-lazy="closeImg" alt="" @click="showBusinessSelect(false)" /></div>
        </div>
        <p class="tips2">请选择您要办理的业务</p>
        <ul class="take-list2">
            <li v-for="(item) in businessArr" :class="{checked: takeCheck == item.myKey}" :key="item.myKey" @click="checkTake(item.myKey)">
                <img v-lazy="businessImg" alt="">
                <p>{{ item.myKey + item.text}}</p>
            </li>
        </ul>
        <div class="dia-footer2">
            <div class='busyButtonBox'>
                <el-button @click="showBusinessSelect(false)">取消</el-button>
                <el-button type="primary" @click="selectBusiness()">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
    props: {
        // showBusiness: {
        //     type: Boolean,
        //     default: false
        // }
        // default: '本业务需要授权'
    },
    created() {
        if(this.businessKey) {
            // 如果上次保存有 那么直接赋值
            this.takeCheck = this.businessKey
        }
    },
    data() {
        return {
            checkList: [],
            takeCheck: '',
            businessImg: require('@/assets/img/业务列表2.png'),
            closeImg: require('@/assets/svg/close.svg'),
            // 选择业务逻辑
            businessArr: [ 
                {
                    myKey: '项目一',
                    text: ': 个人活期开户、存款'
                },
                {
                    myKey: '项目二',
                    text: ': 个人活期转账、取款、销户'
                },
                {
                    myKey: '项目三',
                    text: ': 整存整取开户存款'
                },
                {
                    myKey: '项目四',
                    text: ': 整存整取部分提前支取'
                },
                {
                    myKey: '项目五',
                    text: ': 整存整取全部提前支取'
                },
                {
                    myKey: '项目六',
                    text: ': 零存整取开户'
                },
                {
                    myKey: '项目七',
                    text: ': 零存整取续存'
                },
                {
                    myKey: '项目八',
                    text: ': 零存整取销户'
                },
                {
                    myKey: '项目九',
                    text: ': 通知存款开户'
                },
                {
                    myKey: '项目十',
                    text: ': 通知存款销户'
                },
                {
                    myKey: '项目十一',
                    text: ': 公司基本户和开立'
                },
                {
                    myKey: '项目十二',
                    text: ': 公司存款'
                },
                {
                    myKey: '项目十三',
                    text: ': 公司现金支票取款'
                },
                {
                    myKey: '项目十四',
                    text: ': 公司现金支票转账'
                },
                {
                    myKey: '项目十五',
                    text: ': 密码修改'
                },
                {
                    myKey: '项目十六',
                    text: ': 密码挂失'
                },
                {
                    myKey: '项目十七',
                    text: ': 挂失解挂'
                },
                {
                    myKey: '项目十八',
                    text: ': 现金领用'
                },
                {
                    myKey: '项目十九',
                    text: ': 现金上缴'
                },
                {
                    myKey: '项目二十',
                    text: ': 现金调入'
                },
                {
                    myKey: '项目二十一',
                    text: ': 现金调出'
                },
                {
                    myKey: '项目二十二',
                    text: ': 凭证领用'
                },
                {
                    myKey: '项目二十三',
                    text: ': 凭证上缴'
                },
                {
                    myKey: '项目二十四',
                    text: ': 凭证调入'
                },
                {
                    myKey: '项目二十五',
                    text: ': 凭证调出'
                },
                {
                    myKey: '项目二十六',
                    text: ': 柜员日中轧账'
                },
                {
                    myKey: '项目二十七',
                    text: ': 网点日中轧账'
                }
            ],            
        }
    },
    methods: {
        ...mapMutations({
            setBusinessKey: 'system/setBusinessKey',
            setShowBusiness: 'system/setShowBusiness'
        }),
        closeData() {
            this.checkList = [];
        },
        showBusinessSelect (judge) {
            if(!judge && !this.businessKey) {
                // this.$confirm('由于您未选择一个业务，系统将返回主界面, 是否继续?', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning',
                //     center: true
                //     }).then(() => {
                //         this.$router.push('/index')
                //     }).catch(() => {
                //     this.$message({
                //         type: 'info',
                //         message: '请选择一个业务'
                //     });          
                // });
                this.$message({
                    type: 'info',
                    message: '请选择一个业务'
                });
                return 
            }
            this.setShowBusiness(judge)
        },
        checkTake(myKey){
            if(this.takeCheck === myKey) {
                this.takeCheck = ''
            }else {
                this.takeCheck = myKey
            }
        },
        selectBusiness() {
            if(!this.takeCheck) {
                this.$message({
                    type: 'info',
                    message: '请选择一个业务'
                });
                return 
            }
            this.setBusinessKey(this.takeCheck)
            if(!this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id) {
                this.$message({
                    type: 'info',
                    message: '业务开发中，尽请期待!'
                });
                return 
            }
            this.setShowBusiness(false)
            sessionStorage.setItem('businessKey', this.$store.state.system.businessKey)
            
        },
    },
    computed: {
        ...mapState({
            showBusiness: state => state.system.showBusiness,
            businessKey: state => state.system.businessKey
        })
    },
    watch: {
        showBusiness(newVal) {
            if(!newVal) {
                this.takeCheck = this.businessKey
            }
        }
    },

}
</script>

<style lang="scss" scoped>
.data-dia {
    border-radius: 16px;
    margin-top: 4vh !important;
    background: #fff;
    position: fixed;
    top: 7%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 0 15px 15px;
    z-index: 997;
    border: 1px solid #e6e6e6;
    max-height: 600px;
    overflow: auto;
    .dia-header {
        position: relative;
        .data-title {
            height:70px;
            width: 300px;
            margin: 0 auto;
            line-height: 70px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            background: url('../../assets/img/dia-title.png') 0 0 / cover no-repeat;
        }
        .close {
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
        }
    }

    // 业务选择中的
    .take-list2{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        height: 40vh;
        overflow: auto;
        li{
            display: inline-flex;
            align-items: center;
            width: 30%;
            height: 10vh;
            margin: 1vh 0;
            border: 4px solid #DBDBDB;
            border-radius: 20px;
            cursor: pointer;
            background-color: rgba(216,216,216,0.10);
            // &:first-child{
            //     margin: 0 0px 50px 0;
            // }
            // &:last-child{
            //     margin-left: 50px;
            // }
            img{
                width: 15%;
                margin: 0;
                //height: 154px;
                //margin: 0 45px;
            }
            p{
                font-size: 14px;
                color: #000;
                text-align: center;
                padding: 0 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &.checked{
                background: rgba(97,145,255,0.10) url('../../assets/svg/checked.svg') 96% 7%/auto no-repeat;
                border-color: #6191FF;
            }
        }
    }
    .dia-header2 {
        position: relative;height: 50px;
        line-height: 50px;
        background-color: rgb(98, 149, 243) ;
        border-top-left-radius:14px;
        border-top-right-radius:14px;
        .data-title2 {
            position: absolute;
            left: 15px;
            height: 50px;
            line-height: 50px;
            color:#fff;
        }
        .close {
            height: 50px;
            position: absolute;
            right: 15px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            img {
                vertical-align: center;
            }
        }
    }
    .tips2 {
        margin: 1vh 0 2vh 0;
        text-align: left;
        font-size: 20px;
        color: #000;
    }
    .list {
        width: 940px;
        min-height: 204px;
        max-height: 360px;
        overflow: auto;
        margin: 0 auto;
        display: flex;
        align-items: center;
        .img-wrap{
            background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat;
            width: 180px;
            height: 180px;
            display: flex;
            justify-content: center;
            margin: 5px 10px;
            position: relative;
            cursor: pointer;
            .file {
                position: relative;
                max-width: 180px;
                max-height: 130px;
                text-align: center;
                margin: 10px 10px ;
                img {
                    margin-top: 45px;
                }
                p {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    line-height: 54px;
                    text-align: center;
                    font-size: 18px;
                    color: #000;
                }
            }
            .text{
                font-size: 18px;
                white-space:nowrap;
                position: absolute;
                bottom: 15px;
                left: 50%;
                transform: translate(-50%,0);
            }
            &.checked {
                background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat,
                    url('../../assets/svg/checked.svg') 165px 7% / auto no-repeat;
                p {
                    color: #fff;
                }
            }
        }
    }
    .seal{
        width: 1100px;
        padding: 0 5%;
        display: flex;
        justify-content: space-between;
        .box{
            border: 2px solid #e6e6e6;
            width: 45%;
            min-height: 300px;
            border-radius: 10px;
            padding: 10px;
        }
        .left{
            display: flex;
            width: 50%;
            flex-wrap: wrap;
            .file {
                position: relative;
                width: 140px;
                height: 140px;
                text-align: center;
                background: url('../../assets/img/data-frame.png') 0 0 / cover no-repeat;
                cursor: pointer;
                margin: 5px 7px;
                img{
                    width: 130px;
                    max-height: 90px;
                }
                &:last-child {
                    margin-right: 0;
                }
                &:nth-child(n>1){
                    margin-top: 0;
                }
                img {
                    width: 130px;
                    max-height: 108px;
                    margin: 10px auto 0;
                    z-index: 9;
                }
                p {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    line-height: 54px;
                    text-align: center;
                    font-size: 18px;
                    color: #000;
                }
                &.checked {
                    background: url('../../assets/img/data-frame-checked.png') 0 0 / cover no-repeat,
                        url('../../assets/svg/checked.svg') 163px 7% / auto no-repeat;
                    
                    p {
                        color: #fff;
                    }
                }
            }
            &.active {
                left: 0;
                z-index: 9999;
            }
            img {
                cursor: pointer;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        .right{
            margin-left: 5%;
        }
        .else{
            width: 100%;
        }
    }
    .dia-footer2 {
        height: 70px;
        line-height: 70px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .busyButtonBox {
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>