<template>
	<view class="margin padding bg-gragul-oil radius company-card">
		<view class="padding-top  padding-bottom-lg flex">
			<view class="basis-xl">
				<text class="text-white">{{company.companyName}}</text>
				<view class="padding-top-xs">
					<text class="text-white" @tap="makeCall(company.leaderPhone)">负责人：{{company.leaderName}} ({{company.leaderPhone|phoneFilter}})</text>
				</view>
			</view>
			<view class="basis-xs">
				<!-- bg-qy -->
				<view class="bg-qy">
					<image style="width: 100%;" :src="mainURL+'bg-qy.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="dashed-top padding-top">
			<view class="flex">
				<view class="flex-sub text-center" v-show="company.openJoinCompany" @tap="joinqr">
					<button class="cu-btn round bg-white text-red text-sm">
						<text class="text-lg">
							<text class="cuIcon-qr_code padding-right-xs"></text>
						</text>
						出示二维码
					</button>
				</view>
				<view class="flex-sub text-center" v-show="company.openDirectOil" @tap="oiling">
					<button class="cu-btn round bg-white text-red text-sm">
						<text class="text-lg">
							<text class="cuIcon-addressbook padding-right-xs"></text>
						</text>
						<!-- <text class="cuIcon-crown padding-right-xs"></text> -->
						直接加油
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			company:{
				type:Object,
				default(){}
			}
		},
		data() {
			return {
				mainURL: this.global.mainURL,
			}
		},
		methods: {
			oiling() {
				uni.navigateTo({
					url: `/packageQr/pages/partnership/partner-group/partner-group?id=${this.company.companyId}`
				})
			},
			joinqr() {
				uni.navigateTo({
					url: `/packageQr/pages/partnership/join-qr/join-qr?id=${this.company.companyId}&name=${this.company.companyName}`
				})
			},
			makeCall(number){
				uni.makePhoneCall({
					phoneNumber:number
				})
			}
		},
		filters:{
			phoneFilter(value){
				if(value){
					return value.substring(0, 3) + ' ' + ' **** ' + ' ' + value.substring(7, 11)
				}else{
					return '暂无手机号'
				}
				
			}
		}
	}
</script>

<style scoped>
	.bg-gragul-oil {
		background: linear-gradient(-51deg, rgba(255, 0, 0, 0.81), rgba(255, 19, 19, 0.81));
	}

	.dashed-top::after {
		border-color: #fff !important;
	}

	.company-card {
		position: relative;
		margin-bottom: 1rem;
	}

	.bg-qy {
		position: absolute;
		z-index: 1;
		width: 120upx;
		height: 120upx;
		top: 15rpx;
		right: 2.5rem;
	}

	.cu-btn {
		border-radius: 100upx 100upx 100upx 0;
	}
</style>
