<template>
	<view class="cust_detail">
		<view class="cust_item">
				<view class="record_item" v-for="(item,index) in operation_lists" :key="index">
					<image 
						:src="item.staff.img ? item.staff.img : BASE_IMG_URL+'img/headImg.png'" 
						mode="scaleToFill"
						style="width: 80rpx;height: 80rpx;border-radius: 50%;flex-shrink: 0;"
					></image>
					<view class="record_info">
						<view class="info_top">
							<view>{{item.staff.name}}</view>
							<view class="record_time">
								{{item.createtime}}
							</view>
						</view>
						<view>{{item.content}}</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import {netOperationList} from '@/api/kehu.js'
	import {BASE_IMG_URL} from '@/util/api.js'

	export default {
		props: {
			kehuid: {
				type: Number,
				default: null
			},
		},
		data() {
			return {
				BASE_IMG_URL: BASE_IMG_URL,
				operation_lists: [
					//测试数据后删除
					{
						staff:[{name:'name'}],
						createtime:'createtime',
						content:'content'
					}
				], //操作记录
				kehuid:'',
				type:Number
			}
		},
		onLoad(options){
			this.type = options.type,
			this.kehuid = options.id
		},
		onShow(){
			console.log(this.kehuid, '9-25')
			//操作记录
			this.operationList()
		},
		created() {
			
		},
		methods: {
			//操作记录
			operationList() {
				let params = {
					relation_type: this.type,
					relation_id: this.kehuid
				}
				netOperationList(params).then(res => {
					this.operation_list = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cust_detail {
		.cust_item {
			margin-bottom: 20rpx;
			.cust_item_head {
				background: #fff;
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				border-bottom: 1rpx solid #EAEAEA;
				padding: 0 24rpx;
				.head_info {
					display: flex;
					align-items: center;
					.icon--task {
						margin-right: 10rpx;
					}
				}
				.head_new {
					display: flex;
					align-items: center;
					color: #1c9bfc;
					.icon-clock {
						margin-right: 10rpx;
					}
				}
			}
			.lxr_con_list {
				// padding: 20rpx;
				background: #fff;
				// border-bottom: 1rpx solid #C0C0C0;
				// margin-bottom: 20rpx;
				&:last-child {
					border-bottom: none;
				}
				.name {
					font-size: 28rpx;
					color: #333333;
					margin-top: 15rpx;
				}
				.info {
					font-size: 24rpx;
					color: #999999;
					margin: 10rpx 0;
				}
				.proce_li {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.pro_li_left {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.protext {
							font-size: 24rpx;
							color: #999999;
						}

						.probox {
							width: 120rpx;
							height: 15rpx;
							border-radius: 8rpx;
							background: #C0C0C0;
							margin: 0 15rpx;

							.proin {
								width: 20%;
								height: 15rpx;
								border-radius: 8rpx;
								background: #ff7800;
							}
						}

						.pronum {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.pro_li_right {
						color: #ec7f51;
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.con_status {
					font-size: 24rpx;
					color: $uni-text-color;
					margin-top: 10rpx;
				}
			}
			.operation_record {
				padding: 20rpx 30rpx;
				background: #fff;
				.record_item {
					display: flex;
					justify-content: space-between;
					padding-bottom: 1rpx solid #EAEAEA;
					&:last-child {
						border-bottom: none;
					}
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.record_info {
						flex: 1;
						margin-left: 25rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						.info_top {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 10rpx;
							font-size: 30rpx;
							color: #999;
						}

						.shenhetext {
							font-size: 26rpx;
							color: #666;
							line-height: 34rpx;
						}
					}

					.record_line {
						position: absolute;
						top: -102rpx;
						left: -26rpx;
						height: 105rpx;
						border-left: 4rpx dotted #dedede;
					}
				}
			}
		}
	}
</style>
