<template>
  <div class="head-layer">
    <el-tabs v-model="activeValue">
      <el-tab-pane 
        v-for="item in options" 
        :key="item.value"
        :label="item.name" 
        :name="item.value" >
      </el-tab-pane>
    </el-tabs>
    <div class="head-content-layer" :class="{show: show}" v-if="notContent === undefined">
      <div class="head-content">
        <slot />
      </div>
      <div class="display" @click="show = !show" v-if="showCtrl !== undefined">
        <template v-if="show">
          <span>收起</span>
          <i class="el-icon-arrow-up"></i>
        </template>
        <template v-else>
          <span>展开</span>
          <i class="el-icon-arrow-down"></i>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  props: ['options', 'modelValue', 'showCtrl', 'notContent'],
  setup(props) {
    let currItem = props.options.find(({value}) => value === props.modelValue) || props.options[0]

    let active = ref(currItem)
    let show = ref(true)
    let activeValue = computed({
      get: () => active.value.value,
      set: val => {
        if (val !== active.value.value) {
          active.value = props.options.find(({value}) => Number(value) === Number(val))
        }
      }
    })

    return { active, activeValue, show }
  },
  watch: {
    active() {
      if (this.modelValue !== this.active.value) {
        this.$emit('update:modelValue', this.active.value)
      }
    },
    modelValue(newVal) {
      this.active = this.options.find(({value}) => value === newVal)
    }
  }
}
</script>

<style lang="scss" scoped>
.head-layer {
  background-color: #fff;
  border-radius: 4px;
  // padding-top: 8px;
}

.head-content-layer {
  padding: 16px 154px 16px 16px;
  position: relative;

  .head-content {
    overflow: hidden;
    height: 42px;
  }
  
  
  &.show {
    padding-bottom: 16px;

    .head-content {
      height: auto;
    }
  }

  .display {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #3366FF;
    font-size: 0.85rem;
    cursor: pointer;

    i {
      color: currentColor;
      font-size: 1em;
      margin-left: 5px;
    }
  }
}
</style>

<style>
.head-layer .el-tabs__nav-wrap {
  padding: 0 16px;
}

.head-layer .el-tabs__header {
  margin-bottom: 0;
}

.head-layer .el-form-item {
  margin-bottom: 0;
}

.head-layer .el-tabs__item.is-active {
  color: #303133;
}

.head-layer .el-tabs__active-bar {
  display: none;
}
</style>