<template>
  <div>
    <n-form ref="formRef" v-bind="getFormOptions">
      <template v-for="(item, index) in getFormOptions.info" :key="`${index}-${item.label}`">
        <n-form-item v-if="['input'].includes(item.type) || !item.type" :label="item.label">
          <n-input v-model:value="getFormOptions.form[item.key]" v-bind="item.props" />
        </n-form-item>
        <n-form-item v-if="['select'].includes(item.type) " :label="item.label">
          <n-select v-model:value="getFormOptions.form[item.key]" v-bind="item.props" />
        </n-form-item>
        <n-form-item v-if="['area'].includes(item.type) " :label="item.label">
          <AreaCascader :ref="el=>{itemRefs[item.refIndex] = el}" v-model:value="getFormOptions.form[item.key]" v-bind="item.props" @selectd="handleSelect" />
        </n-form-item>
        <n-form-item v-if="['date'].includes(item.type) " :label="item.label">
          <n-date-picker v-model="getFormOptions.form[item.key]" v-bind="item.props" />
        </n-form-item>
      </template>
      <n-form-item class="form__button">
        <n-button @click="handleSearch">查询</n-button>
        <n-button @click="handleReset">重置</n-button>
        <n-button
          v-if="showButton"
          type="text"
          @click="showMoreItem"
        >{{ showItemNum === getFormOptions.info.length - 1 ? '收起' : '展开' }}</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script>
import { computed, ref, unref } from 'vue'
import { NForm } from 'naive-ui'
import AreaCascader from '@/components/AreaCascader/index.vue'
export default {
  name: 'SearchPage',
  components: { AreaCascader },
  props: {
    ...NForm.props,
    info: {
      type: Array,
      default: () => []
    }
  },
  emits: ['search', 'reset'],
  setup(props, { emit }) {
    const showItemNum = ref(3)
    const len = ref(props.info.length - 1)
    const itemRefs = ref([])
    const showButton = ref(!!(showItemNum.value < len.value))
    const form = ref({})
    /* 初始化搜索表单信息 */
    function initForm() {
      Object.keys(form.value).forEach((key) => {
        form.value[key] = null
      })
      itemRefs.value.forEach((item) => {
        item.clearValue()
      })
    }
    function handleSelect(data) {
      form.value = {
        ...form.value,
        ...data
      }
    }
    const getFormOptions = computed(() => {
      return {
        form: unref(form),
        labelWidth: 'auto',
        labelPlacement: 'left',
        inline: true,
        info: [...unref(props).info]
      }
    })
    function handleSearch() {
      emit('search', getFormOptions.value.form)
    }
    function handleReset() {
      initForm()
      emit('reset', getFormOptions.value.form)
    }
    function showMoreItem() {
      showItemNum.value = showItemNum.value === len.value ? 3 : len.value
    }
    return {
      showItemNum,
      showButton,
      getFormOptions,
      handleSearch,
      handleReset,
      handleSelect,
      itemRefs,
      showMoreItem
    }
  }
}

</script>
<style scoped lang='scss'>
.n-form{
  flex-wrap: wrap;
}
.n-form-item{
  .n-input{
    width: 200px;
  }
  .n-select{
    width: 200px;
  }
  .n-cascader{
    width: 200px;
  }
  transition: all 10s;
}
.form__button{
  button+button{
    margin-left: 20px;
  }
}
</style>
