<template>
  <view class="audit-page">
    <!-- 提示信息 -->
    <!-- <view class="tips-box">
      <uni-icons type="info" size="18" color="#C4121B"></uni-icons>
      <text class="tips-text" v-if="type === 'batch'">批量审核 {{ ids.split(',').length }} 条记录</text>
      <text class="tips-text" v-else>单个审核</text>
    </view> -->

    <!-- 审核表单 -->
    <view class="form-section">
      <view class="section-header">
        <uni-icons type="edit" size="18" color="#AD181F"></uni-icons>
        <text class="section-title">审核信息</text>
      </view>

      <view class="form-card">
        <view class="form-item">
          <text class="form-label">审批结果</text>
          <view class="radio-group">
            <view
              class="radio-item"
              :class="{ selected: form.flag === '1' }"
              @click="form.flag = '1'"
            >
              <view class="radio-circle">
                <uni-icons v-if="form.flag === '1'" type="checkmark" size="10" color="#fff"></uni-icons>
              </view>
              <text>审批通过</text>
            </view>
            <view
              class="radio-item"
              :class="{ selected: form.flag === '0' }"
              @click="form.flag = '0'"
            >
              <view class="radio-circle">
                <uni-icons v-if="form.flag === '0'" type="checkmark" size="10" color="#fff"></uni-icons>
              </view>
              <text>审批拒绝</text>
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">备注</text>
          <textarea
            v-model="form.reason"
            class="textarea"
            placeholder="请输入备注信息（拒绝时必填）"
            :maxlength="500"
          />
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-wrap">
      <button class="btn-cancel" @click="goBack">取消</button>
      <button class="btn-submit" @click="doSubmit" :disabled="submitting">
        <text v-if="!submitting">确认提交</text>
        <text v-else>提交中...</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import * as api from '@/common/api_exam.js'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const type = ref('single') // single 或 batch
const ids = ref('')
const submitting = ref(false)

const form = ref({
  flag: '1',
  reason: ''
})

onLoad((options) => {
  if (options.type) {
    type.value = options.type
  }
  if (options.ids) {
    ids.value = options.ids
  }
})

function goBack() {
  uni.navigateBack()
}

function doSubmit() {
  if (form.value.flag === '0' && !form.value.reason) {
    uni.showToast({
      title: '请输入拒绝理由',
      icon: 'none'
    })
    return
  }

  if (submitting.value) return
  submitting.value = true

  const params = {
    ids: ids.value,
    flag: form.value.flag,
    reason: form.value.reason || ''
  }

  api.shenAudit(params).then(res => {
    uni.showToast({
      title: '操作成功',
      icon: 'success'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }).catch(err => {
    console.error('审核失败', err)
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    })
    submitting.value = false
  })
}
</script>

<style lang="scss" scoped>
.audit-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  // padding-bottom: 120rpx;
  box-sizing: border-box;
}

.tips-box {
  background-color: #e8f8f7;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;

  .tips-text {
    font-size: 26rpx;
    color: #C4121B;
  }
}

.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  .section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-left: 10rpx;
  }
}

.form-card {
  .form-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .form-label {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      font-weight: 500;
    }

    .radio-group {
      display: flex;
      gap: 40rpx;
    }

    .radio-item {
      display: flex;
      align-items: center;
      gap: 12rpx;
      font-size: 28rpx;
      color: #333;

      .radio-circle {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 2rpx solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &.selected {
        .radio-circle {
          background-color: #C4121B;
          border-color: #C4121B;
        }
      }
    }

    .textarea {
      width: 100%;
      height: 200rpx;
      border: 1rpx solid #eee;
      border-radius: 12rpx;
      padding: 20rpx;
      font-size: 28rpx;
      color: #333;
      background-color: #fafafa;
      box-sizing: border-box;
    }
  }
}

.submit-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30rpx;
  padding: 0 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);

  button {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    border-radius: 40rpx;
    border: none;
  }

  .btn-cancel {
    background-color: #f5f5f5;
    color: #666;
  }

  .btn-submit {
    background:  #C4121B;
    // background: linear-gradient(135deg, #C4121B, #15c5c1);
    color: #fff;

    &[disabled] {
      background: #ccc;
    }
  }
}
</style>