<template>
  <div :class="[wrapperClass, {'is-logo-collapsed': collapsed}]">
    <div v-tooltip.right="notSwitch ? '' : '切换服务'" :class="[wrapperClass + '-info']" @click="switchApp()">
      <img v-if="info.logo" :class="[wrapperClass + '-info-img']" :src="info.logo" />
      <span :class="[wrapperClass + '-info-name']">
        {{ info[keyName] }}
      </span>
      <i v-if="rightIcon && !notSwitch" :class="[wrapperClass + '-info-right-icon', rightIcon]"></i>
    </div>

    <div :class="[wrapperClass + '-switch']" :style="{left: show ? '0' : '-216px'}">
      <div :class="[wrapperClass + '-switch-hd']">
        <label><i v-if="rightIcon" :class="rightIcon"></i> 切换服务</label>
        <span @click="switchApp()">关闭</span>
      </div>
      <div v-for="item in list" :key="item[keyId]" class="switch-item" :class="[{'is-active': item[keyId] === value},{'switch-item-dsb': item.disabled}]" @click="selected(item)">
        <div class="switch-item-info">
          <img v-if="item.logo" :src="item.logo" />{{ item[keyName] }}
        </div>
        <div v-if="item.disabled" class="disabled-tips" @click.stop>
          您尚未购买该服务，若要购买请<a :href="item.help">查看详情</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { LIB_NAME } from '../../../../src/util'
const wrapperClass = `${LIB_NAME}-logo`

export default {
  name: 'xLogo',
  props: {

    // 切换icon
    rightIcon: {
      type: String,
      default: ''
    },

    // 是否收起
    collapsed: {
      type: Boolean,
      default: false
    },

    // 当前选中项目
    value: {
      type: [String, Number],
      default: 'uba'
    },

    // name显示的key
    keyName: {
      type: [String],
      default: 'name'
    },

    // 唯一Id显示的key
    keyId: {
      type: [String],
      default: 'code'
    },

    // 列表
    options: {
      type: [Array, Object],
      default: () => []
    },

    // 不能切换项目
    notSwitch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      wrapperClass,
      show: false
    }
  },
  computed: {
    list() {
      const options = this.options; const index = options.findIndex(o => o[this.keyId] === this.value)
      if (options && index > 0) {
        options.unshift(options.splice(index, 1)[0])
        return options
      }
      return options
    },
    info() {
      const find = this.options.find(o => o[this.keyId] === this.value)
      return find || this.options[0]
    }
  },
  methods: {

    // 切换
    switchApp() {
      if (!this.notSwitch) {
        this.show = !this.show
      }
    },

    // 选择
    selected(item) {
      if (!item.disabled) {
        this.$emit('on-switch', item)
      }
    }
  }
}
</script>
