<template>
  <view>
    <view class="wBox">
      <view class="tt">{{ form.memName }}</view>
      <view class="info" style="flex-wrap: wrap;">
        <view class="w45">共
          <text class="text-danger"> {{ form?.allCount }}</text>
          人
        </view>
        <view class="w45">新会员
          <text class="text-primary"> {{ form?.newCount }}</text>
          人
        </view>
        <view class="w45">续费合计
          <text class="text-primary"> {{ form?.oldCount }}</text>
          人
        </view>
        <view class="w45">费用合计
          <text class="text-danger">{{ form?.price }}</text>
          元
        </view>
      </view>
    </view>
    
    
    <view class="wBox">
      <!--      <view class="tt">{{ // form.paymentName  }}</view>-->
      <view class="info">
        <view>共
          <text>{{ list.length }}</text>
          人
        </view>
      </view>
      <view class="userlist">
        <view v-for="(n,index) in list" :key="index" class="item">
          <view>
            <view class="name">{{ n.perName }}
              <text v-if="n.memberInfoName">({{ n.memberInfoName || '' }})</text>
            </view>
            <view class="date">原有效期至 {{ n.originValidityDate ? n.originValidityDate.slice(0, 10) : '--' }}</view>
          </view>
          <view class="nian">
            {{ n.payYear }}年
          </view>
        </view>
      </view>
    </view>
    
    <view v-if="feelList.length>0" class="h3-padding">审核流程</view>
    <view v-if="feelList.length>0" class="wBox">
      <view v-for="(n,index) in feelList" :key="index" class="stepItem">
        <view class="time">{{ n.auditTime || '待审批' }}</view>
        <view class="content">
          <view class="status">
            <text v-if="n.auditResult==0" class="text-primary"> 审核中</text>
            <text v-if="n.auditResult==1" class="text-success">审核通过</text>
            <text v-if="n.auditResult==2" class="text-danger"> 审核拒绝</text>
            <text v-if="n.auditResult==3" class="text-warning"> 已撤回</text>
          </view>
          <view class="name">第 {{ index + 1 }} 步</view>
          <view class="deptName">{{ n.auditDeptName || n.auditBy }}</view>
          <view>备注：{{ n.auditMsg || '/' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

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

// 查询参数（和PC保持一致）
const queryParams = ref({
  rangeId: '',
  pageNum: 1,
  pageSize: 999
})

const form = ref({})
const list = ref([])
const feelList = ref([])

onLoad((option) => {
  if (option.form) {
    form.value = JSON.parse(decodeURIComponent(option.form))
    queryParams.value.rangeId = form.value.rangId || form.value.rangeId
    getList()
    getAuditLogs()
  }
  
  console.log(form.value)
})

async function getList() {
  try {
    const res = await api.listAPI(queryParams.value)
    list.value = res.rows || []
  } catch (e) {
    list.value = []
    console.error('获取成员失败', e)
  }
}

function getAuditLogs() {
  if (form.value.auditLogs) {
    try {
      feelList.value = JSON.parse(form.value.auditLogs)
    } catch (e) {
      feelList.value = []
    }
  }
}
</script>

<style lang="scss" scoped>
.wBox {
  width: 700rpx;
  padding: 30rpx;
  margin: 20rpx auto 0;
  background: #FFFFFF;
  box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
  border-radius: 15rpx;
  
  .tt {
    color: #0A1629;
    font-size: 30rpx;
  }
}

.userlist {
  .item {
    border-bottom: 1px dashed #e5e5e5;
    position: relative;
    padding: 20rpx 0;
    
    .date {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #999;
    }
    
    .name {
      font-size: 30rpx;
      
      text {
        margin-left: 1em;
        color: #4C5359;
        font-size: 26rpx;
      }
    }
    
    .nian {
      position: absolute;
      right: 0;
      top: 30rpx;
      font-size: 30rpx;
      color: #AD181F;
    }
  }
}

.info {
  display: flex;
  margin: 30rpx 0 20rpx;
  font-size: 28rpx;
  
  view {
    color: #7D8592;
    margin-right: 20rpx;
    
    text {
      color: #AD181F;
    }
  }
}

.h3-padding {
  padding: 20rpx 30rpx 0;
  font-size: 30rpx;
  font-weight: 500;
}

.stepItem {
  border-left: 2rpx solid #E60012;
  padding-left: 20rpx;
  position: relative;
  margin-bottom: 30rpx;
  
  &:before {
    content: '';
    width: 12rpx;
    height: 12rpx;
    background: #E60012;
    border-radius: 50%;
    position: absolute;
    left: -7rpx;
    top: 0;
  }
  
  .time {
    font-size: 24rpx;
    color: #999;
  }
  
  .content {
    margin-top: 10rpx;
    font-size: 28rpx;
    
    .status {
      margin-bottom: 8rpx;
    }
    
    .name {
      font-weight: 500;
    }
    
    .deptName {
      margin: 6rpx 0;
      color: #666;
    }
  }
}
</style>