<template>
    <lj-win-popup
        ref="winPopup"
        :popupStyle="{ 'height': height}"
        title="其他筛选"
        round
        position="bottom"
        class="widget-filter-wrapper"
        :class="{'sale-small': ifSamll}"
    >
        <template #body>
            <component
                v-for="(items, idx) in queryFieldsForWidget"
                :is="items.type | widgetNameFilter"
                :title="items.group"
                :key="idx"
                :value="currentQueryField"
                :data="items"
                :active-item="items.value"
                model="bottomFilter"
                @input="handleCpInput"
                @confirm="handleRadioConfirm(arguments, idx)"
            >
                <template slot="widgetDateBottomFilterExtendTop">
                    <slot :name="'bottomFilter'+idx">
                    </slot>
                </template>
            </component>
        </template>
        <template #footer>
            <van-button class="btn" round block @click="handleReset">
                <i solt="icon" class="iconfont icon-reset_light"></i>
                重置
            </van-button>
            <van-button class="btn" type="info" block round @click="handleConfirm">
                筛选
                <i solt="icon"  class="iconfont icon-filter_light"></i>
            </van-button>
        </template>
    </lj-win-popup>
</template>

<script>
import LjWinPopup from "../lj-win-popup"
import WidgetRadio from "./widget-radio"
import WidgetCascader from "./widget-cascader"
import WidgetInput from "./widget-input"
import WidgetDate from "./widget-date"
import WidgetSwitch from "./widget-switch"

export default {
    name: 'LjBottomFiltrate',
    components: {
        LjWinPopup,
        WidgetRadio,
        WidgetCascader,
        WidgetInput,
        WidgetDate,
        WidgetSwitch
    },
    data() {
        return {
            initParams: {}, // 读取历史参数
            currentQueryField: {}, // 当前筛选的值
            // habitFields: [],
            hardProperties: "", // 强制参数的属性字符串
            // fieldMap: {},
            queryFieldsForWidget: [], // queryFields数据转换
            ifSamll: false, // 是否缩小
        };
    },
    props: {
        height: {
            type: String,
            default: 'auto'
        },
        queryFields: {
            type: Array
            // {
            //     title: 字段描述
            //     property：字段属性名
            //     type: 默认为文字input，可选radio： 单选， checkbox：多选；cell：（）;date：日期, switch: 开关
            //     selectOptions：数据源
                        // optionsApi: 动态获取数据接口名称,
                        // valueMap: 自定义 options 结构中的字段, 例如{ text: 'text', value: 'value', children: 'children' },
                        // extraOptions: 额外的数据数组，通常用于网络请求数据，附加“全部”选项用，如[{scid: -1, scname: "全部"}]
                        // options: 已下载数据列表Array
            //     hint：输入框提示信息
            //     disabled： 是否不可用
            //     initValue：初始值
            //     initDateAdd：初始日期递推，如-7，默认值为当前时间前7日
            //     staticDateInit: 初始日期，只用于用户没有用户习惯之前的值
            //     valueMap： 用于条件值输出时，checkbox类型的值转换，默认[0,1]，如需输出boolean类型，需声明为[false,true]
            // }
        },
        // 用于读写用户习惯，此筛选条件对应的key
        habitKey: {
            type: String
        },
        // 不可修改的强制条件，会集成在on-query-submit事件的参数输出
        // （如包含在queryFields中，则显示为不可用状态，否则不显示）
        hardParms: {
            type: Object,
            default: function () {
                return {}
            }
        },
        // 绑定外部数据源，当外部数据发生改变，相应筛选条件的值也会同步
        bindingParms: {
            type: Object
        },
        // showScan: {
        //     type: Boolean,
        //     default:false
        // },
        // // 是否自动刷新
        // autoRefresh: {
        //     type: Boolean,
        //     default: true
        // },
    },
    mounted() {
        this.hardProperties = "";
        for (let prop in this.hardParms) {
            this.hardProperties += "," + prop;
        }
        this.initQueryField();
    },
    methods: {
        /**是否缩小显示 */
        fnToSmall(bool) {
            this.ifSamll = bool;
        },
        /**读取历史搜索 */
        initSearched(keywordObj) {
            console.log('底部菜单读取 .keywordObj :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObj));
            console.log('底部菜单读取 this.currentQueryField :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentQueryField));
            // this.autoSetCurrentQuery(keywordObj);
            console.log('底部菜单读取 this.currentQueryField after :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentQueryField));
            
            this.$emit('filter');
        },
        autoSetCurrentQuery(keywordObj) {
            for (let i = 0; i < this.queryFields.length; i++) {
                let property = this.queryFields[i].property;
                if (keywordObj.hasOwnProperty(property) && keywordObj[property] != -1) {
                    this.$set(this.currentQueryField, property, keywordObj[property]);
                }
            }
        },
        // /**检测是否需要标记：筛选中 */
        // _fnCheckIfFilter() {
        //     let ifFilter = false;
        //     for (let i = 0; i < this.queryFields.length; i++) {
        //         let property = this.queryFields[i].property;
        //         if (this.currentQueryField[property] != this.queryFields[i].initValue) {
        //             console.log(' this.queryFields[i] :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.queryFields[i]));
        //             ifFilter = true;
        //             break;
        //         }
        //     }
        //     return ifFilter;
        // },
        /**输入监听 */
        handleCpInput(item) {
            console.log(' this.currentQueryField :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentQueryField));
        },
        /**打开筛选组件 */
        open() {
            this.$refs.winPopup.open();
            this.ifSamll = false;
        },
        /**按钮：重置 */
        handleReset() {
            // this.cascaderValue = '';
            for (let i = 0; i < this.queryFields.length; i++) {
                let property = this.queryFields[i].property;
                let value = this.queryFields[i].hasOwnProperty('initValue') ? this.queryFields[i].initValue : '';
                if (property.indexOf('if') == 0) {
                    value = 0;
                } else if (property.indexOf('date') > -1) {
                    value = null;
                }
                this.$set(this.currentQueryField, property, value);
            }
            // this.$refs.winPopup.close();
            // setTimeout(() => {
            //     // this.$emit('confirm', this.currentQueryField);
            //     this.$emit('reset', this.currentQueryField);
            // }, 400);
            console.log('handleReset this.currentQueryField :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentQueryField));
        },
        /**按钮：筛选 */
        handleConfirm() {
            console.log('handleConfirm this.currentQueryField :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentQueryField));
            this.$refs.winPopup.close();
            setTimeout(() => {
                this.$emit('confirm', this.currentQueryField);
                this.$emit('filter');
            }, 400);
        },
        /**点击选项，确认事件 */
        handleRadioConfirm(arg, index) {
            // console.log(' arg :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(arg));
            // console.log(' items :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(arg[0]));
            // console.log(' title :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(arg[1]));
            // console.log(' value :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(arg[2]));
            // console.log(' index :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(index));
            let property = this.queryFieldsForWidget[index].property;
            let value;
            if (this.queryFieldsForWidget[index].value === arg[2]) {
                // 重复点击
                value = this.queryFieldsForWidget[index].children[0].initValue || '';
                if (property.indexOf('if') == 0) {
                    value = 0;
                }
            } else {
                value = arg[2];
            }
            console.log(' Value :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(value));
            this.currentQueryField[property] = value;
            this.queryFieldsForWidget[index].value = value;
        },
        /**转换数据模型 */
        initQueryField() {
            let groupArr = [];
            this.queryFields.forEach((field) => {
                if (groupArr.indexOf(field.group) > -1) {
                    let idx = groupArr.indexOf(field.group);
                    this.queryFieldsForWidget[idx].children.push(field);
                } else {
                    let obj = {
                        group: field.group || field.title,
                        type: field.type,
                        children: [field],
                        value: field.hasOwnProperty('initValue') ? field.initValue : '',
                        title: '',
                        property: field.property
                    }
                    groupArr.push(obj.group);
                    this.queryFieldsForWidget.push(obj);
                }
            });
            console.log(' this.queryFieldsForWidget :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.queryFieldsForWidget));
        },
        setQueryParam(property, value) {
            this.$set(this.currentQueryField, property, value);
            console.log('handleReset!!!! setQueryParamthis.currentQueryField :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentQueryField));
        },
    },
    watch: {
        bindingParms: {
            handler(newVal, oldVal) {
                if (newVal) {
                    for (let prop in newVal) {
                        this.setQueryParam(prop, newVal[prop]);
                    }
                }
            },
            deep: true,
            immediate: true
        }
    },
    filters: {
        widgetNameFilter(type) {
            let component = '';
            switch (type) {
                case 'radio1': // 单选，排版：单行
                case 'radio2': // 单选，排版：一行两个
                case 'radio3': // 单选，排版：一行三个
                case 'radioFree': // 单选，排版：自由
                    component = WidgetRadio;
                    break;
                case 'cascader': // 层级选择
                    // component = WidgetCascader;
                    break;
                case 'checkbox': // 多选
                    
                    break;
                case 'date':  // 日期
                    component = WidgetDate
                    break;
                case 'switch': // 开关
                    component = WidgetSwitch
                    break;
                default: // 默认：input
                    component = WidgetInput
                    break;
            }
            return component
        }
    }
};
</script>

<style lang="less">
    .widget-filter-wrapper {
        transition: all cubic-bezier(0.77, 0, 0.18, 1) 0.4s;
        transform-origin: bottom center;
        
        &.sale-small {
            transform: scale(0.96);
        }
    }
</style>