<template>
  <div class="dof-side-nav" :style="sideNavStyle">
    <scroller>
      <div class="list-box">
        <div
          class="item-box"
          v-for="(item, index) in items"
          :key="index"
          @click="dofItemClick(item, index)"
          :style="defaultItemStyle"
        >
          <text class="item-text" :style="activeIndex == index ? activeTextStyle : defaultTextStyle">{{ item }}</text>
          <div class="active-box" :style="activeBoxStyle" v-if="activeIndex == index">
            <div class="line-box" :style="activeLineStyle"></div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>
<style>
.item-box {
  position: relative;
}

.item-text {
  text-align: center;
}

.active-box {
  width: 18px;
  padding-left: 12px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-box {
  width: 6px;
  border-radius: 4px;
}
</style>
<style src="./colmo.css"></style>

<script>
import { STYLE_MAP } from './style'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
export default {
  mixins: [ColmoMixin, DiabloMixin],
  props: {
    width: {
      type: [Number, String],
      default: 100
    },
    height: {
      type: [Number, String],
      default: 600
    },
    items: {
      type: Array,
      default: () => []
    },
    activeFontSize: {
      type: Number,
      default: 28
    },
    activeTextColor: {
      type: String,
      default: ''
    },
    activeBlockColor: {
      type: String,
      default: ''
    },
    defaultStyle: {
      type: Object,
      default: () => ({
        width: 200,
        height: 96,
        fontSize: 28
      })
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    backgroundColor: {
      type: String,
      default: ''
    }
  },

  data() {
    return {}
  },
  computed: {
    themeStyle() {
      const _theme = this._theme || (this._isDiablo ? 'diablo' : 'default')
      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    defaultItemStyle() {
      let { width, height } = this.defaultStyle
      let eleSty = {
        width: `${width}px`,
        height: `${height}px`
      }
      return eleSty
    },
    defaultTextStyle() {
      let { height, fontSize, color } = this.defaultStyle
      if (!color) color = this.themeStyle.textColor
      let eleSty = {
        fontSize: `${fontSize}px`,
        color,
        lineHeight: `${height}px`
      }
      return eleSty
    },
    activeTextStyle() {
      let { height } = this.defaultStyle
      let fontSize = this.activeFontSize
      let color = this.activeTextColor ? this.activeTextColor : this.themeStyle.activeTextColor
      let eleSty = {
        fontSize: `${fontSize}px`,
        color,
        lineHeight: `${height}px`,
        fontWeight: 'bold',
        backgroundColor: this.themeStyle.activeBackgroundColor
      }
      if (this._isColmo) eleSty.fontWeight = 'normal'
      return eleSty
    },
    sideNavStyle() {
      let { width } = this.defaultStyle
      let { height, backgroundColor } = this
      if (!backgroundColor) backgroundColor = this.themeStyle.backgroundColor
      let eleSty = {
        width: `${width}px`,
        height: `${height}px`,
        backgroundColor
      }
      return eleSty
    },
    activeBoxStyle() {
      let { height } = this.defaultStyle
      let eleSty = {
        height: `${height}px`
      }
      return eleSty
    },
    activeLineStyle() {
      let { height } = this.defaultStyle
      let { activeBlockColor } = this
      if (!activeBlockColor) activeBlockColor = this.themeStyle.activeBlockColor
      let eleSty = {
        backgroundColor: activeBlockColor,
        height: '24px'
      }
      if (this._isColmo) eleSty.height = height + 'px'
      return eleSty
    }
  },
  methods: {
    dofItemClick(item, index) {
      this.activeIndex = index
      this.$emit('dofItemClick', { item, index })
    }
  }
}
</script>
