<template>
  <section class="AiPullDown">
    <div class="line"/>
    <div class="down-content" @click="handleExpand">
      <i :class="expandIcon"/>
      <span>{{ btnText }}</span>
    </div>
    <div class="line"/>
  </section>

</template>

<script>
export default {
  name: "AiPullDown",
  props: {
    target: String,
    height: {default: 4},
  },
  data() {
    return {
      expand: false
    }
  },
  methods: {
    handleExpand() {
      this.expand = !this.expand
      if (this.target) {

      } else this.$emit('change', this.expandStyle)
    }
  },
  computed: {
    btnText() {
      return this.expand ? '收起高级搜索' : '展开高级搜索'
    },
    expandStyle() {
      let initStyle = {overflow: 'hidden', height: `${this.height}px`}
      this.expand && (initStyle.height = "auto")
      return initStyle
    },
    expandIcon() {
      return this.expand ? 'iconfont iconDouble_Up' : 'iconfont iconDouble_Down'
    }
  },
  mounted() {
    this.$emit("change", this.expandStyle)
  }
}
</script>
<style lang="scss" scoped>
.AiPullDown {
  display: flex;

  .line {
    flex: 1;
    min-width: 0;
    border-top: 1px solid #eee;
  }

  .down-content {
    cursor: pointer;
    padding: 0 8px;
    height: 24px;
    border-radius: 0 0 8px 8px;
    border: 1px solid #eee;
    border-top: 0;
    box-sizing: border-box;
    color: #333;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
