<template>
  <clinic-page-layout title="编辑账户" :show-back="true">
    <view class="form-container">

      <view class="form-panel">
        <view class="form-row" v-for="f in fields" :key="f.key">
          <text class="row-label">{{ f.label }}</text>
          <input
              class="row-input"
              v-model="form[f.key]"
              :placeholder="'请输入' + f.label"
              placeholder-style="color:#C9CDD4"
          />
        </view>
      </view>

      <view class="action-footer">
        <button class="btn-submit" @click="save" :loading="loading">保存修改</button>
      </view>

    </view>
  </clinic-page-layout>
</template>

<script>
import ClinicPageLayout from '@/subPackages/sub_clinic_admin/components/clinic-page-layout.vue'
import { getClinicAdminCard, saveClinicAdminCard } from '@/api/clinicAdmin.js'

export default {
  components: { ClinicPageLayout },
  data() {
    return {
      loading: false,
      form: {
        bank_user_name: '',
        bank_card: '',
        bank_name: '',
        bank_no: '',
        bank_account_type: '1',
      },
      fields: [
        { key: 'bank_user_name', label: '户名' },
        { key: 'bank_card', label: '银行卡号' },
        { key: 'bank_name', label: '开户行' },
        { key: 'bank_no', label: '行号' },
      ],
    }
  },
  onLoad() {
    getClinicAdminCard().then(w => {
      if (!w.ok || !w.data) return
      const d = w.data
      this.form.bank_user_name = d.bank_user_name || ''
      this.form.bank_card = d.bank_card || ''
      this.form.bank_name = d.bank_name || ''
      this.form.bank_no = d.bank_no || ''
      this.form.bank_account_type = String(d.bank_account_type || 1)
    })
  },
  methods: {
    save() {
      this.loading = true
      saveClinicAdminCard(this.form).then(w => {
        if (w.ok) {
          uni.showToast({ title: '保存成功' })
          setTimeout(() => uni.navigateBack(), 800)
        } else {
          uni.showToast({ title: (w.res && w.res.message) || '保存失败', icon: 'none' })
        }
      }).finally(() => { this.loading = false })
    },
  },
}
</script>

<style lang="scss" scoped>
$theme-primary: #6acdbb;
$color-bg-base: #F5F7F8;
$color-text-main: #1D2129;
$color-text-muted: #4E5969;

.form-container {
  background-color: $color-bg-base;
  min-height: 100vh;
  padding: 24rpx;
}

.form-panel {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 0 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36rpx 0;
  border-bottom: 1rpx solid #F2F3F5;

  &:last-child {
    border-bottom: none;
  }
}

.row-label {
  font-size: 28rpx;
  color: $color-text-main;
  font-weight: 500;
  min-width: 140rpx;
}

.row-input {
  flex: 1;
  text-align: right; /* 右对齐显得极其整洁 */
  font-size: 28rpx;
  color: $color-text-main;
}

.action-footer {
  margin-top: 60rpx;
}

.btn-submit {
  background: $theme-primary;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  border: none;

  &::after {
    display: none;
  }

  &:active {
    opacity: 0.9;
  }
}
</style>