<template>
  <div
    class="shrinkOrExtend"
    :formData="formData"
    :height="shrinkHeight"
    :currentValue="currentValue"
  >
    <div
      class="upOrDown"
      @click="upOrDown(shrinkHeight)"
    >
      <div class="upDown">
        {{ currentValue ? '展开':'收起' }}
      </div>
      <i :class="currentValue ? 'iconfont iconios-arrow-down' : 'iconfont iconios-arrow-up'" />
    </div>
    <Button
      type="fcdefault"
      class="resetBtn"
      @click="reset"
    >
      重置
    </Button>
    <Button
      type="primary"
      @click="queryBtn"
    >
      查询
    </Button>
  </div>
</template>

<script>
  export default {
    name: 'ShrinkOrExtend',
    props: {
      // 收缩展开参数
      currentValue: {
        type: Boolean,
        default: false
      },
      // 收缩后高度
      shrinkHeight: {
        type: String,
      },
      // 查询列表数据
      formData: {
        type: Object,
      },
    },
    data() {
      return {
        // currentValue:false,
      };
    },
    methods: {
      upOrDown(height) {
        // this.currentValue = !this.currentValue;
        this.$emit('click', height);
      },
      // 重置
      reset() {
        this.$emit('on-reset',);
        // this.formData = {};
        // this.currentPage = 1;
        // this.getConfigData();
      },
      // 查询按钮点击
      queryBtn() {
        this.$emit('on-query',);
        // this.currentPage = 1;
        // this.getConfigData();
      },
    },
  };
</script>

<style lang="less">
    .shrinkOrExtend {
      width: 100%;
      margin-bottom: 24px;
      display: flex;
      justify-content: flex-end;
      .resetBtn {
        margin-right: 8px;
      }
    }
    .upOrDown{
      display: flex;
      align-items: center;
      margin-right: 8px;
    }
    .upDown{
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      line-height: 17px;
    }
</style>
