<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup>
import App from './components/App.vue'
import { getAppByList } from '@/api/apps/appApi'

const state = reactive({
  title: '',
  dialogVisible: false,
  loading: false,
  dataList: {},
  actionType: 1,
})

const getData = async () => {
  state.loading = true
  const { data } = await getAppByList({})
  state.loading = false
  state.dataList = data
}

onMounted(() => {
  getData()
})

const appRef = ref()

const onAppEdit = (data: any) => {
  const appId = data.appId
  appRef.value.showEditModel(appId)
}

const onAppPermit = (data: any) => {

}
</script>

<template>
  <div>
    <page-header title="应用中心">
      <template #content>
        <div>
          便捷管理应用软件或应用服务
        </div>
      </template>
    </page-header>

    <el-row :gutter="20" style="margin: 0 10px;">
      <el-col v-for="(item, index) in state.dataList" :key="index" :lg="6" :md="8" :sm="12">
        <el-card shadow="hover" class="action-card">
          <div class="content">
            <div class="item">
              <img src="item.appLogo" style="width: 80%;">
            </div>
            <div class="item">
              <div class="name">
                {{ item.appTitle }}
              </div>
              <div class="intro">
                {{ item.appDesc }}
              </div>
            </div>
          </div>
          <div class="action-bar">
            <el-button text @click="onAppEdit(item)">
              编辑
            </el-button>
            <el-button text @click="onAppPermit(item)">
              权限配置
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <App ref="appRef" @success="getDataList" />
  </div>
</template>

<style lang="scss" scoped>
.action-card {
  margin-bottom: 20px;

  .content {
    display: flex;

    .item {
      margin-right: 15px;

      .name {
        margin-bottom: 12px;
        color: var(--el-text-color-primary);
        transition: var(--el-transition-color);
        font-size: 16px;
        line-height: 24px;
      }

      .intro {
        color: var(--el-text-color-secondary);
        transition: var(--el-transition-color);
        font-size: 14px;
        height: 66px;
        line-height: 22px;

        @include text-overflow(3);
      }
    }
  }

  .action-bar {
    display: flex;
    justify-content: space-around;
    margin: 20px -20px -20px;
    border-top: 1px solid var(--el-border-color-light);
    background-color: var(--el-fill-color-lighter);
    transition: background-color 0.3s, var(--el-transition-border);

    .el-button {
      position: relative;
      width: 100%;
      color: var(--el-text-color-placeholder);
      transition: var(--el-transition-color);

      &:hover {
        color: var(--el-color-primary);
      }

      & + .el-button {
        margin-left: 0;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 1px;
          height: 14px;
          margin-top: -7px;
          background-color: var(--el-border-color-darker);
          transition: background-color 0.3s;
        }
      }
    }
  }
}
</style>
