<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.settleFlag == 0" class="text-warning">已结算</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> 
				<text v-if="item.settleFlag == 1 && item.payFlag == 2" class="text-primary">未确认</text> 
        </view>
        <view class="date" @click="goDetail(item)">
          <uni-icons type="calendar-filled" size="16" color="#AD181F"></uni-icons>
		  <text v-if="item.yjTime">下发日期 {{item.yjTime?.slice(0,10)}}</text>
		  </view>
        <view class="text-primary" @click="goDetail(item)">{{item.yjCode}}</view>
        <view class="name mt0" @click="goDetail(item)">{{item.yjName}}</view>

        <view class="flexbox" style="margin-bottom: 20rpx;" @click="goDetail(item)">
          <view>
            缴费凭证
            <view @click.stop="viewSettleFile(item)">
				<text v-if="item.payFlag == 0" class="text-success">已上传</text>
				<text  v-if="item.payFlag == 1">--</text> 
				<text  v-if="item.payFlag == 2" class="text-danger">未确认</text> 
			</view>
          </view>
		  <view>
		    结算单数量
		    <view>{{item.recordCount}}</view>
		  </view>
		  <view>
		    费用合计
		    <view> <text>¥{{item.recordTotalFee}}</text></view>
		  </view>
		  
        </view>
		<view class="pp">
			结算单日期范围：{{item.timeRange}}
		</view>
		<view class="pp">
			  <text v-if="item.payTime">结算日期：{{item.payTime?.slice(0,10)}}</text>
		</view>
        <view class="func">
          <button
            @click="handleUpdate(item)" class="miniBtn" v-if="!(item.settleFlag == 0||item.payFlag == 2)">确认并上传
			</button>
			<button v-if="item.sendFlag != 0" @click="handleDownload(item)"  class="miniBtn">下载缴费通知单</button>
			<button class="miniBtn" v-if="!(item.settleFlag==0||item.payFlag==0||item.payFlag==2)" @click="handleBack(item)">撤回</button>
        </view>
      </view>
    </view>
    <view class="nodata" v-if="list.length==0">
      <image mode="aspectFit" src="/static/nodata.png"></image>
      <text>暂无数据</text>
    </view>
	<view style="height:200rpx;"></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" v-model="form.payEvidenceObj"
                @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() {
  getList()
}

function getList() {
  api.mentDocList({sendFlag:1}).then(res => {
    list.value = res.rows
  })
}

function handleUpdate(item) {
  form.value.yjId = item.yjId
  form.value.payTime = item.payTime
  if(item.payEvidence){
	  let file = JSON.parse(item.payEvidence)
	  console.log(file)
	  form.value.payEvidenceObj = {      
		    url: file[0].url,
			name: file[0].name,
			extname: 'png'
		}
  }
  UpPop.value.open()
}
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.commitPaymentVoucherYJ({
	  payTime:form.value.payTime,
	  url:form.value.url,
	  yjId:form.value.yjId
	}).then(res=>{
    UpPop.value.close()
    form.value = {}
    uni.showToast({
      icon:'none',
      title:'操作成功'
    })
    getList()
  })
}
function goDetail(item) {
  //详情
  console.log(item.yjId)
  // let path = `/personalVip/feeBillDetail?docId=${item.docId}`
  let path = `/personalVip/monthFeeDetail?id=${item.yjId}`
  uni.navigateTo({
    url: path
  });
}
function handleDownload(item){
	// let url = `/download?arr=${item.yjId}&type=batchMemberYJFeeBill`
	uni.showLoading({
		title:'加载中'
	})
	api.downJiaoYJFei(item.yjId).then(res=>{
		circulation(res.data)
	})
}
function circulation(id) {
	api.queryProcess(id).then(res=>{
		if (res.data.url) {
			uni.hideLoading()
			goWebView(config.baseUrl_api + res.data.url)
		} else {
			circulation(id)
		}
	})
}
	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
				});
			}
		});
	}

function handleBack(row){
		uni.showModal({
			title: '提示',
			content: `确定撤回${row.yjName}吗`,
			success: function(res) {
				if (res.confirm) {
					uni.showLoading({
						icon: 'none',
						title: '请求中'
					})
					api.wdBack(row.yjId).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: '操作成功'
						})
						getList()
					})
				}
			}
		})
}
function viewSettleFile(item){
  if(item.payEvidence){
	  let file = JSON.parse(item.payEvidence)
	  console.log(file)
	  showImg(file[0].url)
  }
}
	function showImg(n) {
		var str = ''
		if(n.indexOf('http')==-1){
			str = config.baseUrl_api + n
		} else {
			str = n
		}
		
		if (n.indexOf('png') > -1 || n.indexOf('jpg') > -1 || n.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)
		}
	}
</script>

<style scoped lang="scss">
	:deep(.file-picker__progress){opacity: 0;}
	.popBody {
		font-size: 28rpx;
		line-height: 1.5;
		overflow: auto;
		padding: 30rpx;

		.btn-red {
			margin: 50rpx 0 30rpx;
		}
	}
	.func button.miniBtn{font-size: 28rpx;padding: 0 20rpx;}
</style>