<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>
          <radio-group @change="onFlagChange">
            <view class="radio-group">
              <label class="radio-item" :class="{ selected: form.flag == '1' }">
                <radio value="1" :checked="form.flag == '1'" color="#C4121B" />
                <text>审批通过</text>
              </label>
              <label class="radio-item" :class="{ selected: form.flag == '0' }">
                <radio value="0" :checked="form.flag == '0'" color="#C4121B" />
                <text>审批拒绝</text>
              </label>
            </view>
          </radio-group>
        </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.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: ''
})

function onFlagChange(e) {
  form.value.flag = e.detail.value
}

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.auditJi(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: 24rpx;
    }

    .radio-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      font-size: 28rpx;
      color: #666;
      padding: 20rpx 0;
      border-radius: 12rpx;
      border: 2rpx solid #eee;
      background: #fafafa;

      &.selected {
        color: #C4121B;
        border-color: #C4121B;
        background: #fff5f5;
        font-weight: 500;
      }

      radio {
        transform: scale(0.8);
      }
    }

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