<template>
  <view>
    <!-- 级/段/越段考试缴费单 -->
    <view class="appList">
      <view class="vipData mb30" v-show="totalCost>0">
        <view>费用合计：<text>{{ totalCost.toFixed(2) }}元</text></view>
      </view>
      <view class="appItem" v-for="(item,index) in list" :key="index">
        <view class="status" @click="goDetail(item)">
          <text v-if="item.verityStatus==0" class="text-primary">审核中</text>
          <text v-if="item.verityStatus==1" class="text-success"> 审核通过</text>
          <text v-if="item.verityStatus==2" class="text-danger"> 审核拒绝</text>
          <text v-if="item.verityStatus==3" class="text-warning">已撤回</text>
        </view>
        <view class="date" @click="goDetail(item)" v-if="item.submitTime">
          <uni-icons type="calendar-filled" size="16" color="#AD181F"></uni-icons>
          <text>{{item.submitTime}} 创建</text>
        </view>
		<view class="text-primary" v-if="item.payCode">{{item.payCode}}</view>
        <view class="name mt0" @click="goDetail(item)">{{item.name}}</view>

        <view class="flexbox" @click="goDetail(item)">
          <view>
            缴费状态
            <view>
              <text :class="{
                'text-success':item.payStatusStr=='已上传',
                'text-danger':item.payStatusStr=='未上传',
                'text-warning':item.payStatusStr=='已结算'
              }">{{item.payStatusStr}}</text>
            </view>
          </view>
          <view>
            人数合计
            <view>{{item.totalNum}}</view>
          </view>
          <view>
            费用合计
            <view>¥{{item.totalAmount}}</view>
          </view>
        </view>
        <view class="func">
          <button v-if="item.payStatus!='3'&&item.verityStatus!='2'&&item.verityStatus!='3'"
                  @click="handleUpdate(item)">上传凭证</button>
        </view>
      </view>
    </view>
    <view class="nodata" v-if="list.length==0">
      <image mode="aspectFit" src="/static/nodata.png"></image>
      <text>暂无数据</text>
    </view>

    <!-- 上传凭证 -->
    <uni-popup ref="UpPop" type="bottom" background-color="#fff" animation>
      <view class="popBody">
        <uni-forms v-model="form">
          <uni-forms-item label="缴费日期" required>
            <uni-datetime-picker v-model="form.payTime"></uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item label="缴费凭证" required>

            <uni-file-picker v-model="selectFileValue" limit="1" file-mediatype="all"
                             file-extname="png,jpg,jpeg,pdf,zip" @select="selectFile" @progress="fileProgress"
                             @delete="delSupplementFile(index)"></uni-file-picker>
          </uni-forms-item>
          <uni-forms-item label="备注">
            <uni-easyinput v-model="form.remark" type="textarea"></uni-easyinput>
          </uni-forms-item>
        </uni-forms>

        <button class="btn-red" @click="uploadSure">确定</button>
      </view>
    </uni-popup>
  </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
} from '@dcloudio/uni-app'
const app = getApp();
const list = ref([])
const queryParams = ref({
  type: '1'
})
const totalCost = ref(0)
const deptType = ref('')
const UpPop = ref(null)
const selectFileValue = ref({})
const form = ref({
  docId: '',
  payTime: '',
  payCert: '',
  remark: ''
})
onLoad((option) => {
  queryParams.value.type = option.type
  console.log(option.type)
  if (option.type == 2) {
    uni.setNavigationBarTitle({
      title: '段位考试缴费单'
    })
  }
  if (option.type == 3) {
    uni.setNavigationBarTitle({
      title: '越段考试缴费单'
    })
  }
  if (app.globalData.isLogin) {
    init()
  } else {

    app.firstLoadCallback = () => {
      init()
    };
  }
})

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

function getList() {
  uni.showLoading({
    title: '加载中'
  })
  totalCost.value = 0
  api.paymentList(queryParams.value).then(res => {
    list.value = res.rows
    uni.hideLoading()
    _.each(list.value, (info) => {
      totalCost.value += (info.totalAmount * 1)
    })
  })
}

function handleUpdate(item) {
  form.value.payId = item.payId
  if (item.payCert) {
    form.value.payCert = item.payCert
    selectFileValue.value = JSON.parse(item.payCert)[0]
  }
  if (item.payTime) {
    form.value.payTime = item.payTime
  }
  if (item.remarks) {
    form.value.remarks = item.remarks
  }
  UpPop.value.open()
}

function selectFile(e) {
  let file = e.tempFiles[0]
  if(!file){
    return
  }
  api.uploadFile(e).then(data => {
    selectFileValue.value = {
      url: data.msg,
      name: file.name,
      extname: file.extname
    }

    form.value.payCert = JSON.stringify([selectFileValue.value])
  });
}

function fileProgress(e) {
  console.log('progress:' + e)
}

function delSupplementFile(index) {
  selectFileValue.value = {}
}

function uploadSure() {
  console.log(form.value)
  if (!form.value.payTime) {
    uni.showToast({
      icon: `none`,
      title: '请选择缴费时间'
    })
    return
  }
  if (!form.value.payCert) {
    uni.showToast({
      icon: `none`,
      title: '请上传缴费凭证'
    })
    return
  }
  api.submitPayment(form.value).then(res => {
    UpPop.value.close()
    form.value = {}
    getList()
    uni.showToast({
      icon: 'none',
      title: '操作成功'
    })
  })
}

function goDetail(item) {
  //详情
  const form = encodeURIComponent(JSON.stringify(item))
  let path = `/pages/exam/paymentDetail?form=${form}&type=${queryParams.value.type}`
  uni.navigateTo({
    url: path
  });
}
</script>

<style scoped lang="scss">
	.popBody {
		font-size: 28rpx;
		line-height: 1.5;
		overflow: auto;
		padding: 30rpx;

		.btn-red {
			margin: 50rpx 0 30rpx;
		}
	}

	:deep(.file-picker__progress) {
		opacity: 0;
	}
</style>