<template>

	<u-popup :show="show" @close="show=false">
		<u-button :type="item.btnType" v-if="judge(item)" :text="item.name" @click="action(item)"
			v-for="(item,index) in btnList" :key="index"></u-button>
	</u-popup>



</template>

<script>
	export default {
		props: {
			btnList: {
				type: Array,
				default: () => []
			},
			current: {
				type: Object,
				default: () => {}
			}

		},

		data() {
			return {
				show: false,
			}
		},
		computed: {
			judge() {
				return (item) => {
					if (item.judge) {
						let is = true
						item.judge.forEach(({
							key,
							value
						}) => {
							if (!value.includes(this.current[key])) {
								is = false
							}
						})

						return is
					} else {
						return true
					}
				}

			}
		},
		methods: {
			action(item) {
				this.show = false
				if (item.type == 1) {
					uni.navigateTo({
						url: item.pageUrl + '?id=' + this.current.id
					})
				} else {
					this.$emit(item.apiName)

				}

			},

		}

	}
</script>


<style lang="scss" scoped>
	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;

			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;

			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;

			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 50%;
			}

			.perce100 {
				width: 100% !important;
			}
		}
	}
</style>