<template>
  <div class="allButton">
    <div class="allButton_left">
      <!-- lab卡 -->
      <div class="allButton_lab" v-show="labData.length">
        <el-radio-group @change="onChange" v-model="labActive" style="margin-bottom: 30px">
          <el-radio-button v-for="(lab, index) in labData" :key="index" :label="lab.value">
            {{ lab.title }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- 按钮 -->
      <!-- <el-button plain>其他</el-button> -->
      <div class="button-msg-box" v-for="(buttonMsg, index) in buttonData" :key="index">
        <el-button
          v-if="buttonType.find((v) => v === buttonMsg.key)"
          @click="onButton(buttonMsg.key)"
          :plain="buttonMsg.plain"
          :icon="buttonMsg.icon"
          :type="buttonMsg.type"
          :ref="buttonMsg.key"
        >
          {{ buttonMsg.name }}
        </el-button>
      </div>
      <!-- 左侧边 -->
      <slot name="left" />
    </div>
    <div class="allButton_right">
      <div class="button-msg-box" v-for="(buttonMsg, index) in buttonDataRight" :key="index">
        <el-button
          v-show="buttonType.find((v) => v === buttonMsg.key)"
          @click="onButton(buttonMsg.key)"
          :plain="buttonMsg.plain"
          :icon="buttonMsg.icon"
          :type="buttonMsg.type"
          :ref="buttonMsg.key"
        >
          {{ buttonMsg.name }}
        </el-button>
      </div>
      <!-- 右侧边 -->
      <slot name="right" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: null,
      labActive: '',
      buttonData: [
        {
          name: '新增',
          key: 'add',
          plain: true,
          type: 'success',
          icon: 'Plus'
        },
        {
          name: '导出',
          key: 'export',
          plain: true,
          type: 'warning',
          icon: 'DocumentCopy'
        },
        {
          name: '删除',
          key: 'delete',
          plain: true,
          type: 'danger',
          icon: 'DocumentDelete'
        },
        {
          name: '查询',
          key: 'query',
          plain: false,
          type: 'primary',
          icon: 'Search'
        }
      ],
      buttonDataRight: [
        {
          name: '重置',
          key: 'reset',
          plain: true,
          type: 'info',
          icon: 'RefreshRight'
        },
        {
          name: '刷新',
          key: 'refresh',
          plain: true,
          type: 'primary',
          icon: 'Refresh'
        }
      ]
    }
  },
  props: {
    // 按钮类别
    buttonType: {
      type: Array,
      default: () => {
        // 'add' 新增, 'delete' 删除/作废, 'query' 查询, 'refresh' 刷新, 'export' 导出, 'reset' 重置
        // eg :buttonType="['add', 'delete', 'query', 'refresh', 'export', 'reset']"
        return ['query', 'refresh', 'reset']
      }
    },
    // lab选项卡
    labData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // lab选项卡-默认选中
    labIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {},
  created() {
    this.labActive = this.$props.labIndex
  },
  mounted() {
    // console.log(this.$props, 'props')
  },
  methods: {
    // 选项卡点击
    onChange() {
      // console.log(this.labActive, 'this.labActive')
      this.$emit('labChange', this.labActive)
    },
    // 按钮点击
    onButton(data) {
      let emitName = `${data}Button`
      // console.log(emitName, 'emitName')
      this.$emit(emitName, data)
      // 添加动画
      switch (data) {
        case 'query': {
          this.$refs[data][0].$el.children[0].classList.remove('animationQuery')
          setTimeout(() => {
            this.$refs[data][0].$el.children[0].classList.add('animationQuery')
          }, 100)
          break
        }

        case 'delete':
        case 'export': {
          this.$refs[data][0].$el.children[0].classList.remove('animationExport')
          setTimeout(() => {
            this.$refs[data][0].$el.children[0].classList.add('animationExport')
          }, 100)
          break
        }
        case 'reset': {
          this.$refs[data][0].$el.children[0].classList.remove('animationReset')
          setTimeout(() => {
            this.$refs[data][0].$el.children[0].classList.add('animationReset')
          }, 100)
          break
        }
        case 'add':
        case 'refresh': {
          this.$refs[data][0].$el.children[0].classList.remove('animationRotation')
          setTimeout(() => {
            this.$refs[data][0]?.$el.children[0].classList.add('animationRotation')
          }, 100)
          break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.allButton {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  height: 32px;
  .allButton_left,
  .allButton_right {
    overflow: hidden;
    height: 32px;
    display: flex;
  }
  .allButton_lab {
    margin-right: 18px;
  }
  ::v-deep .button-msg-box {
    .el-button {
      margin-right: 10px;
    }

    &:last-child {
      .el-button {
        margin-right: 0px;
      }
    }
    // css3动画
    .animationRotation {
      transition: all 0.5s;
      transform: rotate(-180deg);
    }
    .animationReset {
      transition: all 0.5s;
      transform: rotate(360deg);
    }
    .animationQuery {
      animation: animaQuery 0.2s;
      -webkit-animation: animaQuery 0.2s; /* Safari 和 Chrome */
      // transition: all 0.5s;
      // transform: scale(1.5);
    }
    .animationExport {
      animation: animaExport 0.4s;
      -webkit-animation: animaExport 0.4s; /* Safari 和 Chrome */
    }
  }
}
@keyframes animaQuery {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes animaQuery /*Safari and Chrome*/ {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animaExport {
  0% {
    transform: scale(1);
  }
  60% {
    transform: translate(0%, -300%);
  }
  61% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

@-webkit-keyframes animaExport /*Safari and Chrome*/ {
  0% {
    transform: scale(1);
  }
  60% {
    transform: translate(0%, -300%);
  }
  61% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
</style>
