<template>
  <view class="hasfixedbottom">
    <view class="wBox">
      <view class="tt">{{form.content?.name}}</view>
      <view class="info" style="flex-wrap: wrap;">
        <view class="w45">共 <text class="text-danger"> {{ form.content?.personCount }} </text> 人</view>
        <view class="w45">新会员 <text class="text-primary"> {{form.content?.newPersonCount }} </text> 人</view>
        <view class="w45">续费合计 <text class="text-primary"> {{form.content?.oldPersonCount }} </text> 人</view>
        <view class="w45" v-if="(userType=='2'||userType=='1')&&form.content.allFee ">费用合计
          <text class="text-danger">{{ form.content?.allFee }} </text> 元
        </view>
      </view>

      <!-- 成员 -->
      <view class="userlist">
        <view class="item" v-for="(n,index) in list" :key="index" @click="handleInfo(n)">
          <view class="w100">
            <view class="name">{{n.personName}}<text>({{n.memberInfoName}})</text></view>
            <view class="date">原有效期至 {{n.originValidityDate?.slice(0,10)||'--'}}</view>

            <view class="flexbox" v-if="userType=='2'||userType=='1'">
              <view>
                单价
                <text>¥{{n.unitPrice}}</text>
              </view>
              <view>
                年限
                <text>{{n.payYear}} 年</text>
              </view>
              <view>
                总价
                <text class="text-danger">¥{{n.allPrice}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="goMore" v-if="total>6" @click="goMoreList">查看全部
          <uni-icons type="forward" size="16"></uni-icons>
        </view>
      </view>

    </view>

    <view class="h3-padding">审核流程</view>
    <view class="wBox">
      <view class="stepItem" v-for="(n,index) in feelList" :key="index">
        <view class="time">{{n.handleDate||'待审批'}}</view>
        <view class="content">
          <view class="status">
            <text v-if="n.auditStatus==1" class="text-success">审核通过</text>
            <text v-if="n.auditStatus==2" class="text-danger"> 审核拒绝</text>
            <text v-if="n.auditStatus==0||n.auditStatus==100" class="text-primary"> 审核中</text>
            <text v-if="n.auditStatus==3" class="text-warning"> 已撤回</text>
          </view>
          <!-- <view class="name">第 {{index+1}} 步</view> -->
          <view class="deptName">{{n.handlerDeptName||n.auditBy}}</view>
          <view v-if="n.auditStatus==2">
            备注：{{n.reason||'/' }}
          </view>
        </view>
      </view>
    </view>

    <view class="fixedBottom" v-if="form.auditStatus == 0">
      <button class="btn-red-kx" @click="audit(form.recordId,'0')">拒绝</button>
      <button class="btn-red" @click="audit(form.recordId,'1')">同意</button>
    </view>

  </view>
</template>

<script setup>
import * as api from '@/common/api.js'
import config from '@/config.js'
import {
  onMounted,
  ref
} from 'vue'
import {
  onLoad
} from '@dcloudio/uni-app'
const app = getApp();
const queryParams = ref({
  pageNum: 1,
  pageSize: 6
  // mergeFlag: 0,
  // auditStatus: ''
})
const wfId = ref('')
const form = ref([])
const list = ref([])
const id = ref('')
const feelList = ref([])
const total = ref(0)
const totalYear = ref(0)
const userType = ref('')
const statistical = ref({})
onLoad((option) => {
  console.log(option)
  if (app.globalData.isLogin) {
    init(option)
  } else {
    app.firstLoadCallback = () => {
      init(option)
    };
  }

})

function init(option) {
  // wfId.value = option.wfId
  // queryParams.value.auditStatus = option.auditStatus
  if ('form' in option) {
    form.value = JSON.parse(decodeURIComponent(option.form))
    queryParams.value.recordId = form.value.recordId
  }
  console.log(form.value)
  userType.value = app.globalData.userType
  getForm()
}

function getForm() {
  uni.showLoading({
    title: '加载中'
  })
  // console.log(userType.value)

  api.getDetailPersonList(queryParams.value).then(res => {
    uni.hideLoading()
    list.value = res.rows
    total.value = res.total
    getFillList(list.value[0]?.rangeId)
  })

}
// 审核记录
function getFillList(id) {
  if (id)
    api.getHistoryByRelateId(id).then(res => {
      feelList.value = res.data
      uni.hideLoading()
    })
}

function audit(recordId, flag) {
  if (flag == '0') {
    // 拒绝
    // 弹出框填写理由
    uni.showModal({
      title: '请输入拒绝理由',
      editable: true,
      success: function(res) {
        if (res.confirm) {
          if (!res.content) {
            uni.showToast({
              title: '请输入拒绝理由',
              icon: 'none'
            })
          } else {
            doApproval(recordId, flag, res.content)
          }
        }
      }
    })
  } else if (flag == '1') {
    // 二次确认
    uni.showModal({
      title: '提示',
      content: `确定审批通过吗`,
      success: function(res) {
        if (res.confirm) {
          doApproval(recordId, flag)
        }
      }
    })
  }
}

function doApproval(recordId, flag, reason) {
  var obj = {
    flag: flag,
    reason: reason || '',
    recordIds: []
  }
  obj.recordIds.push(recordId)
  console.log(obj)
  uni.showLoading({
  	title: '加载中',
	mask: true
  })
  api.audit(obj).then((res) => {
	  uni.hideLoading()
    uni.showToast({
      title: '操作成功',
      icon: 'none'
    })
    uni.navigateBack()
  })
}

function changeList() {

}

function goMoreList() {
  let path = `/personalVip/payPersonList?recordId=${queryParams.value.recordId}`
  uni.navigateTo({
    url: path
  });
}

function handleInfo(n) {
  uni.navigateTo({
    url: `/personalVip/detail?perId=${n.perId}`
  })
}
</script>

<style scoped lang="scss">
	.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;

			.date {
				margin-top: 10rpx;
			}

			.name {
				text {
					margin-left: 1em;
					color: #4C5359;
					font-size: 26rpx;
				}
			}

			.nian {
				position: absolute;
				right: 0;
				font-size: 30rpx;
				color: #AD181F;
			}
		}
	}

	.info {
		display: flex;
		margin: 30rpx 0 20rpx;
		font-size: 28rpx;

		view {
			color: #7D8592;
			margin-right: 20rpx;
		}
	}

	.fixedBottom {
		justify-content: center;

		button {
			margin: 0 20rpx;
			width: 286rpx;
		}

		.btn-red {
			width: 286rpx;
		}
	}
</style>