<template>
  <view>
    <view class="wBox">
      <view class="tt">考段基本信息</view>
      <view class="ddd">
        <text class="lab">考段名称：</text>{{ form.name }}
      </view>
      <view class="ddd">
        <text class="lab">申请日期：</text>{{form.applyTime?.slice(0,10)}}
      </view>
      <view class="ddd">
        <text class="lab">申请单位：</text>{{ form.memberName }}
      </view>
      <view class="ddd">
        <text class="lab">考官：</text>{{form.examinerNames?.split('，').join('/')}}
      </view>
      <view class="ddd">
        <text class="lab">考试开始时间：</text>{{form.startTime}}
      </view>
      <view class="ddd">
        <text class="lab">考试结束时间：</text>{{form.endTime}}
      </view>
      <view class="ddd">
        <text class="lab">考段地点：</text>{{form.address}}
      </view>
      <view class="ddd" v-if="userType=='2'||userType=='1'">
        <text class="lab">总金额：</text>
		<text class="text-danger">¥{{(form.totalAmount*1).toFixed(2) }}</text>
      </view>
    </view>
    <view class="wBox">
      <view class="tt">
        考生信息
      </view>
      <view class="vipData">
        <view>共 <text>{{ tablePersonInfo.total }}</text>人</view>
        <view v-for="l in tablePersonInfo.levelArr" :key="l.level">
          {{ szToHz(l.level) }}段: <text>{{ l.num }} </text>人
        </view>
      </view>
      <view class="userlist">
        <view class="item" v-for="n in list" :key="n.id" style="background-color: #fffafa;">
          <view class="w100">
            <view class="name">{{n.realName}} <text>{{n.memName}}</text></view>
            <!-- <view class="date">{{n.idcTypeStr}}：{{n.idcCode}}</view> -->
            <view class="flexbox">
              <view>
                原有段位
                <text v-if="!n.levelOld||n.levelOld==0">--</text>
                <text v-else>{{ szToHz(n.levelOld) }}段/品</text>
              </view>
              <view>
                考试段位
                <text v-if="n.levelNew">{{ szToHz(n.levelNew) }}段/品</text>
                <text v-else>--</text>
              </view>
              <view v-if="userType=='2'||userType=='1'">
                金额
                <text class="text-danger">
                  ¥{{ (n.examFee * 1).toFixed(2) }}
                </text>
              </view>
              <view>
                是否通过
                <text v-if="n.isPass=='1'" class="text-success">通过</text>
                <text v-else class="text-danger">未通过</text>
              </view>
            </view>
          </view>
		
        </view>
      </view>

    </view>
    <view class="wBox">
      <view class="tt">
        审核信息
      </view>
      <view>
        <view class="stepItem" v-for="(n,index) in recordList" :key="index">
          <view class="time">{{n.handleDate||'待审批'}}</view>
          <view class="content">
            <view class="status">
              <text :class="{
                'text-success':n.auditStatus=='1',
                'text-danger':n.auditStatus=='2',
                'text-warning':n.auditStatus=='3'
              }">{{ n.auditStatusStr }}</text>
            </view>
            <!-- <view class="name">第 {{index+1}} 步</view> -->
            <view class="deptName">{{n.deptName}}</view>
            <view v-if="n.reason">
              备注：{{n.reason||'' }}
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import * as api from '@/common/api.js'
import config from '@/config.js'
import _ from 'underscore'
import {
  onMounted,
  ref
} from 'vue'
import {
  onLoad,
  onShow
} from '@dcloudio/uni-app'
import {szToHz} from '@/common/utils.js'


const app = getApp();
const userType = ref('')
const form = ref({})
const tablePersonInfo = ref({})
const recordList = ref([])
const list = ref([])
let examId = ''
onLoad((option) => {
  examId = option.examId
})
onShow(() => {
  if (app.globalData.isLogin) {
    init()
  } else {
    app.firstLoadCallback = () => {
      init()
    };
  }
})

function init() {
  uni.showLoading({
    title: '加载中'
  })
  userType.value = app.globalData.userType
  getForm()
  getRecordList()
  getTablePersonInfo()
}

function getForm() {
  api.getLevelApplyInfo(examId).then(res => {
    uni.hideLoading()
    form.value = res.data
  })
}

function getRecordList() {
  api.getApprovalRecord(examId).then(res => {
    recordList.value = res.data.levelSteps
  })
}
function getTablePersonInfo() {
  api.getStudentList({        
    examId: examId
  }).then(res=>{
    list.value = res.rows
			
    const total = list.value.length
    const levelArr = []
    _.each(list.value, (d) => {
      const temp = _.find(levelArr, (l) => {
        return l.level == d.levelNew
      })
      if (temp) {
        temp.num++
      } else {
        levelArr.push({
          level: d.levelNew,
          num: 1
        })
      }
    })
			
    tablePersonInfo.value = {
      total: total,
      levelArr: _.sortBy(levelArr, (l) => {
        return l.level
      })
    }
  })
}

</script>

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

		.tt {
			color: #0A1629;margin: 0 0 30rpx;
			font-size: 30rpx;
		}
		
		.ddd{font-size: 28rpx;color: #333;    margin: 0 0 10rpx;
			.lab{color: #999;display: inline-block;text-align: justify;}
		}
	}

</style>