<template>
	<!-- :style="{background: bgColor}" -->
	<view class="content">
		<block v-for="(item,index) in text" :key="index">
			<view @click="confirm(item)" class="bottom-view"
				:style="{width:(100/ text.length)+ '%',margin:text.length==1?'0 30rpx':index==0?'0 0 0 30rpx':'0 30rpx 0 0',borderRadius:text.length==1?'88rpx':index==0?'88rpx 0 0 88rpx':'0 88rpx 88rpx 0',background: item.type == 'confirm'? primaryColor : subColor}">
				{{ item.text }}
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		props: {
			text: {
				type: Array,
				default () {
					return [{
						text: '保存',
						type: 'confirm'
					}]
				}
			},
			bgColor: {
				type: String,
				default () {
					return '#F8F8F8'
				}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		methods: {
			confirm(item) {
				this.$emit(item.type)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 128rpx;
		z-index: 997;
		height: calc(128rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);

		.bottom-view {
			width: auto;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
