<template>
  <div>
    <div class="bx-result-status">
      <div class="bx-result-status-body">
        <div class="bx-result-content">
          <bxs-icon :name="dataArr[currentIndex].icon" />
          <div>{{ title }}</div>
        </div>
        <div class="bx-img">
          <img
            class="bx-img-block"
            :src="dataArr[currentIndex].url"
            >
        </div>
      </div>
      <slot name="footer" />
    </div>
  </div>
</template>
<script>
import Icon from '../icon/index'
import { create } from '../utils'

export default create({
  name: 'result-status',
  props: {
    title: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'wait',
      validator: value =>
        value === '' || ['wait', 'success', 'fail'].includes(value),
    },
  },
  data() {
    return {
      currentIndex: 0,
      dataArr: [
        {
          type: 'wait',
          icon: 'warning-solid',
          url:
            'http://media.winbaoxian.com/autoUpload/activity/wait_e0decee1376db37.png',
        },
        {
          type: 'success',
          icon: 'check-solid',
          url:
            'http://media.winbaoxian.com/autoUpload/activity/pass_f3865e3c29e7e11.png',
        },
        {
          type: 'fail',
          icon: 'close-solid bx-red-font',
          url:
            'http://media.winbaoxian.com/autoUpload/activity/fail_5a9c32460ea8cbf.png',
        },
      ],
    }
  },
  created() {
    if (this.type === 'wait') {
      this.currentIndex = 0
    } else if (this.type === 'success') {
      this.currentIndex = 1
    } else if (this.type === 'fail') {
      this.currentIndex = 2
    }
  },
  components: {
    [Icon.name]: Icon,
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
