<template>
    <div class="filtrate-wrapper">
        <div class="dropdown-part">
            <van-dropdown-menu
                active-color="#2196f3"
                duration="0.1"
                :close-on-click-outside="false"
            >
                <van-dropdown-item
                    get-container="body"
                    v-for="(items, idx) in queryFieldsForWidget"
                    :key="idx"
                    :title="items.title || items.group"
                    :ref="`dropDownItem${idx}`"
                    class="dropdown-item-main"
                    :title-class="isDropdownCls(items)"
                    :disabled="isDropdownDisable(items)"
                >
                    <component
                        :is="items.type | widgetNameFilter"
                        :key="idx"
                        :data="items"
                        :active-item="items.value"
                        :value="currentQueryField"
                        resetBtn
                        @confirm="handleConfirm(arguments, idx)"
                        @reset="handleReset(idx)"
                        model="bottomFilter"
                    ></component>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <slot name="right" :clickRightBtn="handleClickRight">
        </slot>
    </div>
</template>

<script>
import WidgetDropDownRadio from "./widget-radio"
import WidgetDropDownCascader from "./widget-cascader"

export default {
    name: 'LjTabsFiltrate',
    components: {
        WidgetDropDownRadio,
        WidgetDropDownCascader
    },
    data() {
        return {
            queryFieldsForWidget: [], // queryFields数据转换
            currentQueryField: {}, // 当前筛选的值
            currentQueryTitle: {}, // 当前筛选的名
        };
    },
    props: {
        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
        // },
        // 获取单据列表的接口的接口
        apiName: {
            type: String,
            required: true
        },
    },
    computed: {
        isDropdownDisable(items) {
            return function(items) {
                // console.log(' items :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(items));
                if (items.children.length > 0 && items.children[0].selectOptions.hasOwnProperty('options')) {
                    return !items.children[0].selectOptions.options.length
                }
                return false
            }
        },
        isDropdownCls(items) {
            return function(items) {
                console.log('isDropdownCls  items.value:>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(items));
                if (items.children.length > 0 && items.children[0].selectOptions.hasOwnProperty('options') && !items.children[0].selectOptions.options.length) {
                    return ''
                } else if (items.children.length > 0 && items.value != undefined){
                    let titleList = $lj.getUserFilterTitle(this.apiName);
                    console.log(' this.titleList :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(titleList));
                    if (items.children[0].initValue != items.value && titleList[items.property]) {
                        return 'selected'
                    }
                } else {
                    return ''
                }
            }
        }
    },
    created() {
        this.initQueryField();
    },
    methods: {
        /**读取历史搜索 */
        initSearched(keywordObj, keywordObjTitle) {
            for (let i = 0; i < this.queryFieldsForWidget.length; i++) {
                let property = this.queryFieldsForWidget[i].property;
                if (keywordObj[property] !== '' && keywordObj[property] != -1) {
                    this.$set(this.queryFieldsForWidget[i], 'value', keywordObj[property]);
                    this.$set(this.queryFieldsForWidget[i], 'title', keywordObjTitle[property]);
                }
            }
        },
        /**组件重置属性 */
        handleReset(idx) {
            this.close();
            this.fnResetProp(idx);
            let property = this.queryFieldsForWidget[idx].property;
            let objField = {}, objTitle = {};
            objField[property] = this.currentQueryField[property];
            objTitle[property] = this.currentQueryTitle[property];
            this.$emit('confirm', objField, objTitle);
        },
        fnResetProp(idx){
            this.$set(this.queryFieldsForWidget[idx], 'value', this.queryFieldsForWidget[idx].children[0].initValue);
            this.$set(this.queryFieldsForWidget[idx], 'title', '');
            this.currentQueryField[this.queryFieldsForWidget[idx].property] = this.queryFieldsForWidget[idx].value
            this.currentQueryTitle[this.queryFieldsForWidget[idx].property] = '';
        },
        /**父组件调用-主动清除状态 */
        fnResetTabs(prop) {
            console.log('fnResetTabs 冲突属性 prop :>> ', prop);
            let index = -1;
            for (let i = 0; i < this.queryFieldsForWidget.length; i++) {
                if (this.queryFieldsForWidget[i].property == prop) {
                    index = i;
                    break;
                }
            }
            if (index > -1) {
                this.fnResetProp(index);
            }
        },
        /**转换数据模型 */
        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);
                }
            });
            // this.queryFieldsForWidget
        },
        /**确认事件 */
        handleConfirm(arg, index) { // arg: [items, title, value]
            this.close();
            this.$set(this.queryFieldsForWidget[index], 'title', arg[1]);
            this.$set(this.queryFieldsForWidget[index], 'value', arg[2]);
            this.currentQueryField[this.queryFieldsForWidget[index].property] = arg[2];
            this.currentQueryTitle[this.queryFieldsForWidget[index].property] = arg[1];
            this.$emit('confirm', this.currentQueryField, this.currentQueryTitle);
        },
        fnSetValue(property, title, value) {
            for (let i = 0; i < this.queryFieldsForWidget.length; i++) {
                if (this.queryFieldsForWidget[i].property == property) {
                    this.$set(this.queryFieldsForWidget[i], 'title', title);
                    this.$set(this.queryFieldsForWidget[i], 'value', value);
                    break;
                }
            }
            this.currentQueryField[property] = value;
            this.currentQueryTitle[property] = title;
            // this.$emit('confirm', this.currentQueryField, this.currentQueryTitle);
            this.close();
        },
        /**关门下拉菜单 */
        close() {
            for (let i = 0; i < this.queryFieldsForWidget.length; i++) {
                this.$refs[`dropDownItem${i}`][0].toggle(false);
            }
        },
        /**点击右插槽 */
        handleClickRight() {
            this.$emit('click-right-btn');
            this.close();
        }
    },
    filters: {
        widgetNameFilter(type) {
            let component = '';
            switch (type) {
                case 'radio1': // 单选，排版：单行
                case 'radio2': // 单选，排版：一行两个
                case 'radio3': // 单选，排版：一行三个
                case 'radioFree': // 单选，排版：自由
                    component = WidgetDropDownRadio;
                    break;
                case 'cascader': // 层级选择
                    component = WidgetDropDownCascader;
                    break;
                case 'checkbox': // 多选
                    
                    break;
                case 'date':  // 日期
                    
                    break;
                case 'switch': // 开关
                    
                    break;
                default: // 默认：input

                    break;
            }
            return component
        }
    }
};
</script>

<style lang="less">
    .filtrate-wrapper {
        display: flex;
        width: 100%;
        background-color: #fff;

        .van-dropdown-menu__bar {
            // width: fit-content;
            box-shadow: unset;
            height: 36px;
        }
        .van-dropdown-menu__item {
            // width: 100px !important;
            flex: 1;
            min-width: 100px;
        }
        .dropdown-part {
            flex: 1;
            overflow: auto;

            .dropdown-item-main {
                max-height: 30vh;

            }
            .selected {
                color: @musePrimary;
            }
        }
        .right-part {
            flex-shrink: 0;
            position: relative;
            display: flex;
            justify-content:  center;
            align-items: center;
            margin-right: 10px;
            padding-left: 15px;

            .iconfont {
                font-size: 16px;
                padding-left: 2px;
            }
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 15px;
                background-color: #fff;
                z-index: 1;
            }
            &::after{
                content: '';
                position: absolute;
                bottom: 0;
                top: 0;
                left: 0;
                width: 0;
                height: 16px;
                margin: auto;
                box-shadow: 1px 0px 8px 2px rgba(0, 0, 0, 0.2);
                transition: all 0.2s ease-in-out;
                z-index: 0;
            }
            &.filtering {
                color: @musePrimary;
            }
        }
    }
    .van-dropdown-item__content {
        box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.04), 0px 0px 6px 0px rgba(0,0,0,0.12);
    }
    .van-overlay {
        background-color: rgba(0, 0, 0, 0.3);
    }

</style>
