import { defineComponent, onMounted, reactive, getCurrentInstance, ref } from "vue";
import moment from 'moment'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import './index.scss'
import { dict } from './demo'
import { getType, deepCopy, getObj } from './util.js'


const fieldStyle = {
    width: '200px', textAlign: 'left'
}

export default defineComponent({
    props: {
        fieldArray: {
            type: Array,
            default: () => dict
        },
        itemLayout: {
            type: Object,
            default: () => ({
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
            })
        },
        searchOperation: {
            type: Function
        },
        searchSlot: {
            type: Function
        },
        resetParamsFun:{
            type: Function,
            default: (field) => {
                return {}
            }
        },
        dealSearchParams: {
            type: Function,
            default: (field) => {
                return field
            }
        },
        initChildMethod: Function
    },
    emits: ['searchReset'],

    setup (props, context) {
        const tempField = {}
        props.fieldArray.forEach(it => {
            tempField[it.attr] = it
        })
        const refreshCom = ref('true')
        const { ctx, proxy } = getCurrentInstance(); //获取当前组件实例
        const { path, query } = proxy.$route
        const dateFormat = 'YYYY-MM-DD'
        // const dateFormat = 'YYYY-MM-DD HH:mm:ss'
        let form = reactive({})

        const setDefaultForm = () => {
            for (let k in query) {
                if (tempField[k] && tempField[k].type === 'timerange' && query[k].length === 2) {
                    form[k] = [moment(query[k][0], tempField[k].dateFormat || dateFormat), moment(query[k][1], tempField[k].dateFormat || dateFormat)]
                } else if (tempField[k] && tempField[k].type === 'time' && query[k]) {
                    form[k] = moment(query[k][0], tempField[k].dateFormat || dateFormat)
                } else {
                    form[k] = query[k]
                }
            };
        }
        setDefaultForm()
        // const defaultValue = moment('2015-06-06', dateFormat)
        const getForm = () => {
            let temp = JSON.parse(JSON.stringify(form))
            Object.keys(temp).forEach(key => {
                const value = temp[key]
                const option = getObj(props.fieldArray, key, 'attr')
                if (option.type == 'time') {
                    temp[key] = moment(value).format(option.dateFormat || dateFormat)
                } else if (option.type == 'timerange') {
                    temp[key] = value.map(it => moment(it).format(option.dateFormat || dateFormat))
                } else {
                    temp[key] = value
                }
            })
            return temp
        }
        const confirm = () => {
            const field = getForm()
            if(field){
                field.timestamp = new Date().getTime()
            }

            proxy.$router.push({
                path,
                query: props.dealSearchParams(field)
            })
        }

        const valueChange = (val, attr) => {
            form[attr] = val || undefined
        }
        const reset = () => {
            Object.keys(form).forEach(key => {
                form[key] = undefined
            })
            const query = proxy.$route.query
            proxy.$emit('searchReset')
            proxy.$router.push({
                path,
                query: props.resetParamsFun(query)
            })
        }

        onMounted(() => {
            //初始化子组件可以被调用的方法
            if (props.initChildMethod) {
                props.initChildMethod({
                    getForm,
                    valueChange,
                    reset
                })
            }

            props.fieldArray.forEach(async (it) => {
                if (it.type === 'select' && it.options.length === 0 && it.fun) {
                    const res = await it.fun()
                    if (res.success) {
                        if (it.dealData) {
                            it.options = it.dealData(res.data)
                        } else {
                            it.options = res.data
                        }
                    }
                    setDefaultForm()
                    refreshCom.value = new Date().getTime()
                }
            })
        })


        return () => (
            <div className='yd3_search' >
                <span style={{ display: 'none' }}>
                    {refreshCom.value}
                </span>
                <a-form layout='inline'>
                    {
                        props.fieldArray.map((it) => {
                            return <a-form-item label={it.label}>
                                {it.type == 'input' && <a-input value={form[it.attr]} onInput={(e) => valueChange(e.target.value, it.attr)} style={fieldStyle}></a-input>}
                                {it.type == 'time' && <a-date-picker locale={locale}  format={it.dateFormat || dateFormat} show-time={it.showTime ? { format: it.showTime } : false} value={form[it.attr]} onChange={(e) => valueChange(e, it.attr)}></a-date-picker>}
                                {it.type == 'timerange' && <a-range-picker locale={locale} format={[it.dateFormat || dateFormat, it.dateFormat || dateFormat]} onChange={(e) => valueChange(e, it.attr)} value={form[it.attr]} onOk={(e) => valueChange(e, it.attr)} show-time={it.showTime ? { format: it.showTime } : false}></a-range-picker>}
                                {it.type == 'select' && <a-select value={form[it.attr]} onChange={(e) => valueChange(e, it.attr)} style={fieldStyle} >
                                    {
                                        it.options.map(item => {
                                            return <a-select-option value={item.value}>
                                                {item.name}
                                            </a-select-option>
                                        })
                                    }
                                </a-select>
                                }
                            </a-form-item>
                        })
                    }
                    {props.searchSlot && props.searchSlot()}
                    {context.slots.searchSlot && context.slots.searchSlot()}
                    <a-form-item >
                        <a-button onClick={confirm} type='primary' >搜索</a-button>
                        <span className='btnRight'>
                            <a-button onClick={reset}>重置</a-button>
                        </span>
                        {/* 兼容两种插槽方式 */}
                        {props.searchOperation && props.searchOperation()}
                        {context.slots.searchOperation && context.slots.searchOperation()}
                    </a-form-item>
                </a-form>
            </div>
        )
    }
})