<template>
  <el-form class="filter-form-mod" :inline="true" ref="filterForm" :model="filter" :rules="rules" size="mini">

    <div class="filter-form-row">

      <el-form-item label-width="100px" label="支行名称：" prop="branchName" class="col-filter-item">
        <el-input v-model.trim="filter.branchName" placeholder="请输入支行名称" clearable></el-input>
      </el-form-item>

      <el-form-item label-width="100px" label="支行行号：" prop="bankNo" class="col-filter-item">
        <el-input v-model.trim="filter.bankNo" placeholder="请输入支行行号" clearable></el-input>
      </el-form-item>

      <el-form-item class="col-filter-item filter-form-submit-row">
        <div class="filter-form-submit">
          <el-button icon="el-icon-search" type="primary" native-type="submit" @click.stop.prevent="onFilterForm" :disabled="filter.submitting">
            {{ filter.submitting?'正在查询...':'查询' }}
          </el-button>
          <el-button icon="el-icon-delete" type="info" @click.stop.prevent="onResetFilterForm">清空</el-button>
        </div>
      </el-form-item>

    </div>

  </el-form>
</template>

<script>
  import AreaLink from './AreaLink'

  export default {
    name: "dataFilter",
    components: {
      AreaLink
    },
    props: {
      rules:{
        type:Object,
        default:function () {
          return {}
        }
      },
      filter:{
        type:Object,
        default:function () {
          return {
            branchName:'',
            bankNo:'',
            submitting:false
          }
        }
      }
    },
    data() {
      return {}
    },
    computed: {},
    mounted() {
    },
    methods: {
      onFilterForm(){
        this.$refs['filterForm'].validate(async (valid) => {
          this.$emit('submit',this.filter,valid);
          return false
        })
      },
      onResetFilterForm(){
        this.$refs['filterForm'].resetFields();
        this.$emit('reset',this.filter);
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*查询条件表单*/
  .filter-form-mod {
    padding: 10px 10px 0px 10px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;

    .col-filter-item {
      margin-bottom: 10px;
    }

    .filter-form-submit-row {
      margin-left: 54px;
      button {
        margin-right: 12px;
      }
    }

  }
</style>
