<template>
  <el-card :body-style="cardBodyStyle">
    <el-form :inline="true" :model="query">
      <el-row>
        <el-col :span="5">
          <el-form-item label="合同号">
            <el-input v-model="query.contrNo" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="对方合同号">
            <el-input v-model="query.khContrNo" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单号">
            <el-input v-model="query.purOrdNo" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="供应商">
            <el-input v-model="query.tradePartnerName" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" v-if="showAdvanced">
          <el-form-item label="隐藏的输入框">
            <el-input v-model="query.hiddenInput" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="">
            <el-button @click="toggleAdvanced" type="text">{{ showAdvanced ? '收起' : '高级查询' }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      cardBodyStyle: {
        padding: '20px'
      },
      query: {
        contrNo: '',
        khContrNo: '',
        purOrdNo: '',
        tradePartnerName: '',
        hiddenInput: ''
      },
      showAdvanced: false
    };
  },
  methods: {
    toggleAdvanced() {
      this.showAdvanced = !this.showAdvanced;
    }
  }
};
</script>

<style scoped>
/* 根据需要调整样式 */
</style>
