<!-- 搜索表单 -->
<template>
    <el-form
      size="small"
      label-width="90px"
      class="ele-form-search"
      @keyup.enter.native="search"
      @submit.native.prevent
    >
      <el-row :gutter="10">


        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="合同名称">
            <el-input
              clearable
              size="small"
              v-model="where.contractName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="客户名称">
            <el-input
              clearable
              size="small"
              v-model="where.partaName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="签订人">
            <el-input
              clearable
              size="small"
              v-model="where.linkName"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 4 }" >
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="search"
            >
              查询
            </el-button>

            <el-button
              @click="reset"
              icon="el-icon-refresh"
              class="ele-btn-icon"
              size="medium"
            >重置</el-button
            >
            <slot></slot>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="10">

        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="合同编码">
            <el-input
              clearable
              size="small"
              v-model="where.contractNo"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="合同编号">
            <el-input
              clearable
              size="small"
              v-model="where.contractNumber"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
  </template>

  <script>
    export default {
      data() {
        // 默认表单数据
        const defaultWhere = {
          contractName: '',
          partaName: '',
          linkName: '',
          contractNumber: '',
          contractNo: '',
        };
        return {
          defaultWhere,
          // 表单数据
          where: { ...defaultWhere },
          loading:false
        };
      },
      computed: {
        // 是否开启响应式布局
        styleResponsive() {
          return this.$store.state.theme.styleResponsive;
        }
      },
      methods: {
        /* 搜索 */
        search() {
          this.$emit('search', this.where);
        },
        /*  重置 */
        reset() {
          this.where = { ...this.defaultWhere };
          this.search();
        },

      }
    };
  </script>
