<template>
    <div class="filtrate-widget-double" :class="isWidgetClsName">
        <header class="filtrate-header" v-if="model == 'bottomFilter' && title" @click="handleRetry">
            {{ title }}
            <i v-if="!isLoading && queryData.selectOptions.hasOwnProperty('options') && !queryData.selectOptions.options.length" class="iconfont icon-reset_light"></i>
        </header>
        <div
            class="loading-part"
            v-if="isLoading"
        >
            <van-loading
                class="widget-loading"
                size="24px"
                vertical
                color="#2196f3"
            >加载中...</van-loading>
        </div>
        <template v-else>
            <template v-if="!isLoading && queryData.selectOptions.hasOwnProperty('options') && !queryData.selectOptions.options.length">
                <van-empty class="refresh-empty" :image="emptyImage" :description="emptyDesc"/>
            </template>
            <template v-else>
                <div class="main-part">
                    <radio-cell
                        v-for="(item, idx) in queryData.selectOptions.options"
                        :key="idx"
                        :option="item"
                        :queryType="queryData.type"
                        :valueMap="queryData.selectOptions.valueMap"
                        :activeStatus="activeItem"
                        :value="value"
                        :property="queryData.property"
                        @confirm="handleSelect"
                    />
                </div>
                <footer class="footer" v-if="resetBtn">
                    <van-button class="btn-reset" size="small" round block @click="handleReset">
                        <i solt="icon" class="iconfont icon-reset_light"></i>
                        重置
                    </van-button>
                </footer>
            </template>
        </template>
    </div>
</template>

<script>
export default {
    name: 'LjWidgetRadio',
    components: {
        "radio-cell": {
            props: {option: String/Object, valueMap: Object, activeStatus: String/Number, queryType: String, value: Object, property: String},
            filters: {
                filterEmpty(data) {
                    if (data == "") {
                        return "(空)"
                    } else {
                        return data
                    }
                }
            },
            render(h) {
                let self = this;
                let data = this.option;
                let returnData;
                let curValue = this.activeStatus;
                console.log("this.value>>>>>>>>>>",JSON.stringify(this.value))
                if (this.value.hasOwnProperty(this.property)) {
                    curValue = this.value[this.property]
                }
                // let ifSelected = data[this.valueMap.value] === this.activeStatus;
                let ifSelected = data[this.valueMap.value] === curValue;
                let singleRadio_selIcon = ifSelected && this.queryType == "radio1" ? h('i', {
                                class: {
                                    iconfont: true,
                                    "icon-tongyi": true
                                },
                            })
                            : null;
                if (typeof data == "object") {
                    returnData =  h('van-cell', {
                        class: {
                            radion_item: true,
                            selected: ifSelected
                        },
                        on: {
                            click: function() {
                                self.$emit('confirm', data);
                            }
                        },
                        scopedSlots: {
                            title: props => h('div', {
                                class: {
                                    "text-ellipsis-one": true
                                },
                                domProps: {
                                    innerHTML: data[this.valueMap.text]
                                },
                            }),
                            default: props => singleRadio_selIcon
                        }
                    });
                } else if (typeof data == "string"){
                    returnData =  h('van-cell', {
                        class: {
                            radion_item: true,
                            selected: data === this.activeStatus
                        },
                        on: {
                            click: function() {
                                self.$emit('confirm', data);
                            }
                        },
                        scopedSlots: {
                            title: props => h('div', {
                                class: {
                                    "text-ellipsis-one": true
                                },
                                // domProps: {
                                //     innerHTML: data
                                // },
                            },
                            [
                                this.$options.filters['filterEmpty'](data)
                            ]
                            )
                        }
                    });
                }
                return returnData
            }
        }
    },
    data() {
        return {
            queryData: {},
            emptyDesc: "暂无数据",
            emptyImage: "default"
        };
    },
    props: {
        // 同lj-filtrate:queryFields
        data: {
            type: Object/Array
        },
        // 标题：在底部筛选窗体时，使用
        title: {
            type: String,
            default: ""
        },
        // 模式，tabsFilter:标签筛选栏; bottomFilter:底部筛选窗体
        model: {
            type: String,
            default: ""
        },
        // 模式，tabsFilter:标签筛选栏; bottomFilter:底部筛选窗体
        activeItem: {
            type: String/Number,
            default: ""
        },
        // 是否显示重置按钮
        resetBtn: {
            type: Boolean,
            default: false  
        },
        // 当前的值
        value: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        isWidgetClsName() {
            let clsName = ''
            switch (this.queryData.type) {
                case 'radio1':
                    clsName = 'single-cell'
                    break;
                case 'radio2':
                    clsName = 'double-cell round'
                    break;
                case 'radio3':
                    clsName = 'treble-cell round'
                    break;
                case 'radioFree':
                    clsName = 'free-cell round'
                    break;
            }
            return clsName
        },
        isLoading() {
            return !this.queryData.hasOwnProperty('selectOptions') || !this.queryData.selectOptions.hasOwnProperty('options')
        },
        isGetCurrentValue() {
            if (this.value.hasOwnProperty(this.data.property)) {
                return this.value[this.data.property]
            } else {
                return this.activeItem
            }
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        /**确认 */
        handleSelect(item) {
            if (typeof item == 'object') {
                console.log('handleSelect item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                let title = item[this.queryData.selectOptions.valueMap.text]
                let value = item[this.queryData.selectOptions.valueMap.value]
                this.$emit('confirm', item, title, value);
            } else if (typeof item == 'string') {
                this.$emit('confirm', item, item, item);
            }
        },
        /**安装 */
        init() {
            this.queryData = this.data.children[0];
            let dataTg = this.queryData.selectOptions;
            if (dataTg.hasOwnProperty('optionsApi')) {
                let self = this;
                let requestbody = dataTg.hasOwnProperty('requestbody') ? dataTg.requestbody : {};
                requestbody = Object.assign({token: $lj.getStorage("token")}, requestbody);
                // 动态加载数据
                $lj.postLJRequest(dataTg.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)
            }
        },
        handleRetry() {
            console.warn(' 重置！！！ :>>>>>>>>>>>>>>>>>>>>>');
            delete this.queryData.selectOptions.options;
            this.init();
        },
        /**重置 */
        handleReset() {
            this.$emit('reset');
        },
    },
};
</script>

<style lang="less">
    .filtrate-widget-double {
        display: flex;
        flex-direction: column;
        padding: 8px 10px;

        .filtrate-header {
            font-size: 16px;
            font-weight: bold;
            padding: 4px 0;
        }
        &.round {
            // padding: 8px 10px;
            .van-cell {
                display: inline-block;
                margin: 1px 3px;
                padding: 6px 12px;
                border-radius: 18px;
                background-color: #f2f2f2;
                text-align: center;
            }
        }
        &.single-cell {
            padding-left: 0;
            padding-right: 0;
            .main-part {
                .selected {
                    background-color: unset;
                    color: @musePrimary;
                    border: 1px solid transparent;
                    // border-color: @musePrimary;
                    box-shadow: unset;

                    .iconfont {
                        font-size: 13px;
                        color: @musePrimary;
                    }
                }

            }
        }
        &.double-cell {
            .van-cell {
                width: -moz-calc(~"50% - 6px");
                width: -webkit-calc(~"50% - 6px");
                width: calc(~"50% - 6px");
            }
        }
        &.treble-cell {
            .van-cell {
                width: -moz-calc(~"33.33% - 6px");
                width: -webkit-calc(~"33.33% - 6px");
                width: calc(~"33.33% - 6px");
            }
        }
        &.free-cell {
            .van-cell {
                width: auto;
            }
        }
        .loading-part {
            position: relative;
            min-height: 30vh;
        }
        .widget-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .main-part {
            flex: 1;
            max-height: 50vh;
            overflow: auto;
            
            .radion_item {
                border: 1px solid transparent;
            }
            .selected {
                background-color: #DDEFFF;
                color: @musePrimary;
                border: 1px solid @musePrimary;
                // border-color: @musePrimary;
                box-shadow: 0px 4px 4px 0px rgba(33, 150, 243, 0.04), 0px 0px 6px 0px rgba(33, 150, 243, 0.12);
            }
        }
        .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>