<template>
  <div class="pro-query">
    <!-- 表单内容 -->
    <a-form
      layout="inline"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol">
      <a-form-item v-show="!param.hidden || !hidden" :label="param.label" :key="index" v-for="(param, index) in searchParam">
        <!-- 输入框 -->
        <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]"
                  style="width: 160px" class="pro-query-select"
                  :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-form-item>
      <!-- 按钮组 -->
      <a-button type="primary" class="pro-query-button" @click="search"> 查询 </a-button>
      <a-button html-type="submit" class="pro-query-button" @click="reset"> 重置 </a-button>
      <!-- 收起 隐藏 -->
      <a class="pro-query-hidden" @click="hiddenHandle" v-show="hidden && more">展开 &nbsp;<DownOutlined/></a>
      <a class="pro-query-hidden" @click="hiddenHandle" v-show="!hidden && more">收起 &nbsp;<UpOutlined/></a>
    </a-form>
  </div>
</template>
<script>
import "./index.less";
import { defineComponent, reactive, ref,watch } from "vue";
import { DownOutlined , UpOutlined } from "@ant-design/icons-vue"
import { useForm } from "@ant-design-vue/use";

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: {
    DownOutlined,
    UpOutlined
  },
  emits: [
    'on-search',
    'on-reset'
  ],
  setup(props, {emit}) {

    const hidden = ref(true);
    const more = ref(false);

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

    generateFormState(props.searchParam);
    const { validate, resetFields } = useForm(formState, formRules)

    /// 是否存在隐藏表单
    props.searchParam.forEach(element => {
      if(element.hidden){
        return more.value = true;
      }
    });

    /// 更多操作
    const hiddenHandle = function() {
      hidden.value = !hidden.value;
    }

    /// 表单查询
    const search = async function(){
      var o = await validate();
      emit('on-search',o)
    }

    /// 重置表单
    const reset = function(){
      resetFields();
      emit('on-reset')
    }

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

    return {
      more: more,
      hidden: hidden,
      hiddenHandle: hiddenHandle,

      /// EMIT
      search: search,
      reset: reset,

      /// 状态
      formState,
      formRules,
      setValue,
    }
  }
});
</script>

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