<template>
  <div class="wrapper" v-if="show" :style="wrapStyle">
    <div class="dof-result" :style="{ top: setPaddingTop, backgroundColor: bgColor_ }">
      <image class="result-image" :aria-hidden="true" :src="resultType.pic" :style="imgStyle"></image>
      <slot name="text">
        <div class="result-content" v-if="resultType.content">
          <text class="content-text">{{ resultType.content }}</text>
          <text class="content-text content-desc" v-if="resultType.desc">{{ resultType.desc }}</text>
        </div>
      </slot>

      <div class="result-button" @touchend="handleTouchEnd">
        <slot name="button">
          <dof-button
            v-if="resultType.button"
            size="medium"
            :btnStyle="{ width: 'auto', overflow: 'hidden', minWidth: '240px', maxWidth: '480px' }"
            :textStyle="{ textOverflow: 'none', maxWidth: '418px', marginLeft: 0, textAlign: 'center' }"
            :text="resultType.button"
            @dofButtonClicked="onClick"
          ></dof-button>
        </slot>
        <text class="btn-sub-text" v-if="resultType.btnSubTitle" @click="onSubClick">{{ resultType.btnSubTitle }}</text>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.dof-result {
  /* width: 750px; */
  flex: 1;
  align-items: center;
  justify-content: center;
  /* background-color: #f9f9f9; */
}

.result-image {
  width: 320px;
  height: 320px;
}

.result-content {
  margin-top: 0px;
  align-items: center;
}

.content-text {
  height: auto;
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: #616c73;
  letter-spacing: 0;
  text-align: center;
  line-height: 36px;
  width: 600px;
}

.content-desc {
  margin-top: 8px;
}

.result-button {
  margin-top: 48px;
  align-items: center;
  justify-content: center;
}

.btn-sub-text {
  font-family: PingFangSC-Medium;
  font-size: 28px;
  color: #00a4f2;
  letter-spacing: 0;
  text-align: center;
  line-height: 28px;
  margin-top: 32px;
}
</style>
<style scoped src="./colmo.css"></style>

<script>
import DofButton from '../dof-button'
import imgs from './imgs'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
const Types = {
  noNetwork: {
    pic: imgs['noNetwork'],
    content: '网络异常，请检查您的网络设置'
    // button: '刷新'
  },
  noUpdate: {
    pic: imgs['noUpdate'],
    content: '当前版本较低',
    desc: '请更新到最新版APP'
  },
  noPage: {
    pic: imgs['noPage'],
    content: '找不到页面'
  },
  colmo: {
    pic: imgs['colmo']
  }
}
export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: {
    DofButton
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    configuration: {
      type: Object,
      default: () => ({})
    },
    show: {
      type: Boolean,
      default: true
    },
    wrapStyle: Object,
    paddingTop: {
      type: [Number, String],
      default: '-80'
    },
    bgColor: {
      type: String,
      default: ''
    },
    imgStyle: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    type_() {
      if (this.type) return this.type
      return this._isColmo ? 'colmo' : 'noPage'
    },
    bgColor_() {
      if (this.bgColor) return this.bgColor
      return this._isColmo ? '#151617' : this._isDiablo ? '#101315' : '#ffffff'
    },
    resultType() {
      return {
        ...(Types[this.type_] ? Types[this.type_] : {}),
        ...this.configuration
      }
    },
    setPaddingTop() {
      const paddingTop = this.paddingTop
      return `${paddingTop}px`
    }
  },
  methods: {
    handleTouchEnd(e) {
      // web上面有点击穿透问题
      const { platform } = weex.config.env
      platform === 'Web' && e.preventDefault && e.preventDefault()
    },
    onClick() {
      this.$emit('dofResultButtonClicked', { ...this.configuration })
    },
    onSubClick() {
      this.$emit('dofResultSubButtonClicked', { ...this.configuration })
    }
  }
}
</script>
