<template>
  <view class="wrap">
    <view class="subtabs">
      <view
        class="t"
        :class="{ on: sub === 0 }"
        @click="sub = 0"
      >
        充值
      </view>
      <view
        class="t"
        :class="{ on: sub === 1 }"
        @click="sub = 1"
      >
        解绑
      </view>
      <view
        class="t"
        :class="{ on: sub === 2 }"
        @click="sub = 2"
      >
        反馈
      </view>
    </view>

    <view v-show="sub === 0" class="panel">
      <input v-model="pay.user" class="inp" placeholder="账号" />
      <input v-model="pay.userpwd" class="inp" password placeholder="账号密码（可选）" />
      <label class="chk">
        <switch :checked="pay.userset" @change="e => (pay.userset = e.detail.value)" />
        <text>使用账号密码验证</text>
      </label>
      <input v-model="pay.ka" class="inp" placeholder="充值卡号" />
      <input v-model="pay.pwd" class="inp" password placeholder="卡密码" />
      <button class="go" @click="doPay">提交充值</button>
    </view>

    <view v-show="sub === 1" class="panel">
      <input v-model="un.user" class="inp" placeholder="账号" />
      <input v-model="un.pwd" class="inp" password placeholder="密码" />
      <button class="go" @click="doUnbind">解绑</button>
    </view>

    <view v-show="sub === 2" class="panel">
      <input v-model="fb.user" class="inp" placeholder="账号" />
      <input v-model="fb.pwd" class="inp" password placeholder="密码" />
      <input v-model="fb.table" class="inp" placeholder="分类/表格" />
      <input v-model="fb.qq" class="inp" placeholder="QQ" />
      <input v-model="fb.leix" class="inp" placeholder="类型" />
      <textarea v-model="fb.text" class="area" placeholder="反馈内容" />
      <input v-model="fb.coode" class="inp" placeholder="图片验证码" />
      <button class="go" @click="doFb">提交反馈</button>
    </view>

    <button class="ghost" @click="goHome">返回首页</button>
    <text class="res">{{ result }}</text>
  </view>
</template>

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

export default {
  data() {
    return {
      sub: 0,
      pay: { user: '', userpwd: '', userset: false, ka: '', pwd: '' },
      un: { user: '', pwd: '' },
      fb: { user: '', pwd: '', table: '', qq: '', leix: '', text: '', coode: '' },
      result: ''
    }
  },
  methods: {
    goHome() {
      uni.switchTab({ url: '/pages/main/home' })
    },
    async doPay() {
      const api = getMobileApi()
      const e = await api.ensureReady()
      if (e) {
        this.result = String(e.message)
        return
      }
      try {
        const r = await api.client.pay(
          this.pay.user.trim(),
          this.pay.userpwd,
          this.pay.userset,
          this.pay.ka.trim(),
          this.pay.pwd
        )
        const d = api.wrap(r, '充值请求失败')
        this.result = 'code: ' + (d.code != null ? d.code : 'nil') + '\n' + d.message
      } catch (err) {
        this.result = String(err)
      }
    },
    async doUnbind() {
      const api = getMobileApi()
      const e = await api.ensureReady()
      if (e) {
        this.result = String(e.message)
        return
      }
      try {
        const r = await api.client.unbind(this.un.user.trim(), this.un.pwd)
        const d = api.wrap(r, '解绑请求失败')
        this.result = 'code: ' + (d.code != null ? d.code : 'nil') + '\n' + d.message
      } catch (err) {
        this.result = String(err)
      }
    },
    async doFb() {
      const api = getMobileApi()
      const e = await api.ensureReady()
      if (e) {
        this.result = String(e.message)
        return
      }
      try {
        const r = await api.client.feedback(
          this.fb.user.trim(),
          this.fb.pwd,
          this.fb.table.trim(),
          this.fb.qq.trim(),
          this.fb.leix.trim(),
          this.fb.text.trim(),
          this.fb.coode.trim()
        )
        const d = api.wrap(r, '反馈提交失败')
        this.result = 'code: ' + (d.code != null ? d.code : 'nil') + '\n' + d.message
      } catch (err) {
        this.result = String(err)
      }
    }
  }
}
</script>

<style scoped>
.wrap {
  padding: 24rpx;
}
.subtabs {
  display: flex;
  gap: 12rpx;
  margin-bottom: 20rpx;
}
.t {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  border-radius: 10rpx;
  background: #eee;
  font-size: 26rpx;
}
.t.on {
  background: var(--theme-primary);
  color: #fff;
}
.panel {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.inp {
  border: 1px solid #e0e0e0;
  border-radius: 10rpx;
  padding: 16rpx;
  margin-bottom: 14rpx;
  font-size: 28rpx;
}
.area {
  width: 100%;
  min-height: 160rpx;
  border: 1px solid #e0e0e0;
  border-radius: 10rpx;
  padding: 16rpx;
  margin-bottom: 14rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.chk {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 14rpx;
  font-size: 26rpx;
}
.go {
  background: var(--theme-primary);
  color: #fff;
  margin-top: 8rpx;
}
.ghost {
  margin-bottom: 20rpx;
  font-size: 26rpx;
}
.res {
  display: block;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 26rpx;
  white-space: pre-wrap;
}
</style>
