<template>
  <el-dropdown class="system-letter" popper-class="custom-dropdown-popper custom-dropdown-message" trigger="click">
    <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>
        <div v-for="item in appList" :key="item.id" class="list-group-item" @click="goPage(item)" :style="{ cursor: !item.enable ? 'not-allowed' : 'pointer' }">
          <el-icon style="font-size: 38px"><svg-icon :icon-name="item.icon" /></el-icon>
          <span class="text-content">{{ item.name }}</span>
        </div>
        <empty v-if="appList.length === 0"></empty>
      </el-card>
    </template>
  </el-dropdown>
</template>
<script>
import { ref } from 'vue'
import { getTrxToken } from 'utils/auth'
import { getMessage } from '@/services/message'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const appName = ref('')
    const allAppList = ref([])
    const getAppList = async () => {
      const data = await getMessage({
        page: 1,
        rows: 5
      })
      if (data.success) {
        allAppList.value = [
          {
            name: 'a系统',
            id: 1,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'b系统',
            id: 2,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'c系统',
            id: 3,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'd系统',
            id: 4,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'e系统',
            id: 5,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'f系统',
            id: 6,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'g系统',
            id: 7,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'h系统',
            id: 8,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'i系统',
            id: 9,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: true
          },
          {
            name: 'j系统',
            id: 10,
            icon: 'svg-apps',
            url: 'https://www.baidu.com',
            enable: false
          }
        ]
      }
    }
    getAppList()
    const appList = computed(() => {
      if (!appName.value) return allAppList.value
      return allAppList.value.filter(item => item.name.includes(appName.value))
    })
    const goPage = item => {
      if (!item.enable) return
      const url = new URL(item.url)
      const trxToken = getTrxToken()
      if (!trxToken) return ElMessage.error('缺少trxToken, 请联系管理员')
      url.searchParams.append('SYS_AUTH_TOKEN', trxToken)
      window.open(url.toString(), '_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 {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #273478;
      margin-top: 11px;
      font-size: 14px;
    }
  }
}
</style>
<style>
.custom-dropdown-popper.custom-dropdown-message {
  margin-top: 10px !important;
  border: none;
}
</style>
