<template>
  <div class="lab-button">
    <el-button v-loading="loading" v-bind="element.props" @click="onClick">{{element.label}}</el-button>
  </div>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabEvent from "../../mixins/LabEvent";

export default {
  name: "LabButton",
  mixins: [LabBase, LabEvent],
  data() {
    return {
      loading: false
    }
  },
  created() {
    this.$LabRender.autoFill(this.element, this)
  },
  methods: {
    onClick() {
      if (this.labDesign.switch) {
        this.labDesign.activeChange(this.element, this.elements, this.index)
      } else {
        this.loading = true
        this.dispatchEvent('click')
            .then(() => {
              setTimeout(() => {
                this.loading = false
              }, 300)
            })
      }
    }
  }
}
</script>

<style lang="scss">

</style>