<template>
  <view class="wrap">
    <view class="grid">
      <button v-for="(a, i) in actions" :key="i" class="cell" type="default" @click="run(a)">
        {{ a.title }}
      </button>
    </view>
    <text class="status">{{ status }}</text>
  </view>
</template>

<script>
import { getMobileApi } from '@/utils/apiSingleton.js'

export default {
  data() {
    return {
      status: '',
      actions: [
        { title: '公告', fn: 'getNotice' },
        { title: '服务器时间', fn: 'getServerDate' },
        { title: '预设URL', fn: 'getPresetURL' },
        { title: 'Web地址', fn: 'getWebURL' },
        { title: '全局配置', fn: 'getGlobalInfo' },
        { title: '版本', fn: 'getVersion' },
        { title: '软件描述', fn: 'getSoftInfo' }
      ]
    }
  },
  methods: {
    async run(a) {
      const api = getMobileApi()
      const e = await api.ensureReady()
      if (e) {
        this.status = a.title + '：' + e.message
        return
      }
      try {
        const r = await api.client[a.fn]()
        const d = api.wrap(r, a.title + '失败')
        this.status = a.title + '：' + d.message
      } catch (err) {
        this.status = a.title + '：' + (err.message || err)
      }
    }
  }
}
</script>

<style scoped>
.wrap {
  padding: 24rpx;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.cell {
  width: calc(50% - 8rpx);
  font-size: 28rpx;
  background: #fff;
  border: 1px solid #e0e0e0;
}
.status {
  display: block;
  margin-top: 32rpx;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 26rpx;
  white-space: pre-wrap;
}
</style>
