<template>
	<view class="bottom-button">
		<view v-for="(item, index) in list" :class="['button-view', item.type]" :key="index">
			<u-button :class="['list-button', item.type, {'one': list.length == 1}]" @click="handleClick(item)"
				:hover-class="item.type == 'image' || item.disabled ? 'none' : ''"
				:custom-style="{...buttonStyle[item.disabled ? 'disabled' : item.type], ...item.customStyle}" type="primary" shape="circle">
				<view class="image-view" v-if="item.type == 'image'">
					<image :src="baseImageUrl + item.image" class="image-content"></image>
				</view>
				<view :class="['text-content', item.type]">{{item.label}}</view>
			</u-button>
			<view v-if="item.count && item.count > 0" class="bradge-vidw">{{item.count}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// label: 按钮文字,
			// type: 'text'普通按钮；'image'图文按钮
			// image: type='image'的时候，按钮图片
			// show: 是否显示,
			// disabled: 是否禁用，true禁用；false 可以点击
			// customStyle: 自定义button样式
			buttons: {
				type: Array,
				default () {
					// id: 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照； 4 物料申请
					// label: 按钮文字,
					// type: 'image' 上图片下文字；'text' 纯文字,
					// image: 图片名,
					// show: 是否显示,
					// disabled: 是 禁用；否 正常,
					// id: 区分各个按钮
					return [{
						label: '过程反馈',
						type: 'image',
						image: 'guochengfankui.png',
						show: false,
						disabled: false,
						id: 1
					},
					{
						label: '异常签到',
						type: 'image',
						image: 'yichangqiandao.png',
						show: false, // 待签到显示
						disabled: false,
						id: 2
					},
					{
						label: '现场拍照',
						type: 'image',
						image: 'xiancahngpaizhao.png',
						show: false,
						disabled: false,
						id: 3
					},
					{
						label: '物料申请',
						type: 'image',
						image: 'peijian.png',
						show: false,
						disabled: false,
						count: 0,
						id: 4
					},
					{
						label: '去接单',
						type: 'text',
						image: '',
						show: true,
						disabled: false,
						id: 0,
						customStyle: {
							'background-color': '#D1D4D4'
						}
					}]
				}
			}
		},
		computed: {
			baseImageUrl() {
				return process.uniEnv.qn_base_url
			},
			list() {
				return this.buttons.filter((item) => {
					return item.show == true
				})
			},
			buttonStyle() {
				return {
					'image': {
						'background-color': 'transparent',
						'border-color': 'transparent',
						'display': 'flex',
						'flex-direction': 'column',
						'height': '104rpx',
						'width': '82rpx',

					},
					'text': {
						'background-color': '#2272FF',
						'border-color': 'transparent',
						'display': 'flex',
						'flex-direction': 'column',
						'height': '104rpx',
						'width': '100%',

					},
					'disabled': {
						'background-color': '#D1D4D4',
						'border-color': 'transparent',
						'display': 'flex',
						'flex-direction': 'column',
						'height': '104rpx',
						'width': '100%'

					},
				}
			},
		},
		methods: {
			// 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照	
			handleClick(item) {
				if (item.disabled) return
				this.$emit('submit', item.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-button {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx 44rpx 30rpx;
		
		.button-view {
			max-width: 600rpx;
			display: flex;
			position: relative;
			&.image {}

			&.text {
				width: 100%;
				display: flex;
				justify-content: flex-end;
			}

			.list-button {
				display: flex;
				flex-direction: column;
				width: 100%;
				&.image {
					margin-right: 22rpx;
				}

				&.text {
					width: 360rpx;
					margin-left: 18rpx;
					&.one {
						width: 600rpx;
						margin-left: 0rpx;
					}
				}
				.image-view {
					flex-shrink: 0;
					background-color: #FFFFFF;
					border-radius: 38rpx;
					width: 76rpx;
					height: 76rpx;

					.image-content {
						width: 76rpx;
						height: 76rpx;
					}
				}

				.text-content {
					&.text {
						color: #FFFFFF;
						font-size: 32rpx;
						font-weight: bold;
					}

					&.image {
						color: #333333;
						font-size: 20rpx;
						line-height: 20rpx;
						height: 20rpx;
						margin-top: 8rpx;
					}
				}
			}
			.bradge-vidw {
				height: 24rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;
				position: absolute;
				top: -10rpx;
				right: 4rpx;
				border: 2rpx solid #FA5A49;
				color: #FA5A49;
				font-size: 16rpx;
				line-height: 24rpx;
				text-align: center;
				min-width: 36rpx;
				z-index: 1;
			}
		}
	}
</style>
