<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: {
    value: Boolean,
  },
  model: {
    prop: 'value',
    event: 'expand'
  },
  data() {
    return {
      expand: false
    }
  },
  methods: {
    handleExpand() {
      this.expand = !this.expand
    }
  },
  computed: {
    btnText() {
      return this.expand ? '收起' : '展开'
    },
    expandIcon() {
      return this.expand ? 'iconfont iconDouble_Up' : 'iconfont iconDouble_Down'
    }
  },
  watch: {
    expand: {
      immediate: true, handler(v) {
        this.$emit('expand', v)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.AiPullDown {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  transform: translateY(100%);
  background-color: #fff;

  .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>
