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

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import App from './components/App.vue'
import { getAppByList, updateApp } from '@/api/apps/appApi'
const tabbar = useTabbar()

interface TABLE_ITEM {
  appTitle: string
  appDesc: string
  appLogo: string
}

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

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

const getDataList = () => {}
const appRef = ref()

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

const onAppPermit = (data: any) => {
  const appId = data.appId
  tabbar.open({
    name: 'appPermit',
    params: {
      appId,
    },
  })
}

const onAppPublish = () => {
  tabbar.open({
    name: 'appPublish',
    params: { },
  })
}

const onAppRemove = (data: any) => {
  ElMessageBox.confirm(`确认下架「${data.appTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await updateApp({ appId: data.appId, ifStore: 0 })
    ElMessage.success(msg)
    await getData()
  }).catch(() => {})
}

onMounted(() => {
  getData()
})
</script>

<template>
  <div>
    <page-header title="应用商店">
      <template #content>
        <div>
          便捷管理发布的应用软件或应用服务
        </div>
      </template>

      <el-button-group>
        <el-button type="primary" size="large" @click="onAppPublish">
          <template #icon>
            <el-icon>
              <svg-icon name="ep:plus" />
            </el-icon>
          </template>
          发布应用
        </el-button>
      </el-button-group>
    </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 app_logo-wrap">
              <img :src="item.appLogo" class="app_logo" alt="">
            </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>
            <el-button text @click="onAppRemove(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: 44px;
        line-height: 22px;

        @include text-overflow(2);
      }
      &.app_logo-wrap{
        &{
          width: 80px;
          height: 80px;
          box-shadow:1px 1px 4px rgba(0,0,0,0.6);
          border: 1px solid #eaeaea;
          border-radius: 1em;
          display: flex;
          justify-content: center;
          align-items: center;
        }
          .app_logo{
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }

    }
  }

  .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>
