<template>
  <view>
    <!-- 查看缴费单+上传凭证 -->
    <!-- 缴费审核 -->
    <view class="appList">
      <view class="appItem" v-for="(item,index) in list" :key="index">
        <view class="status" @click="goDetail(item)">
          <text v-if="item.record.auditStatus==0" class="text-primary">审核中</text>
          <text v-if="item.record.auditStatus==1" class="text-success"> 审核通过</text>
          <text v-if="item.record.auditStatus==2" class="text-danger"> 审核拒绝</text>
          <text v-if="item.record.auditStatus==3" class="text-warning">已撤回</text>
        </view>
        <view class="date" @click="goDetail(item)">
          <uni-icons type="calendar-filled" size="16" color="#AD181F"></uni-icons>
          <text v-if="item.payTime">{{item.payTime}} 缴费</text>
          <text v-else>{{item.payNoticeSendTime}} 下发</text>
        </view>
        <view class="text-primary" @click="goDetail(item)">{{item.wfCode}}</view>
        <view class="name mt0" @click="goDetail(item)">{{item.finalDocName}}</view>
        <view class="flexbox" @click="goDetail(item)">
          <view>
            缴费状态
            <view>
				<text v-if="item.settleFlag == 0" class="text-success">已结算</text>
				<text v-if="item.settleFlag == 1" class="text-danger">未结算</text>
<!--				<text v-if="item.settleFlag == 1 && item.payFlag == 0" class="text-success">已上传</text>-->
<!--				<text v-if="item.settleFlag == 1 && item.payFlag == 1" class="text-danger">未上传</text>-->
			</view>
          </view>
		  <view>
		    人数合计
		    <view>{{item.personCount}}</view>
		  </view>
		  <view>
		    年限合计
		    <view>{{item.yearCount}}</view>
		  </view>
		  <view>
		    费用合计
		    <view>¥{{item.allPrice}}</view>
		  </view>

        </view>
        <view class="func">
          <button v-if="item.settleFlag == 0" :disabled="!(item.payFlag == 0)"
            @click="downloadOrder(item)">下载凭证</button>
          <button
            v-if="(deptType == 2 || deptType == 3) && item.settleFlag != 0"
            :disabled="item?.record?.auditStatus == 2 || item?.record?.auditStatus == 3||item.yjFlag==1"
            @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 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 {
  onMounted,
  ref
} from 'vue'
import {
  onShow
} from '@dcloudio/uni-app'
const app = getApp();
const list = ref([])
const deptType = ref('')
const UpPop = ref(null)
const form = ref({
  docId:'',
  payTime:'',
  url:'',
  remark:''
})
onShow(() => {
  if (app.globalData.isLogin) {
    init()
  } else {
    app.firstLoadCallback = () => {
      init()
    };
  }
})

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

function getList() {
  api.getFeeBillList().then(res => {
    list.value = res.rows
  })
}

function handleUpdate(item) {
  form.value.docId = item.docId
  UpPop.value.open()
}
function downloadOrder(item) {
  //下载凭证
  var arr = JSON.parse(item.payEvidence) || []
  showImg(arr[0]?.url)
}
function showImg(url) {
  var str = config.baseUrl_api + url
  if (url.indexOf('png') > -1 || url.indexOf('jpg') > -1 || url.indexOf('jpeg') > -1) {
    uni.previewImage({
      urls: [str],
      success: function(res) {
        console.log('success', res)
      },
      fail: function(res) {
        console.log('fail', res)
      },
      complete: function(res) {
        console.log('complete', res)
      }
    })
  } else {
    goWebView(str)
  }
}

function goWebView(url) {
  url = url.replace("http://", "https://")
  uni.showLoading({
    title: '下载中'
  });
  uni.downloadFile({
    url: url,
    success: function(res) {
      uni.hideLoading();
      var filePath = res.tempFilePath;
      uni.showLoading({
        title: '正在打开'
      });
      uni.openDocument({
        filePath: filePath,
        showMenu: true,
        success: function(res) {
          uni.hideLoading();
        },
        fail: function(err) {
          uni.hideLoading();
          uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    fail: function(error) {
      uni.hideLoading();
      uni.showToast({
        title: `下载失败`,
        icon: 'none',
        duration: 2000
      });
    }
  });
}

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

    form.value.url=JSON.stringify([selectFileValue])
  });
}
function fileProgress(e) {
  console.log('progress:'+ e)
}
function delSupplementFile(index) {
  selectFileValue = {}
}
function uploadSure(){
  console.log(form.value)
  api.commitPaymentVoucher(form.value).then(res=>{
    UpPop.value.close()
    form.value = {}
    uni.showToast({
      icon:'none',
      title:'操作成功'
    })
    getList()
  })
}
function goDetail(item) {
  //详情
  console.log(item.docId)
  let path = `/personalVip/feeBillDetail?docId=${item.docId}`
  uni.navigateTo({
    url: path
  });
}
</script>

<style scoped lang="scss">
.appList .appItem .func button[disabled]{
  opacity: 0.3;
}
	.popBody {
		font-size: 28rpx;
		line-height: 1.5;
		overflow: auto;
		padding: 30rpx;

		.btn-red {
			margin: 50rpx 0 30rpx;
		}
	}
</style>