<template>
  <view class="hasfixedbottom">
    <view class="wBox">
      <view class="tt">{{ form?.certName }}</view>
      <view>
        <view v-if="form.commitTime" class="date">提交日期：
          <text>{{ form?.commitTime }}</text>
        </view>
        <view class="date">提交单位：
          <text>{{ form?.memName }}</text>
        </view>
      </view>
      <view class="vipData mt30" style="flex-wrap: wrap;padding: 20rpx;">
        <view class="w50">
          年限合计：
          <text>{{ form?.renewYear }}个</text>
        </view>
        <view class="w50">
          费用合计：
          <text>{{ form?.allPrice }}个</text>
        </view>
        <view class="w50">
          政策优惠：
          <text>{{ form?.discount }}年</text>
        </view>
        <view class="w50">
          付款费用：
          <text>{{ (form?.finalPrice * 1).toFixed(2) }}元</text>
        </view>
      </view>
      
      <!-- 成员 -->
      <view class="userlist">
        <view v-for="(n,index) in list" :key="index" class="item" style="padding: 20rpx 0 0;" @click="goGroupInfo(n)">
          <view style="width: 100%">
            <view class="name  text-primary underLine">{{ n.memberName }}</view>
            <!--            <view class="date">单位类型:-->
            <!--              <text v-if="n.deptType==2">一级协会</text>-->
            <!--              <text v-if="n.deptType==3">直属协会</text>-->
            <!--              <text v-if="n.deptType==4">二级协会</text>-->
            <!--              <text v-if="n.deptType==5">三级协会</text>-->
            <!--              <text v-if="n.deptType==6">职业性单位会员</text>-->
            <!--            </view>-->
            <view class="flexbox" style="background-color: rgba(244, 249, 253, 1);padding:10rpx;">
              <view>
                <view>
                  原有效期
                  <text>{{ n.originValidityTime?.slice(0, 10) || '-' }}</text>
                </view>
                <view>
                  提交日期
                  <text>{{ n.commitTime?.slice(0, 10) || '-' }}</text>
                </view>
              </view>
              <view>
                年限
                <text>{{ n.renewYear }}</text>
              </view>
              <view>
                费用
                <text>¥{{ n.unitPrice }}</text>
                <view>总价
                  <text>¥{{ n.finalPrice }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    
    </view>
    
    <view class="h3-padding">审核记录</view>
    <view class="wBox">
      <view v-for="(n,index) in auditList" :key="index" class="stepItem">
        <view class="time">{{ form.auditTime || '待审批' }}</view>
        <view class="content">
          <view class="status">
             <text v-if="n.auditResult==1" class="text-success">审核通过</text>
              <text v-else-if="n.auditResult==0" class="text-danger">审核拒绝</text>
                <text v-else class="text-primary">审核中</text>
          </view>
          <view class="name">{{ n.auditDeptName }}</view>
          <!--          <view class="name">第 {{ index + 1 }} 步</view>-->
          <view class="deptName">{{ n.index }}</view>
          <view v-if="n.auditMsg">
            备注：{{ n.auditMsg || '/' }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const app = getApp();
const queryParams = ref({
  recordId: ''
})

const form = ref({})
const list = ref([])
const listArr = ref([])
const id = ref()
const auditList = ref([])

const feelList = ref([])
const total = ref(0)
const totalYear = ref(0)
const deptType = ref()
let rangeId = ''
onLoad((option) => {
  if ('form' in option) {
    form.value = JSON.parse(decodeURIComponent(option.form))
    list.value = [form.value]
    GetLogs()
    
  }
  
  console.log(form.value)
  //
  // list.value = form.content?.certifiedSimpleList || []
  // listArr.value = form.content?.certifiedSimpleList || []
  // queryParams.value.recordId = form.value.recordId
  // console.log(form.value)
  // if (app.globalData.isLogin) {
  //   init()
  // } else {
  //
  //   app.firstLoadCallback = () => {
  //     init()
  //   };
  // }
  
})

async function GetLogs() {
  const res = await api.GroupGetLogs(form.value.id)
  auditList.value = res.data
}

function init() {
  deptType.value = app.globalData.deptType
  getForm()
}

function getForm() {
  uni.showLoading({
    title: '加载中'
  })
  api.getDetailList(queryParams.value).then(res => {
    uni.hideLoading()
    list.value = res.rows
    list.value[0].rangeId == 0 ? id.value = list.value[0].certId : id.value = list.value[0].rangeId
    if (id.value) {
      auditFN()
    }
  })
}

function auditFN() {
  api.getGroupHistoryByRelateId(id.value).then(res => {
    auditList.value = res.data
  })
}

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

function doApproval(rangeId, flag, reason) {
  var obj = {
    flag: flag,
    reason: reason || '',
    rangeIds: rangeIds
  }
  console.log(obj)
  uni.showLoading({
    title: '加载中'
  })
  api.mobilizeAudit(obj).then((res) => {
    uni.hideLoading()
    uni.showToast({
      title: '操作成功',
      icon: 'none'
    })
    uni.navigateBack()
  })
}

function goGroupInfo(row) {
  uni.navigateTo({
    url: `/group/groupInfo?memId=${row.memId}`
  })
}
</script>

<style lang="scss" scoped>
.date {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #999;
}

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