<template>
    <div class="check-page">

        <div style="margin-top: 10px">
            <a-select  @change="handleChange" style="width:200px" v-model="select">
                <a-select-option v-for="i in data" :key="i.name" :value="i.id">
                    {{i.name}}
                </a-select-option>
            </a-select>
        </div>


        <!--左货架DOM-->
        <div class="center-box">
            <span class="shelf-number">
                左侧货架
            </span>

            <a-radio-group v-model="leftSide" style="margin:10px 0"
                           v-if="streetDetail.leftType==1">
                <a-radio-button :value=1>
                    浅货架
                </a-radio-button>
                <a-radio-button :value=2>
                    深货架
                </a-radio-button>
            
            </a-radio-group>

        </div>

        <div class="check-content" v-for="item in data" :key="item.id">
            <subsection v-if="item.id == select" :total="{row: item.leftRow, column: item.leftColumn}" :direction=1 :side="leftSide" :streetId="item.id" :streetName="item.name">
            </subsection>
        </div>


        <!--单伸类型右货架DOM-->
        <div class="center-box">
            <span class="shelf-number">
                右侧货架
            </span>

            <a-radio-group v-model="rightSide" style="margin:10px 0"
                           v-if="streetDetail.rightType==1">
                <a-radio-button :value=1>
                    浅货架
                </a-radio-button>
                <a-radio-button :value=2>
                    深货架
                </a-radio-button>
                
            </a-radio-group>


        </div>

        <div class="check-content" v-for="item in data" :key="item.name">
            <subsection v-if="item.id == select" :total="{row:item.rightRow, column: item.rightColumn}" :direction=2 :side="rightSide" :streetId="item.id" :streetName="item.name" >
            </subsection>
        </div>
    </div>
</template>
<script>
import Subsection from "./Subsection";
export default {
    name:'checkManage',
    data() {
        return {
            leftSide: 1,
            rightSide: 1,
            data: [],
            select: '',
            streetId: 0,
            streetDetail: {},
        }
    },
    computed: {
        
    },
    
    mounted() {
        this.request();
    },
    created(){

    },
    activated() {
        if(!this.$route.meta.isUseCache){   
            console.log("$route.meta.isUseCache false")         
            // 清空原有数据
            this.request();// 这是我们获取数据的函数
        }else{
            console.log("$route.meta.isUseCache true") 
            //this.request();       
        }
    },
    
    methods: {
        //获取巷道列表
        request() {
            this.$api.httpApi.getAllStreet({
            }).then(res => {
                console.log("update data")
                for(let i = 0;i<res.data.length;i++){
                    
                    this.$set(this.data,i,res.data[i])
                }
                this.select = res.data[0].id
                //this.$set(this.select,res.data.list[0].id,0)
                this.getStreetDetail(this.select);
            }).catch(err => {

            });
        },

        //获取巷道详情
        getStreetDetail(id) {
            this.$axios.get('/street/' + id, {
                data: {}
            }).then(res => {
                this.streetDetail = res.data
            }).catch(err => {

            })
        },
        
        handleChange(value) {
            
            this.select = value
            
            this.getStreetDetail(value)
        },

    },
    components: {Subsection}
};
</script>
<style lang="scss" scoped>
.check-page {
    position: relative;

    .title-info {
        display: flex;
        align-items: center;
        justify-content: start;

        .explain {
            font-weight: 600;
        }

        .info-text {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
    }

    .ant-tag {
        margin-right: 0;
        display: block;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
    }

    .roadway-top, roadway-buttom {
        padding: 5px 0;
        width: 100%;
    }

    .roadway-box {
        transform: rotateX(180deg);
        padding: 10px 10px 0 0;
        .line {
            display: flex;
            transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上

            .el {
                width: 46px;
                height: 25px;
                line-height: 25px;
                margin: 2px;
                font-size: 12px;
                text-align: center;
                border-radius: 4px;
                cursor: pointer;
                position: relative;
                .default {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }

    .center-box {
        width: 500px;
        height: 52px;
        line-height: 52px;
        .shelf-number {
            display: inline-block;
            width: 200px;
        }
    }
    .export-all {
        position: absolute;
        right: 20px;
    }
}
</style>
