<template>
	<view class="content">
		<view class="list-item" v-for="(item,index) in state.tableData">
			<view><text>卡号：</text><text>{{item.cardId}}</text></view>
			<view><text>下黑时间：</text><text>{{item.creationTime}}</text></view>
			<view v-if="item.reasonIn"><text>下黑原因：</text><text>{{item.reasonIn}}</text></view>
			<view><text>黑名单类型：</text><text>{{item.typeC}}</text></view>
			<view><text>状态：</text><text>{{item.status == '1'?'在黑':'已反白'}}</text></view>
		</view>
		<view class="no" v-if="state.tableData.length==0">暂无黑名单</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { blackApi,cardBlackQuery } from "@/utils/network/api.js";
	import { request, requestNew } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption.js";
	import { getItem } from "@/utils/storage";
	const state = reactive({
		vehiclePlate: "",
		vehiclePlateColor: "",
		tableData: [],
		blackStatus: [],
		cardId:""
	});
	onLoad((option : any) => {
		console.log("option", option)
		let black = getItem('key')['BLACKLIST_TYPE'];
		for (var k = 0; k < black.length; k++) {
			let obj = {};
			obj['value'] = black[k]['code']
			obj['text'] = black[k]['name']
			state.blackStatus.push(obj)
		}
		console.log("black", state.blackStatus)
		state.vehiclePlate = option.vehiclePlate;
		state.vehiclePlateColor = option.vehiclePlateColor;
		state.cardId = option.cardId;
		list()
	})
	const list = () => {
		const options = {
			type: 2,
			data: {
				"vehiclePlate": state.vehiclePlate,
				"vehiclePlateColor": state.vehiclePlateColor,
				'cardId':state.cardId
			},
			method: 'POST',
			showLoading: true,
		}
		requestNew(cardBlackQuery, options).then((res) => {
			const data = res;
			const getData = data.blackCards;
			const newData = []
			// 只要在黑的  和 1 2 3不展示
			// LOSS("卡挂失",1){},
			// HANG_WITHOUT_CARD("无卡挂起",2){},
			// CANCEL_WITHOUT_CARD("无卡注销",3){},
			// OVERDRAW("账户透支",4){},
			// AGENCY_BLACK("合作机构黑名单",5){},
			// VEHICLE_TYPE_NOTMATCH("车型不符",6){},
			// CARD_BALANCE_INSUFFICIENT("储值卡余额不足",7){},
			for (var i = 0; i < getData.length; i++) {
				if (getData[i]['status'] == '1' && (getData[i]['type'] == 4 || getData[i]['type'] == 5 || getData[i]['type'] == 6 || getData[i]['type'] == 7)) {
					newData.push(getData[i])
				}
			}
			for (var i = 0; i < newData.length; i++) {
				for (var m = 0; m < state.blackStatus.length; m++) {
					if (newData[i]['type'] == state.blackStatus[m]['value']) {
						newData[i]['typeC'] = state.blackStatus[m]['text']
						break;
					}
				}
			}
			state.tableData = newData
			console.log("圈存金额查询2", data)
		})
	}
</script>

<style scoped>
	.content {
		padding-bottom: 20rpx;
		background-color: #EEF7F7;
		padding-top: 20rpx;
		min-height: 100vh;
	}

	.list-item {
		width: 95%;
		border-radius: 10rpx;
		margin: 30rpx auto;
		font-size: 28rpx;
		border: 1rpx solid #ccc;
		padding: 12rpx;
		box-sizing: border-box;
		background-color: white;
	}

	.list-item>view {
		margin-bottom: 10rpx;
		width: 94%;
	}

	.no {
		text-align: center;
		padding-top: 100rpx;
	}
</style>