<template>
	<view class="call-list" :class="['call-list-'+type]">
		<view v-for="(item,index) in list" :key="index" class="item">
				<view class="avatar" v-if="type!='xiaomi'">
					<image v-if="type=='ios'" :src="'/static/image/call/iosAvatar.png'||item.avatar" mode=""></image>
					<image v-else-if="type=='oppo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix"></image>
				</view>
				<view class="infoBox">
					<view class="left-box">
						<view class="leftInfo">
							<view class="title" :class="{'title-red':item.status==0}">
								<!-- ios -->
								<view class="notes" v-if="type=='ios'">
									{{item.name||item.phone}}
								</view>
								<!-- xiaomi -->
								<view class="notes" v-else-if="type=='xiaomi'">
									{{item.name||item.notes||item.phone}} 
									<text v-if="!item.name&&item.notes">{{item.phone}}</text>
								</view>
								<view class="notes" v-else-if="type='oppo'">
									{{item.name||item.phone}}
								</view>
							</view>
							<view class="info">
							
								<!-- 卡几 -->
								<view class="kj"  v-if="type!='ios'&&type!='xiaomi'&&(type=='oppo')">
									<image :src="`/static/image/call/${type}KJ${item.kj}.png`" mode=""></image>
								</view>
								<!-- 时间 -->
								<view class="time" v-if="type!='ios'&&(type=='xiaomi')">
									{{item.time}}
								</view>
								<!-- icon -->
								 <view class="status-icon" v-if="type=='ios'">
										<image src="/static/image/call/iosStatusIcon.png" mode=""></image>
								 </view>
								<!-- 地址 -->
								<view class="address" v-if="type!='ios'&&(type=='xiaomi'||type=='oppo')">
									{{item.address}}
								</view>
								<!-- 运营商 -->
								<view class="yys">
									{{item.yys}}
								</view>
								<!-- 电话 -->
								<view class="phone" v-if="type!='xiaomi'&&type!='oppo'">
									{{item.phone}}
								</view>
								<!-- 备注 -->
								<view class="notes" v-if="type=='oppo'">
									{{item.notes}}
								</view>
							</view>
					</view>
				</view>
				<view class="right-box">
					<!-- 时间 -->
					<view class="time" v-if="type=='ios'&&(type!='xiaomi')">
						{{item.time}}
					</view>
					<!-- 图标 -->
					<view class="icon" v-if="type=='ios'||type=='xiaomi'||type=='oppo'">
						<image :src="`/static/image/call/${type}RightIcon.png`" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	name: 'call-list',
	props: {
		isHuise: {
			type: Boolean,
			default: true
		},
		type: {
			type: String,
			default: 'ios'
		}
	},
	data() {
		return {
			list:[
				{
					avatar: '/static/logo.png',
					title: '18888888888',
					name: '大王',
					phone: '18888888888',
					phoneNotes: '电话',
					yys: '移动',
					kj: '1',
					address: '重庆',
					time: '星期一',
					icon: '/static/logo.png',
					status: 0,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3：未接 4:已接 5:已拒绝
					notes: '骚扰电话',

				},
				{
					avatar: '/static/logo.png',
					title: '18888888888',
					name: '',
					phone: '18888888888',
					phoneNotes: '电话',
					yys: '移动',
					kj: '1',
					address: '重庆',
					time: '星期一',
					icon: '/static/logo.png',
					status: 1,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3：未接 4:已接 5:已拒绝
					notes: '骚扰电话',

				},
			]
		};
	},
	watch: {
		isHuise(newValue, oldValue) {
			console.log(newValue)

		}
	},
	mounted() {
		
	},
	methods: {
		
	}
};
</script>

<style lang="scss" scoped>
	.call-list {
		box-sizing: border-box;
		background-color: #fff;
		.item {
			display: flex;
			.avatar {
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				image {
					width: 100% !important;
					height: 100% !important;
				}
			}
			.infoBox{
				width: calc(100% - 80rpx);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
				.left-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					.leftInfo {
						.title {
							font-size: 32rpx;
							color: #333;
							margin-bottom: 10rpx;
						}
						.info {
							display: flex;
							font-size: 28rpx;
							color: #666;
							view{
								margin-right: 10rpx;
							}
							.kj{
								line-height: 0;
								width: 22rpx;
								height: 22rpx;
								image {
									width: 100%;
									height: 100%;
								}
							}
							.status-icon{
								line-height: 0;
								width: 22rpx;
								height: 22rpx;
								image {
									width: 100%;
									height: 100%;
								}
							}
						}
						
					}
				}
				.right-box {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.time {
						font-size: 28rpx;
						color: #666;
					}
					.icon {
						width: 40rpx;
						height: 40rpx;
						overflow: hidden;
						margin-left: 20rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
		}
	}
	.call-list-ios {
		.item{
			align-items: center;
			justify-content: space-between;
		}
		.avatar {
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			margin-left: 32rpx;
		}
		.infoBox{
			width: calc(100% - 136rpx) !important;
			padding: 24rpx 32rpx 24rpx 0;
			.left-box{
				.title {
					font-weight: 400;
					font-size: 16px;
					color: #1A1A1A;
					line-height: 16px;
				}
				.title-red{
					color: #FC3E30 !important;
				}
				.info{
					align-items: center;
				}
				.info .phone {
					font-weight: 400;
					font-size: 14px;
					color: #838383;
					line-height: 20px;
				}
				.info .yys {
					height: 12px;
					background: #C7C7C7;
					border-radius: 2px 2px 2px 2px;
					padding:0 4rpx;
					font-weight: 400;
					font-size: 10px;
					color: #FFFFFF;
					line-height: 10px;
					text-align: center;
				}
			}
			.right-box{
				.time {
					font-weight: 400;
					font-size: 14px;
					color: #838383;
					line-height: 14px;
				}
				.icon {
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					margin-left: 14rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.call-list-xiaomi{
		.infoBox{
			width: 100% !important;
			padding: 34rpx 56rpx 28rpx 56rpx;
			.title {
				font-weight: 400;
				font-size: 16px;
				color: #1A1A1A;
				text{
					font-size: 13px !important;
					color: #767676 !important;
				}
			}
			.title-red{
				color: #EE0115 !important;
			}
			.info{
				
				view{
					font-size: 13px;
					color: #767676;
				}
			}
		}
	}
	.call-list-oppo{
		.item{
			padding: 32rpx 36rpx 0  36rpx !important;
			justify-content: space-between;
		}
		.infoBox{
			width: calc(100% - 20rpx);
			padding-bottom: 36rpx;
		}
		.avatar{
			width: 26rpx !important;
			height: 26rpx !important;
			border-radius: 0 !important;
			image {
				width: 100% !important;
				height: 100% !important;
			}
		}
		.info{
			display: flex;
			align-items: center;
		}
	}
</style>