<template>
    <div class="subsection">
        <a-layout style="width: 900px">
            <a-layout style="width: 100%;height: 310px">
                <a-layout-sider width="110px">
                    <a-tabs default-active-key="1" tab-position="left" @change="value => select.column = value" v-if="total.column > nums.column">
                        <a-tab-pane
                            v-for="index in latticeColumn"
                            :key="index"
                        >
                            <span slot="tab">
                                {{  getRandom(index, latticeColumn, nums.column, total.column) }}
                                <a-icon type="close-circle" v-if="status.column[index] === 1" style="color: #d81e06" />
                                <a-icon type="check-circle" v-else-if="status.column[index] === 2" style="color: #1afa29" />
                                <a-icon type="exclamation-circle" v-else style="color: #909399" />
                            </span>
                        </a-tab-pane>
                    </a-tabs>
                </a-layout-sider>
                <a-layout-content>
                    <slot :data="{select, nums, random}"></slot>
                </a-layout-content>
            </a-layout>
            <a-layout-footer>
                <a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row">
                    <a-tab-pane
                        v-for="index in latticeRow"
                        :key="index"
                    >
                            <span slot="tab">
                                {{  getRandom(index, latticeRow, nums.row, total.row) }}
                                <a-icon type="close-circle" v-if="status.row[index] === 1" style="color: #d81e06" />
                                <a-icon type="check-circle" v-else-if="status.row[index] === 2" style="color: #1afa29" />
                                <a-icon type="exclamation-circle" v-else style="color: #909399" />
                            </span>
                    </a-tab-pane>
                </a-tabs>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
export default {
    name: "Subsection",
    components: {},
    props: {
        // 默认行第一个  列第一个
        select: {
            type: Object,
            default: () => {
                return {
                    row: 1,
                    column: 1
                }
            }
        },
        // 总共数据
        total: {
            row: 1,
            column: 1
        },
        nums: {
            // 行20个 列10个
            type: Object,
            default: () => {
                return {
                    row: 15,
                    column: 10
                }
            }
        },
        stockInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        // 应有的格子数
        latticeRow() {
            return  parseInt(this.total.row / this.nums.row) + (this.total.row % this.nums.row > 0 ? 1 : 0);
        },
        latticeColumn() {
            return  parseInt(this.total.column / this.nums.column) + (this.total.column % this.nums.column > 0 ? 1 : 0);
        },
        random() {
            return {
                row: this.getRandomRow(this.select.row),
                column: this.getRandomColumn(this.select.column),
            }
        },
        watchStockInfo() {
            return JSON.stringify(this.stockInfo);
        }
    },
    watch: {
        watchStockInfo() {
            this.getStatus();
        }
    },
    data() {
        return {
            status: {
                row: {},
                column: {}
            }
        }
    },
    mounted() {

    },
    created() {
        this.getStatus();
    },
    destroyed() {
    },
    methods: {
        // 获取行或列的范围字符串
        getRandom(index, lattice, num, total) {
            if(index !== lattice) {
                return `${(index - 1) * num + 1} - ${index * num}`;
            }else {
                return `${(index - 1) * num + 1} - ${total}`;
            }
        },
        // 获取行和列的范围数组
        getRandomRow(val) {
            return this.getRandom(val, this.latticeRow, this.nums.row, this.total.row).split(' - ').map(item => Number(item));
        },
        getRandomColumn(val) {
            return this.getRandom(val, this.latticeColumn, this.nums.column, this.total.column).split(' - ').map(item => Number(item));
        },
        // 获取某段的状态
        fragmentStatus(type, val) {
            let status0 = false;// 未盘点
            let status1 = false;// 盘点错误
            let rowStart = 1, rowEnd =  this.total.row;
            let columnStart = 1, columnEnd =  this.total.column;
            if(type === 'row') {
                [rowStart, rowEnd] = this.getRandomRow(val);
            }else {
                [columnStart, columnEnd] = this.getRandomColumn(val);
            }
            console.log(rowStart, rowEnd, columnStart, columnEnd);
            // 判断盘点错误与未盘点
            // for(let row = rowStart; row++; row <= rowEnd) {
            //     for(let column = columnStart; column++; column <= columnEnd) {
            //         let rowColStatus = (this.stockInfo[`${row}-${column}`] || {}).status;
            //         if(!rowColStatus) {
            //             // 未盘点
            //             status0 = true;
            //         }else if(rowColStatus === 1) {
            //             // 盘点错误
            //             status1 = true;
            //         }
            //     }
            // }
            // if(status1) {
            //     return 1;  // 盘点错误
            // }else if(status0) {
            //     return 0; // 未盘点
            // }else {
            //     return 2; // 盘点成功
            // }
        },
        async getStatus() {
            // for(let i = 1 ; i++; i < this.latticeRow) {
            //     let rowColumn = this.getRandomRow(i);
            //     this.status.row[i] = this.fragmentStatus('row', i);
            // }
            //
            // for(let i = 1 ; i++; i < this.latticeColumn) {
            //     let rowColumn = this.getRandomColumn(i);
            //     this.status.column[i] = this.fragmentStatus('column', i);
            // }

            for(let row = 1;  row <= this.total.row; row++) {
                for(let column = 1; column <= this.total.column; column++) {
                    let status = (this.stockInfo[`${row}-${column}`] || {}).status || 0;
                    if(status < 2) {
                        // 当前是在第几段
                        let latticeRow = parseInt(row / this.nums.row) + (row % this.nums.row > 0 ? 1 : 0);
                        let latticeColumn = parseInt(column / this.nums.column) + (column % this.nums.column > 0 ? 1 : 0);
                        if(status === 1) {
                            console.log('第几段', latticeRow, latticeColumn);
                            console.log(row, column,status);
                            this.$set(this.status.row, latticeRow, status);
                            this.$set(this.status.column, latticeColumn, status);
                        }else {
                            if(!this.status.row[latticeRow]) this.$set(this.status.row, latticeRow, status);
                            if(!this.status.column[latticeColumn])  this.$set(this.status.column, latticeColumn, status);
                        }
                    }
                }
            }
            console.log(this.status);
        },
    }
}
</script>

<style scoped lang="scss">
.subsection /deep/{
    width: 100%;
    height: 360px;
    overflow: hidden;
    .ant-tabs-nav .ant-tabs-tab {
        // padding: 0;
        margin-right: 0;
    }
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        &:hover{
            background: #40a9ff;
            border-color: #40a9ff;
        }
        background: #40a9ff;
        border-color: #40a9ff;
        box-shadow: -1px 0 0 0 #40a9ff;
    }
    .ant-radio-button-wrapper-checked {
        box-shadow: -1px 0 0 0 #40a9ff;
    }
    .radio-button-cell {
        width: 100px;
        text-align: center;
    }
    .ant-layout-sider {
        height: 100%;
        .ant-tabs {
            height: 300px;
        }

        .ant-tabs-tab {
            padding: 8px;
            margin-bottom: 5px;
            width: 104px;
        }
    }
    .ant-layout-footer {
        // width: 500px;
        padding: 0 0 0 110px;
        .ant-tabs {
            // width: 735px;
        }
        .ant-tabs-bottom-bar {
            margin-top: 0;
        }
    }
    .ant-layout, .ant-layout-sider, .ant-layout-footer {
        background-color: #ffffff;
    }
}
</style>
