<template>
    <div class="filtrate-widget-cascader">
        <div
            class="loading-part"
            v-if="!queryData.hasOwnProperty('selectOptions') || !queryData.selectOptions.hasOwnProperty('options') || !queryData.selectOptions.options.length"
        >
            <van-loading
                class="widget-loading"
                size="24px"
                vertical
                color="#2196f3"
            >加载中...</van-loading>
        </div>
        <template v-else>
            <template v-if="!queryData.selectOptions.options.length">
                <van-empty class="refresh-empty" :image="emptyImage" :description="emptyDesc" />
            </template>
            <template v-else>
                <van-cascader
                    v-model="data.value"
                    class="main-part"
                    :closeable="false"
                    :options="queryData.selectOptions.options"
                    active-color="#1989fa"
                    :field-names="queryData.selectOptions.valueMap"
                    @click="handleClick"
                    @change="hadnleChange"
                    @finish="handleSelect"
                />
                <footer class="footer">
                    <van-button class="btn-reset" round block @click="handleReset">
                        <i solt="icon" class="iconfont icon-reset_light"></i>
                        重置
                    </van-button>
                    <van-button type="info" block round @click="handleSelect">
                        {{ isConfirmText }}
                    </van-button>
                </footer>
            </template>
        </template>
    </div>
</template>

<script>
export default {
    name: 'L1appWidgetCascader',
    data() {
        return {
            cascaderValue: '',
            cascaderText: '',
            queryData: {},
            currentItem: null,
            emptyDesc: "暂无数据",
            emptyImage: "default"
        };
    },
    props: {
        // 同lj-filtrate:queryFields
        data: {
            type: Object/Array
        },
        // 标题：在底部筛选窗体时，使用
        title: {
            type: String,
            default: ""
        },
        // 模式，tabsFilter:标签筛选栏; bottomFilter:底部筛选窗体
        model: {
            type: String,
            default: ""
        },
    },
    computed: {
        isConfirmText() {
            if (this.data.value == this.data.children[0].initValue) {
                return '全部';
            }
            return this.data.title;
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        handleClick(ev) {
            console.log('text :>> ', ev);
        },
        /**重置 */
        handleReset() {
            this.currentItem = null;
            // this.cascaderValue = '';
            // this.cascaderText = '';
            this.$set(this.data, 'value', this.data.initValue || '');
            this.$set(this.data, 'title', '');
            this.$emit('reset');
        },
        /**更改知 */
        hadnleChange({value, selectedOptions, tabIndex}) {
            console.log('change item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(value));
            console.log('change selectedOptions :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(selectedOptions));
            console.log('change tabIndex :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(tabIndex));
            // this.cascaderText = item.text;
            this.currentItem = selectedOptions[tabIndex];
            this.$set(this.data, 'value', value);
            this.$set(this.data, 'title', this.currentItem.text);
            // this.cascaderValue = value;
            // this.cascaderText = this.currentItem.text;
        },
        /**确认 */
        handleSelect() {
            let item = this.currentItem;
            let title = this.data.title;
            let value = this.data.value;
            this.$emit('confirm', item, title, value);
        },
        /**安装 */
        init() {
            this.queryData = this.data.children[0];
            if (this.queryData.selectOptions.hasOwnProperty('optionsApi')) {
                let self = this;
                // 动态加载数据
                let requestbody = this.queryData.selectOptions.hasOwnProperty('requestbody') ? this.queryData.selectOptions.requestbody : {};
                requestbody = Object.assign({token: $lj.getStorage("token")}, requestbody)
                $lj.postLJRequest(this.queryData.selectOptions.optionsApi, requestbody, function (ret) {
                    if (ret) {
                        self.emptyDesc = "暂无数据";
                        self.emptyImage = "default";
                        self.$set(self.queryData.selectOptions, 'options', ret[self.queryData.selectOptions.resultName]);
                    }
                }, function (err) {
                    self.emptyDesc = "网络错误";
                    self.emptyImage = "network";
                    self.$set(self.queryData.selectOptions, 'options', []);
                }, true)
            }
        }
    },
};
</script>

<style lang="less">
    .filtrate-widget-cascader {
        display: flex;
        flex-direction: column;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: hidden;

        .van-cascader__header {
            display: none;
        }
        .loading-part {
            position: relative;
            min-height: 30vh;
        }
        .widget-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .main-part {
            flex: 1;
            overflow: hidden;
            // padding-bottom: 44px;

            .van-tabs__nav {
                background-color: #f8f8f8;
            }
            .van-cascader__options {
                // height: auto;
                height: 30vh;
                min-height: 30vh;
            }
        }
        .footer {
            flex-shrink: 0;
            display: flex;
            margin: 5px 10px;

            .van-button + .van-button {
                margin-left: 10px;
            }
            .iconfont {
                font-size: 14px;
            }
            .btn-reset {
                border-color: transparent;
                color: @secondary;
            }
        }
    }
</style>