<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				班前喊话
			</view>
		</headers>
		<view class="listBox">
			<!-- @click="searchPerson(item.id)" -->
			<view v-for="item in list" :key="item.id">
				<uni-card>
					<view class="personItem">
						<view class="leftImg">
							<image :src="url_config+'image/'+item.shoutImage" style="width: 180rpx;height: 150rpx;"
								@click="lookImg(url_config+'image/'+item.shoutImage)"></image>
						</view>
						<view class="rightMessage">
							<view>企业：{{item.enterpriseName}}</view>
							<view>班组：{{item.teamName}}</view>
							<view>负责人：{{item.dutyUserName}}</view>
							<view>时间：{{item.updateTime}}</view>
						</view>
					</view>
				</uni-card>
			</view>
			<view class="placeholderBox" v-show="list.length==0">
				<image src="/static/noData.png" class="noDataImg"></image>
				<view class="text">
					暂无数据
				</view>
			</view>
		</view>
		<view class="addBtn">
			<image src="../../static/addImg.png" mode="" style="width: 180rpx;height: 180rpx;"
				@click="openAdd('center')"></image>


		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="dialogStyle" v-if="ishow">
				<view class="leftTitle">
					<view>新增班前喊话</view>
				</view>
				<view>
					<view class="flex">
						<view class="title">企&nbsp;&nbsp;&nbsp;业：</view>
						<view class="uni-list">
							<picker @change="companyChange" :value="companyindex" mode="selector" :range="companyList"
								range-key="enterpriseName">
								<view class="titleSelect">
									{{companyList[0].enterpriseName}}
								</view>
							</picker>
						</view>
					</view>
					<view class="flex">
						<view class="title">班&nbsp;&nbsp;&nbsp;组：</view>
						<view class="uni-list">
							<picker @change="teamChange" :value="teamindex" :range="teamList" range-key="teamName">
								<view class="titleSelect">{{teamList[teamindex].teamName}}</view>
							</picker>
						</view>
					</view>
					<view :range="name" class="flex">
						<view class="title">&nbsp;负责人：</view>
						<view class="titleSelect">{{name}}</view>
					</view>
					<view class="flexPhone">
						<view class="title">拍&nbsp;&nbsp;&nbsp;摄： </view>
					</view>
					<view class="example-body">
						<uni-file-picker v-model="imageValue" limit="1" @select="canversList"></uni-file-picker>
					</view>
					<view>
						<button type="primary" class="btnStyle" @click="submit">确认</button>
					</view>
					<view>
						<button class="btnStyle" @click="close">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<canversCom v-if="openImg" @imgUrl="imgUrl" :imgList="imgList"></canversCom>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/imgPachToBase64/index.js'
	import headers from '../../components/headers/headers.vue'
	import canversCom from "@/pages/videoManage/component/canversCom.vue"
	import {
		GetDateStr
	} from "@/static/js/util.js"
	export default {
		components: {
			headers,
			canversCom
		},
		data() {
			return {
				ishow: false,
				imageValue: [],
				type: 'center',
				array: ['中国', '美国', '巴西', '日本'],
				companyindex: 0, //企业
				teamindex: 0, //班组
				value: 'xxx',
				list: [],
				sn: '',
				companyList: [],
				teamList: [],
				teamId: '',
				name: '', //负责人
				openImg: false,
				imgList: {},
				addTeamId: '',
				isLoadMore: false,
				pageNo: 1
			};
		},
		mounted() {
			this.getList()
		},
		onLoad(sn) {
			this.sn = sn.sn
			this.getCompany()
			this.getTeam()
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				uni.showLoading({
					title: '加载中'
				})
				this.pageNo += 1;
				this.getList();
			}
		},
		methods: {
			lookImg(a) {
				console.log('11111111111111111', a)
				let data = []
				data.push(a)
				uni.previewImage({
					urls: data,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(suc) {
							console.log('选中了第' + suc);
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getCompany() {
				console.log('===================')
				var that = this
				this.sendRequest({
					url: 'xmgl/enterpriseInfo/selectHierarchyEnterpriseList',
					data: {
						projectSn: this.sn
					},
					method: "POST",
					success(res) {
						console.log(res, 'that.companyListthat.companyListthat.companyList')
						that.companyList = res.result;

						that.teamId = that.companyList[1].enterpriseId
					}
				})
			},
			getTeam() {
				var that = this
				this.sendRequest({
					url: 'xmgl/teamInfo/getTeamInfoList',
					data: {
						enterpriseId: this.teamId,
						projectSn: this.sn
					},
					method: "POST",
					success(res) {
						that.teamList = res.result.list
					}
				})
			},
			openAdd(type) {
				this.ishow = true
				this.type = type
				this.$refs.popup.open(type)
			},
			submit() {
				let that = this
				console.log('1111111', that.imageValue)
				//#ifdef APP-VUE
				pathToBase64(that.imageValue[0].url).then(base64 => {
					console.log(base64)
					that.sendRequest({
						url: 'xmgl/shoutInfo/addShoutInfo',
						data: {
							teamId: that.addTeamId,
							projectSn: that.sn,
							shoutImage: base64
						},
						method: "POST",
						success(res) {
							// that.teamList = res.result.list
							console.log('ok', res)
							that.$refs.popup.close()
							that.getList()
						}
					})
				})
				//#endif

				//#ifdef H5
				that.sendRequest({
					url: 'xmgl/shoutInfo/addShoutInfo',
					data: {
						teamId: that.addTeamId,
						projectSn: that.sn,
						shoutImage: that.imageValue[0].url
					},
					method: "POST",
					success(res) {
						// that.teamList = res.result.list
						console.log('ok', res)
						that.$refs.popup.close()
					}
				})

				//#endif

			},
			getList() {
				var that = this
				this.sendRequest({
					url: 'xmgl/shoutInfo/selectPage',
					data: {
						projectSn: this.sn,
						pageNo: this.pageNo
					},
					method: "GET",
					success(res) {
						// that.list = res.result.records;
						that.list = [...that.list, ...res.result.records]
						console.log('66', that.list)

					}
				})
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			companyChange: function(e) {
				this.companyindex = e.detail.value
				this.teamId = this.companyList[e.detail.value].enterpriseId
			},
			teamChange: function(e) {
				console.log(e)
				this.teamindex = e.detail.value
				this.name = this.teamList[e.detail.value].leaderName
				this.addTeamId = this.teamList[e.detail.value].id
			},
			close() {
				this.$refs.popup.close()
			},
			canversList(e) {
				this.imgList = {
					imgUrl: e.tempFiles[0].image.location,
					imgWidth: e.tempFiles[0].image.width,
					imgHeight: e.tempFiles[0].image.height,
					team: this.teamList[this.teamindex].teamName,
					name: this.teamList[this.teamindex].leaderName
				}
				this.openImg = true
				console.log('传过去啦', this.imgList)
			},
			imgUrl(val) {
				this.imageValue = [{
					url: val
				}]
				this.openImg = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixedHeaderBox {
		// position: relative;	
	}

	.searchBox {
		// background-color: #2b8df3;
		padding: 0 15rpx 5rpx;
		position: fixed;
		left: 0;
		width: calc(100% - 30rpx);
		top: 0;
		z-index: 1;
	}

	.selectContent {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		.selectItem {
			flex: 1;
		}
	}

	.listBox {
		margin-top: 30rpx;
	}

	.personItem {
		display: flex;
		justify-content: space-between;

		.leftImg {
			flex: 3;
		}

		.rightMessage {
			flex: 6;
			font-size: 26rpx;
		}

		// align-items: center;
		// box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
		// position: relative;
		// margin-bottom: 10rpx;
		// padding: 30rpx;
		// border-radius: 16rpx;
		// // padding: 0 30rpx;
		// font-size: 30rpx;
		// .teamName{
		// 	font-size: 26rpx;
		// }
		// .small{
		// 	font-size: 24rpx;
		// 	opacity: 0.8;
		// }

	}

	.addBtn {
		position: absolute;
		top: 80%;
		left: 38%;
		position: fixed;
	}

	.dialogStyle {
		width: 600rpx;
		height: 750rpx;
		background-color: white;
		border: 2rpx solid white;
		border-radius: 5rpx;
	}

	.leftTitle {
		font-size: 28rpx;
		font-weight: 700;
		display: flex;
		justify-content: center;
		margin: 30rpx 0 40rpx 0;
	}

	.title {
		font-size: 26rpx;
		font-weight: 700;
		margin-top: 8rpx;
	}

	.titleSelect {
		font-size: 26rpx;
		width: 400rpx;
		height: 50rpx;
		border: 1px solid rgb(241, 241, 241);
		border-radius: 10rpx;
		line-height: 50rpx;
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.flexItem {
		display: flex;
	}

	.flex {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.flexPhone {
		margin-left: 38rpx;
	}

	.example-body {
		padding: 0 0 20rpx 140rpx;
	}

	.btnStyle {
		font-size: 28rpx;
		border-radius: 10rpx;
		width: 500rpx;
		margin-bottom: 20rpx;
	}
</style>
