<template>
  <div class="jeecg-basic-table-form-container">
    <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :lg="6" :md="8" :sm="24">
          <a-form-item label="姓名">
            <a-input placeholder="请输入传承人姓名" v-model:value="queryParam.name"></a-input>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="8" :sm="24">
          <a-form-item label="性别">
            <j-dict-select-tag type="list" v-model:value="queryParam.gender" dictCode="sex" placeholder="请选择性别" />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="8" :sm="24">
          <a-form-item label="传承级别">
            <a-select placeholder="请选择传承级别" v-model:value="queryParam.heritageLevel">
              <a-select-option value="national">国家级</a-select-option>
              <a-select-option value="provincial">省级</a-select-option>
              <a-select-option value="municipal">市级</a-select-option>
              <a-select-option value="county">县级</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="8" :sm="24">
          <a-form-item label="状态">
            <j-dict-select-tag type="list" v-model:value="queryParam.status" dictCode="valid_status" placeholder="请选择状态" />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="8" :sm="24">
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :lg="6">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-col>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts">
  import {defineComponent, reactive} from 'vue';
  import {Form} from 'ant-design-vue';

  export default defineComponent({
    name: "OroqenInheritorForm",
    components:{
      //JDictSelectTag,
    },
    emits:['searchReset','searchQuery'],
    setup(props,{emit}){
      const formRef = reactive(Form);
      const queryParam = reactive({});
      const labelCol = reactive({
        xs: { span: 24 },
        sm: { span: 5 },
      });
      const wrapperCol = reactive({
        xs: { span: 24 },
        sm: { span: 16 },
      });

      function searchQuery(){
        emit('searchQuery',queryParam)
      }
      function searchReset(){
        emit('searchReset',queryParam)
      }
      return{
        formRef,
        queryParam,
        labelCol,
        wrapperCol,
        searchQuery,
        searchReset,
      }
    }
  });
</script>

<style scoped>
  .jeecg-basic-table-form-container{
    padding: 20px 10px 0px 10px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom:10px;
  }

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
</style>