<template>
<div class="btn-width">
  <Button 
    v-for="(item,index) in footer"
    v-show="item.id === undefined || item.id === '' ? true : $showBtn(item.id)"
    :key="item.name"
    :type="item.type?item.type:'default'"
    :loading="loading === true && currentIndex === index"
    @click="_footerClick(item.name,index)"
  >{{item.name}}
  </Button>
</div>
</template>

<script>
export default {
  // props: {
  //   footer: null,  //任何类型
  // },
  props: ['footer'],
  data() {
    return {
      loading: false,
      currentIndex: -1
    }
  },
  methods: {
    _hideLoading() {
      this.loading = false
      this.currentIndex = -1
    },
    _footerClick(name, index) {
      this.currentIndex = index
      this.$emit('on-result-change', name)
      if (name === '取消') {
        this.loading = false
      } else {
        this.loading = true
        // 点击完的5秒钟之后，取消loading
        setTimeout(() => {
          this.loading = false
        }, 5000)
      }
    }
  }
}
</script>
