<template>
  <div class="logo-wrap">
    <img class="logo-img" :src="logo" alt="" v-if="logo" @click="handleLogo">
    <Dropdown>
      <p class="logo-name">{{systemName}}
        <Icon type="md-arrow-dropdown" v-if="systemList.length" />
      </p>
      <DropdownMenu slot="list" v-if="systemList.length" trigger="click">
        <DropdownItem v-for="(item, index) in systemList" :key="index">
          <div class="dropdown-item"  @click="enterSystem(item)">
            <!-- <img class="other-system-logo" :src="`${imgBaseUrl}${item.fileId}`" alt=""> -->
            <div class="other-system-name">{{item.sysName}}</div>
          </div>
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import business from '../../apis/business'
import login from '../../apis/login'

export default {
  name: 'VNavDropdown',
  props: {
    logo: String,
    systemName: String
  },
  data () {
    return {
      systemList: [],
      loading: false
    }
  },
  created () {
    this.getBusinessList()
  },
  methods: {
    async getBusinessList () {
      let res = await business.getBusinessList()
      this.systemList = res.data
    },
    async enterSystem (item) {
      if (this.loading) return false
      try {
        this.loading = true
        let res = await login.access(item.sysId)
        window.location.replace(res.data.accessUrl)
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },
    handleLogo () {
      this.$emit('handle-logo')
    }
  }
}
</script>