<template>
  <div class="form-clear-container" :class="{shrinkable:shrinkable}">
    <el-tooltip effect="dark" content="清空筛选" placement="top">
      <svg-icon icon-class="clear" @click="onClear" class="clear-button"/>
    </el-tooltip>
    <div @click="onChange" style="margin-left: 16px;" v-if="shrinkable">
      <span style="margin-right: 8px;">{{ show ? '收起' : '展开' }}</span>
      <i class="el-icon-arrow-down" :class="{up:show, down:!show}"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "FormClear",
  props: {
    shrinkable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: true,
    }
  },
  methods: {
    onClear() {
      this.$emit('clear');
    },
    onChange() {
      this.show = !this.show;
      this.$emit('change', this.show);
    }
  }
}
</script>

<style scoped lang="scss">
.form-clear-container {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  color: #666666;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  min-width: 40px;

  .clear-button {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    padding: 8px;
  }

  &:hover {
    cursor: pointer;
  }

  .up {
    transform: rotate(180deg);
    transition: all .5s;
  }

  .down {
    transition: all .5s;
  }
}

.shrinkable {
  min-width: 100px;
}
</style>
