<template>
    <view
        class="cascader"
    >
        <view class="cascader__item">
            <cascader-panel
                ref="panel1"
                :data="data"
                :select-index="selectIndex1"
                :is-selected="curSelectedPanel === 0"
                :selected-pannel="0"
                module="panel1"
                @handleItemTap="handleItemTapPanel1"
            />
        </view>
        <view class="cascader__item">
            <cascader-panel
                v-if="array2.length > 0"
                ref="panel2"
                :data="array2"
                :select-index="selectIndex2"
                :is-selected="curSelectedPanel === 1"
                :selected-pannel="1"
                module="panel2"
                @handleItemTap="handleItemTapPanel2"
            />
        </view>
        <view class="cascader__item">
            <cascader-panel
                v-if="array3.length > 0"
                ref="panel3"
                :data="array3"
                :select-index="selectIndex3"
                :cur-selected-panel="curSelectedPanel"
                :is-selected="curSelectedPanel === 2"
                :selected-pannel="2"
                module="panel3"
                @handleItemTap="handleItemTapPanel3"
            />
        </view>
    </view>
</template>

<script>
/**
 * @file cascader 级联列表
 * @author yantingxi@baidu.com
 * @categories 直播三级列表
 * @tags [live-component]
 */

import CascaderPanel from './CascaderPanel';
import stopScrollThroughMixin from '@baidu/med-utils/lib/Mars/stopScrollThroughMixin';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    mixins: [stopScrollThroughMixin],
    components: {
        CascaderPanel
    },
    props: {
        /**
         * @property data[].value 项值
         * @property data[].label 显示文案
         * @property data[].sublabel 附属信息
         * @property data[].children 子项集合
         */
        data: {
            type: Array,
            default: () => []
        },

        /**
         * 列数
        */
        col: {
            type: Number,
            default: 3
        },

        /**
         * 选中value值列表 1,2,3
         */
        select: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            array2: [],
            array3: [],
            current: [],
            selectIndex1: 0,
            selectIndex2: 0,
            selectIndex3: 0,
            curSelectedPanel: 2
        };
    },
    watch: {
        data(newVal) {
            this.init(newVal);
        },
        select(newVal) {
            newVal && this.setSelects(newVal);
        }
    },
    methods: {
        init(data) {
            if (this.col > 1) {
                this.array2 = data[0] && data[0].children || [];
            }
            if (this.col > 2) {
                this.array3 = this.array2[0] && this.array2[0].children || [];
            }

            this.current[0] = data[0] || {};
            this.current[1] = this.array2[0] || {};
            this.current[2] = this.array3[0] || {};

            this.select && this.setSelects(this.select);

            this.curSelectedPanel = 0;

            /**
             * 列表数据更新
             */
            this.$emit('handleChange', this.current);
        },
        handleItemTapPanel1(data) {
            if (data.value === '0') {
                this.curSelectedPanel = 0;
            } else {
                this.curSelectedPanel = 1;
            }
            
            this.array2 = data.children || [];
            this.array3 = this.array2[0] && this.array2[0].children || [];
            this.$refs.panel2 && this.$refs.panel2.setActived(0);
            this.current[0] = data;
            this.current[1] = this.array2[0] || {};
            this.current[2] = this.array3[0] || {};
            this.handleChange();

            /**
             * 一级列表点击
             */
            this.$emit('handleItemTap1', this.current);
        },
        handleItemTapPanel2(data) {
            if (data.value === '0') {
                this.curSelectedPanel = 1;
            } else {
                this.curSelectedPanel = 2;
            }
            this.array3 = data.children || [];
            this.$refs.panel3 && this.$refs.panel3.setActived(0);
            this.current[1] = data;
            this.current[2] = this.array3[0] || {};
            this.handleChange();

            /**
             * 二级列表点击
             */
            this.$emit('handleItemTap2', this.current);
        },
        handleItemTapPanel3(data) {
            this.curSelectedPanel = 2;
            this.current[2] = data;
            this.handleChange();

            /**
             * 三级列表点击
             */
            this.$emit('handleItemTap3', this.current);
        },
        handleChange() {

            /**
             * 列表更新
             */
            this.$emit('handleChange', this.current);
        },

        setSelects(select) {
            if (this.data && this.data.length) {
                const selects = select.split(',');
                this.selectIndex1 = this.getIndexByValue(this.data, selects[0]);
                this.array2 = this.data[this.selectIndex1] && this.data[this.selectIndex1].children || [];
                this.selectIndex2 = this.getIndexByValue(this.array2, selects[1]);
                this.array3 = this.array2[this.selectIndex2] && this.array2[this.selectIndex2].children || [];
                this.selectIndex3 = this.getIndexByValue(this.array3, selects[2]);
                this.current[0] = this.data[this.selectIndex1];
                this.current[1] = this.array2[this.selectIndex2];
                this.current[2] = this.array3[this.selectIndex3];

                /**
                 * 列表选中项更新
                 */
                this.$emit('handleSelectChange', this.current);
            }
        },

        getIndexByValue(data, value = '0') {
            if (data && data.length) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i] && String(data[i].value) === String(value)) {
                        return i;
                    }
                }
            }
            return 0;
        }
    }
};
</script>
<style lang="less" scoped>
.cascader {
    display: flex;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    &__item {
        flex: 1;

        &:nth-child(1) {
            background: #F1F1F1;
        }
        &:nth-child(2) {
            background: #F8F8F8;
        }
    }
}
</style>

