<template>
  <div
    :class="['catalog', avatarIcon ? 'icon-wrapper' : 'simple-mode', hasMargin && 'catalog-margin']"
    :style="{ backgroundColor: backgroundColor }"
  >
    <image v-if="avatarIcon" class="left-icon" :src="imagePath"></image>
    <text class="text" :style="textStyle">{{ title }}</text>
  </div>
</template>
<style src="./colmo.css" scoped></style>
<style scoped>
.catalog {
  flex-direction: row;
  align-items: center;
}
.catalog-margin {
  margin-bottom: 16px;
}
.simple-mode {
  height: 104px;
  padding-left: 32px;
}

.left-icon {
  width: 120px;
  height: 120px;
}
.text {
  font-family: PingFangSC-Medium;
  font-size: 28px;
  line-height: 30px;
  color: #8E969B;
  letter-spacing: 0;
  text-align: center;
}
</style>
<script>
import { STYLE_MAP } from './style'
import ColmoMixin from '../../mixins/colmo'
export default {
  mixins: [ColmoMixin],
  props: {
    title: {
      type: String,
      default: '目录'
    },
    backgroundColor: {
      type: String,
      default: '#f9f9f9'
    },
    textColor: {
      type: String,
      default: ''
    },
    avatarIcon: {
      type: String,
      default: ''
    },
    hasMargin: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    themeStyle() {
      const _theme = this._theme || 'default'
      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    textStyle() {
      let tmp = this.$theme.watchTheme({
        colmo: { color: this.textColor || '#1E2E37' }, // colmo模式 的 style
        default: { color: this.textColor || '#8E969B' }
      })
      return tmp
    },
    imagePath() {
      return this.avatarIcon
    }
  },
  methods: {
    _isHttpOrFile(path) {
      return path.indexOf('http') === 0 || path.indexOf('file') === 0
    },
    _getContext() {
      let url = weex.config.bundleUrl
      if (url.indexOf('?') > 0) {
        url = url.substring(0, url.indexOf('?'))
      }
      url = url
        .split('/')
        .slice(0, -2)
        .join('/')
      if (this._isHttpOrFile(url)) {
        return url
      } else {
        if (url.indexOf('/') === 0) {
          url = url.substring(url.indexOf('/') + 1)
        }
        url = `file:///android_asset${url === '' ? '' : '/'}${url}`
      }
      return url
    }
  }
}
</script>
