<!--
 * @Author: 曹捷
 * @Date: 2021-04-12 16:32:31
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-09 14:00:47
 * @Description: 全局应用中心 通过js 弹出
-->
<template>
  <a-modal class="obit-app obit-modal-default" v-if="open" :closable="close" :keyboard="close" :maskClosable="close"
    title="选择应用" v-model:visible="open" okText="确认" width="789px">
    <div class="modal-swap home-main">
      <a-card hoverable class="app-item iconfont" @click="entryApp = item.appId"
        :class="{'info-select':entryApp === item.appId}" v-for="item in appList" :key="item.appId">
        <div class="flex-l-r item-main">
          <!-- <img src="src/assets/images/logoTop.png" class="app-icon" alt=""> -->
          <i class="app-icon iconfont " :class="'icon-'+item.appIcon"></i>
          <div class="info">
            <p class="title">{{item.appName}}</p>
            <p class="desc one-line">{{item.appDesc}}&nbsp;</p>
          </div>
        </div>
      </a-card>
      <div class="app-item-bak" v-for="i in 3"></div>
    </div>
    <template #footer>
      <div class="flex-l-r">
        <a-checkbox v-model:checked="checked">下次登录时自动进入选中系统</a-checkbox>
        <a-button type="primary" @click="toHome">确 认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from 'vue'
// import { Modal, Button, Checkbox, Card, message } from 'ant-design-vue'
import { toHome } from '../../utils/auth'
import { } from 'vuex'
import { aesEncode, aesDecode } from './../../utils/secret'
export default {
  // components: { aModal: Modal, aButton: Button, aCheckbox: Checkbox, aCard: Card },
  props: {
    instance: {
      type: Object
    }
  },
  setup (props, context) {
    let instance = props.instance
    let _data = reactive({
      // 是否显示关闭
      showCheck: false,
      checked: true,
      // 不允许关闭
      close: false,
      open: false,
      appList: [],
      entryApp: ''
    })
    let _method = {
      init (options = {}) {
        /**
         *缓存自动登录状态  是否自动登录
         */
        let info = localStorage.getItem('lga')
        console.log('🚀 ~ file: obit-app.vue ~ line 65 ~ init ~ info', info, info === 'null')
        if (info && info !== 'null') {
          info = JSON.parse(aesDecode(info))
        }
        if (info && info.entryApp && info.mode === localStorage.getItem('obit-mode')) {
          _data.entryApp = info.entryApp
          _data.checked = info.checked
        }
        if (options.type === 'login') {
          if (info && info.checked && info.entryApp) {
            _method.initAppInfo(options, _method.toHome)
            return
          }
        }
        _method.initAppInfo(options)
      },
      initAppInfo (options, callback) {
        instance.$http.getUserAppList().then(res => {
          _data.appList = res
          if (res && res.length === 1) {
            _data.entryApp = res[0].appId
            _method.toHome()
          } else {
            Object.keys(options).forEach(element => {
              if (options[element] !== null) {
                _data[element] = options[element]
              }
            })
            callback && callback()
          }
        })
      },
      toHome () {
        if (!_data.entryApp) {
          message.error('请选择系统');
        }
        let info = aesEncode(JSON.stringify({ mode: localStorage.getItem('obit-mode'), checked: _data.checked, entryApp: _data.entryApp }))
        localStorage.setItem('lga', info)
        let item = _data.appList.find(ele => ele.appId === _data.entryApp)
        instance.$store.commit('user/setApp', item)
        // 业务系统直接获取菜单和权限
        // store.dispatch('permission/getUserPermission', http).then(() => {
        toHome(item.linkUrl)
      }
    }
    return {
      ...toRefs(_data),
      ..._method
    }
  },
}
</script>

<style lang="less">
.obit-app {
  .app-item {
    width: 218px;
    height: 98px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: all 0.3s;
    cursor: pointer;
    .info {
      flex: 1;
      overflow: hidden;
    }
    .ant-card-body {
      padding: 0;
    }
    .app-icon {
      width: 48px;
      height: 48px;
      border-radius: 48px;
      background: linear-gradient(228.69deg, #2f54eb 9.51%, #f0f5ff 139.21%);
      margin-right: 18px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
      position: relative;
    }
    .app-icon::before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .item-main {
      padding: 0 17px;
      align-items: center;
    }
    .info {
      .desc {
        color: rgba(0, 0, 0, 0.45);
        margin-bottom: 0;
        font-size: 14px;
      }
    }
  }
  .app-item-bak {
    width: 218px;
    height: 1px;
  }
  .home-main {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}
</style>