<template>
    <!-- 表单内容 -->
    <a-search ref="formRef" @search="search" @reset="reset">
        <a-search-item v-show="!param.hidden || !hidden" :label="param.label" :key="index" v-for="(param, index) in searchParam" :span="param.type == 'rangePicker' ? 2 : 1">
          <!-- 输入框 -->
          <a-input v-model:value="formState[param.key]"
                  v-show="!param.hidden || !hidden"
                  v-if="param.type == 'input'" type="text"
                  :disabled=" param.disabled  === undefined ? false : param.disabled">
          </a-input>
          <!--多行文本框-->
          <a-textarea v-model:value="formState[param.key]"
                      v-show="!param.hidden || !hidden"
                      v-if="param.type == 'textarea'"
                      placeholder="Info" :rows="4"
                      :disabled=" param.disabled  === undefined ? false : param.disabled"/>
          <!-- 数值输入框 -->
          <a-input-number v-model:value="formState[param.key]" :min="1" :max="100" v-show="!param.hidden || !hidden"
                          v-if="param.type == 'number'" :disabled=" param.disabled  === undefined ? false : param.disabled"/>
          <!-- 选择框 -->
          <a-select v-if="param.type == 'select'"
                    v-model:value="formState[param.key]"
                    :disabled=" param.disabled  === undefined ? false : param.disabled">
            <a-select-option :key="index" v-for="(option,index) in param.options" :value="option.value" >{{option.text}}</a-select-option>
          </a-select>
          <!-- 连级选择器：change-on-select 允许只选父节点 -->
          <a-cascader v-if="param.type == 'cascader'" v-model:value="formState[param.key]" :options="param.options" change-on-select placeholder="Please select" />
          <!-- 日期选择 -->
          <a-time-picker v-if="param.type == 'timePicker'" v-model:value="formState[param.key]" :valueFormat="param.format ? param.format:'YYYY-MM-DD HH:mm:ss'" />
          <a-date-picker v-if="param.type == 'datePicker'" v-model:value="formState[param.key]" :valueFormat="param.format ? param.format:'YYYY-MM-DD HH:mm:ss'"/>
          <a-range-picker v-if="param.type == 'rangePicker'" v-model:value="formState[param.key]" :valueFormat="param.format ? param.format:'YYYY-MM-DD HH:mm:ss'"
                          :format="param.format ? param.format:'YYYY-MM-DD HH:mm:ss'"/>
          <a-week-picker v-if="param.type == 'weekPicker'" v-model:value="formState[param.key]" :valueFormat="param.format ? param.format:'YYYY-MM-DD HH:mm:ss'"/>
          <!-- 内容插槽 -->
          <template v-if="param.type == 'custom'">
            <slot :name="param.customRender" :data="formState"></slot>
          </template>
        </a-search-item>
    </a-search>
</template>
<script>
import { defineComponent, reactive, ref,watch } from "vue";
export default defineComponent({
  name: "pro-query",
  props: {
    searchParam: {
      type: Array,
    },
    labelCol: {
      type: Object,
      default: function() { return { span: 10 }}
    },
    wrapperCol: {
      type: Object,
      default: function() { return { span: 14 }}
    }
  },
  components: {

  },
  emits: [
    'on-search',
    'on-reset'
  ],
  setup(props, {emit}) {

    const formRef = ref();
    const formState = reactive({})
    const formRules = reactive({})
    /// 表单数据、值初始化
    const generateFormState = array => {
      array.length > 0 && array.forEach(it => {
        const {key, rules = [], value,defaultValue} = it
        formState[key] = defaultValue || (it.type !== 'select' && value === undefined ? "" : value);
        formRules[key] = rules
      })
    }
    watch(props, (props) => {
      console.log("watch props",props)
    })

    generateFormState(props.searchParam);


    /// 表单查询
    const search = async function(){
      try {
        emit('on-search', {...formState})
      } catch (error) {
        console.log('表单验证失败:', error);
      }
    }

    /// 重置表单
    const reset = function(){
      generateFormState(props.searchParam);
      search();
      emit('on-reset')
    }

    /// 给表单中的属性赋值（初值）
    const setValue = async function(key,value){
      formState[key] = value == undefined ? "":value
    }

    return {
      formRef,
      /// EMIT
      search: search,
      reset: reset,
      /// 状态
      formState,
      formRules,
      setValue,
    }
  }
});
</script>

<style>
.pro-query-hidden {
  line-height: 30px;
}
</style>
