<template>
  <div class="page-search">
    <hy-form v-bind="formConfig" v-model="formData" :showArrowDown="showArrowDown" :arrowDown="arrowDown" :spanNum="spanNum">
      <!-- <template #header>
        <h1 class="header">高级检索</h1>
      </template>-->
      <template v-for="item in formConfig.formItems" #[item.slot]>
        <template v-if="item.slot">
          <slot :name="item.slot"></slot>
        </template>
      </template>
      <template #footer>
        <div class="handle-btns">
          <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
          <el-button type="primary" icon="Search" @click="handleQueryClick"
            >搜索</el-button
          >
          <el-button v-if="showArrowDown && arrowDown" type="primary" link @click="changeArrowDown">展开  <el-icon><ArrowDown /></el-icon></el-button>
          <el-button v-if="showArrowDown && !arrowDown" type="primary" link @click="changeArrowDown">收起  <el-icon><ArrowUp /></el-icon></el-button>
        </div>
      </template>
    </hy-form>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'
import HyForm from '@/base-ui/form'

export default defineComponent({
  props: {
    initParams:{
      type: Object,
    },
    searchFormConfig: {
      type: Object,
      reuqired: true
    },
    dictId: {
      type: String,
      reuqired: true
    },
    deptId: {
      type: Number,
      reuqired: true
    },
    roleId: {
      type: String,
      reuqired: true
    },
    dataProcessingFn: {
        // 用于请求前处理数据，必须要有返回值
        type: Function,
        default: (data) => {
          return data;
        },
      },
  },
  components: {
    HyForm
  },
  emits: ['resetBtnClick', 'queryBtnClick', 'queryDataInfo'],
  setup(props, { emit }) {
    // 双向绑定的属性应该是由配置文件的field来决定
    // 1.优化一: formData中的属性应该动态来决定
    const formItems = props.searchFormConfig?.formItems ?? []
    const formOriginData = {}
    for (const item of formItems) {
      formOriginData[item.field] = ''
    }
    const formData = ref(formOriginData)
    props.deptId && Reflect.set(formData.value, 'deptId', props.deptId)
    props.dictId && (formData.value['dictType'] = props.dictId)
    props.roleId && (formData.value['roleId'] = props.roleId)

    // 搜索表单增加一些默认值操作
    const formConfig = props.searchFormConfig
    // 默认将表单的label当做提示内容
    formConfig.formItems = formConfig.formItems.map((val) => {
      return {
        ...val,
        placeholder: val.placeholder ? val.placeholder : `请输入${val.label}`
      }
    })


    let showArrowDown = ref(false)
    
    let spanNum = ref(6)
    if (formConfig.colLayout && formConfig.colLayout.span) spanNum.value = formConfig.colLayout.span

    if (formConfig.formItems.length > (24 / spanNum.value)) showArrowDown.value = true

    let arrowDown = ref(true)


    const changeArrowDown = () => {
      arrowDown.value = !arrowDown.value 
    }

    watch(
      () => props.deptId,
      (newValue) => {
        formData.value['deptId'] = newValue
        handleQueryClick()
      },
      () => props.roleId,
      (newValue) => {
        formData.value['roleId'] = newValue
        handleQueryClick()
      }
    )
    // const queryData = ref([])
    // 2.优化二: 当用户点击重置
    const handleResetClick = () => {
      // for (const key in formOriginData) {
      //   formData.value[`${key}`] = formOriginData[key]
      // }
      formData.value = formOriginData
      emit('resetBtnClick')
    }

    // 3.优化三: 当用户点击搜索
    const handleQueryClick = () => {
      // debugger
      const timeRangeField = props.searchFormConfig.formItems.filter((o) => {
        return o.type === 'datepicker'
      });

      if (timeRangeField.length > 0) {
        for (const schema of timeRangeField) {
          // if (formData.value[`${item.field}`]) {
          
            if (formData.value[`${schema.field}`] && formData.value[`${schema.field}`].length === 2) {
            // fieldArray
            // const schema = props.searchFormConfig.formItems.find((o) => {
            //   return o.field === 'timeRange'
            // })
            // console.log(schema, 'asdfadsf')
            // debugger
            if (schema && schema.fieldArray) {
              formData.value[`${schema.fieldArray[0]}`] = schema.resFormat
                ? schema.resFormat(formData.value[`${schema.field}`][0])
                : formData.value[`${schema.field}`][0]
              formData.value[`${schema.fieldArray[1]}`] = schema.resFormat
                ? schema.resFormat(formData.value[`${schema.field}`][1])
                : formData.value[`${schema.field}`][1]

              // delete formData.value.timeRange
            }
          } else {
            // const schema = props.searchFormConfig.formItems.find((o) => {
            //   return o.field === 'timeRange'
            // });
            if (schema && schema.fieldArray) {
              delete formData.value[`${schema.fieldArray[0]}`]
              delete formData.value[`${schema.fieldArray[1]}`]
            }
          }
          // }
        }
      }
      
      if (props.initParams) {
        formData.value = {
          ...formData.value,
          ...props.initParams,
        }
      }
      emit('queryBtnClick', formData.value)
      emit('queryDataInfo', formData.value)
    }



    return {
      spanNum,
      arrowDown,
      changeArrowDown,
      showArrowDown,
      formConfig,
      formData,
      handleResetClick,
      handleQueryClick
    }
  }
})
</script>

<style scoped>
.header {
  color: red;
}

.handle-btns {
  text-align: right;
  padding: 0 15px 0px 0;
}
</style>
