<template>
  <el-dropdown class="system-letter" popper-class="custom-dropdown-popper custom-dropdown-message">
    <span class="m-r-md">
      <el-icon class="message-icon cur-point"><svg-icon icon-name="svg-apps" class="cur-point" /></el-icon>
    </span>
    <template #dropdown>
      <el-card class="list-group">
        <template #header>
          <div class="card-header">
            <el-input v-model="appName" autocomplete="off" placeholder="搜索">
              <template #prefix>
                <el-icon>
                  <icon-ep-search />
                </el-icon>
              </template>
            </el-input>
          </div>
        </template>
        <el-scrollbar>
          <div v-for="item in appList" :key="item.id" class="list-group-item" @click="goPage(item)" :style="{ cursor: item.enable != 1 ? 'not-allowed' : 'pointer' }">
            <el-icon style="font-size: 38px"><svg-icon :icon-name="item.icon" /></el-icon>
            <span class="text-content" v-if="item.appName.length <= 6">{{ item.appName }}</span>
            <el-tooltip v-else effect="dark" :content="item.appName" placement="bottom">
              <span class="text-content">{{ item.appName }}</span>
            </el-tooltip>
          </div>
          <empty v-if="appList.length === 0"></empty>
        </el-scrollbar>
      </el-card>
    </template>
  </el-dropdown>
</template>
<script>
import { ref } from 'vue'
import { getTrxToken } from 'utils/auth'
import { getAppList } from '@/services'
import { ElMessage } from 'element-plus'
let iconIndex = 1
const getAppIcon = () => {
  if (iconIndex > 9) iconIndex = 1
  return `svg-app${iconIndex++}`
}
export default {
  setup() {
    const appName = ref('')
    const allAppList = ref([])
    const getAppsList = async () => {
      const data = await getAppList()
      if (data.success) {
        allAppList.value = data.data.map(item => {
          item.icon = getAppIcon()
          return item
        })
      }
    }
    getAppsList()
    const appList = computed(() => {
      if (!appName.value) return allAppList.value
      return allAppList.value.filter(item => item.appName.includes(appName.value))
    })
    const goPage = item => {
      if (item.enable != 1) return
      if (!item.appAddress) return ElMessage.error('缺少appAddress, 请联系管理员')
      const trxToken = getTrxToken()
      if (!trxToken) return ElMessage.error('缺少trxToken, 请联系管理员')
      let url = item.appAddress
      const searchParams = 'token=' + trxToken
      if (url.endsWith('?') || url.endsWith('&')) {
        url += searchParams
      } else if (url.indexOf('?') > -1) {
        if (url.endsWith('&')) {
          url += searchParams
        } else {
          url += '&' + searchParams
        }
      } else {
        url += '?' + searchParams
      }
      console.log('跳转应用时完整地址: ', url)
      window.open(url, '_blank')
    }

    return {
      appName,
      appList,
      goPage
    }
  }
}
</script>
<style lang="scss" scoped>
.system-letter {
  display: flex;
  align-items: center;
  .message-icon {
    font-size: 20px;
    color: #98a6ad;
  }
  :deep(.#{$namespace}-badge__content) {
    border: none;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-group {
  padding: 0 !important;
  width: 320px;
  margin: 0;

  .list-group-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    width: 33%;
    margin: 18px 0;
    .text-content {
      width: 100%;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #273478;
      margin-top: 11px;
      font-size: 14px;
      text-align: center;
    }
  }
}
::v-deep {
  .czhj-card__body {
    height: 70vh;
    position: relative;
  }
}
</style>
<style>
.custom-dropdown-popper.custom-dropdown-message {
  margin-top: 10px !important;
  border: none;
}
</style>
