<template>
	<view class="backView">
		<u-navbar :title-size="32" title-color="#000" :border-bottom="false" :title="title" title-bold></u-navbar>
		<u-loading style="position: fixed;top: 50%;" :show="loading" size="36" mode="flower"></u-loading>
		<view class="topView">
			<view :class="['topItemView', {'active':activeTop===ikey}]" @click="handleTopItemChange(ikey,item)"
				v-for="(item,ikey) in dataList" :key="ikey">

				<text :class="['ph-lst-top-index', {'active':activeTop===ikey}]">{{ ikey + 1 }}</text>
				<text class="topItemTitle">{{item.type}}</text>
			</view>
		</view>

		<view class="rightView">
			<view class="right-view-title">拍照项有：</view>
			<scroll-view scroll-y="true" class="scroll-y">
				<template v-for="(item,ikey) in rightList">
					<view class="rightItemView" @click="take(item,ikey)" :key="ikey">
						<view :class="['rightContentView', {'active':item.orderImages[0]}]">
							<text class="ph-lst-item-index">{{ ikey + 1 }}</text>
							<text class="">{{item.name}}</text>
							<image class="ph-list-item-arrow" src="/static/photo/arrow.png"></image>
							<!-- <text class="rightContent u-m-t-14 u-m-l-30 u-p-b-30">{{item.describe}}</text> -->
						</view>
						<view class="rightImageView" v-if="item.orderImages && item.orderImages.length > 0">
							<u-image class="rightImage" v-for="(image, index) in item.orderImages" :src="image"
								:key="index" @tap.stop="handleClickImage(item, index)" width="116" height="116">
								<view slot="error" style="font-size: 24rpx;">上传中</view>	
							</u-image>
						</view>
					</view>
				</template>
			</scroll-view>
			<take-photo type="test" v-if="takeStatus" :upload="false" :currentItem="currentItemDate" @close="closeTake"></take-photo>
			<!-- <u-button v-if="activeTop + 1 === dataList.length" class="ph-list-button" type="error" shape="circle"
				:disabled="buttonDisabled" :custom-style="buttonStyle" @click="isPopShow = true">一键清空展示图片</u-button> -->
		</view>

		<!-- <u-popup border-radius="10" v-model="isPopShow" safe-area-inset-bottom mode="center" width="690rpx"
			height="600rpx">
			<view class="ph-list-pop-title">
				<text>是否一键清空系统展示的图片？</text>
			</view>
			<view class="ph-list-pop-text">
				<text>点击"确定"则删除系统展示的所有图片</text>
			</view>
			<view class="ph-list-pop-btn-view">
				<u-button :custom-style="customStyleCancel" hover-class="none" shape="circle" type="primary"
					@click="isPopShow = false">
					取消
				</u-button>
				<u-button :custom-style="customStyleSave" shape="circle" type="primary" @click="handleClickSure()">
					确定
				</u-button>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import takePhoto from '@/components/take/index.vue'
	import baseFile from '@/components/upload/index';
	export default {
		components: {
			'take-photo': takePhoto
		},
		data() {
			return {
				takeStatus: false,
				currentItemDate:{},
				topList: [],
				activeTop: 0,
				leftList: [],
				rightList: [],
				classifyId: '',
				systemId: '',
				brand: '',
				brandId: '',
				orderId:'',
				dataList: [],
				loading: true,
				isPopShow: false,
				userWatermark:{},
				title: '全部'
			}
		},
		mixins: [baseFile],
		onLoad(e) {
			getApp().trackPage('照片规范列表页')
			if (e && e.brandId) {
				this.brandId = e.brandId
			}
			if (e && e.brand) {
				this.brand = decodeURIComponent(e.brand)
				// this.title = this.brand
			}

			if (e && e.orderId) {
				this.orderId = e.orderId
			}
			if (e && e.systemId) {
				this.systemId = e.systemId

			}

			if (e && e.classifyId) {
				this.classifyId = e.classifyId
			}

			if (e && e.orderNumber) {
				this.orderNumber = e.orderNumber
			}
			// this.getListData()
			this.getListDataNew()
			this.getWatermark()

		},

		computed: {
			buttonStyle() {
				return {
					'color': '#FFFFFF',
					'width': '600rpx',
					'height': '104rpx',
					'font-size': '36rpx'
				}
			},
			buttonDisabled() {
				for (var item of this.dataList) {
					for (var i of item.list) {
						if ((i.imageList || []).length > 0) {
							return false
						}
					}
				}
				return true
			},
			customStyleCancel() {
				return {
					'background-color': '#D1D4D4',
					'width': '280rpx',
					'height': '96rpx'
				}
			},
			customStyleSave() {
				return {
					'background-color': '##2272FF',
					'width': '280rpx',
					'height': '96rpx',
					'margin-left': '50rpx'
				}
			}
		},
		methods: {
			getListDataNew() {
				this.loading = true
				let self = this
				var data = {
					partnerCompanyId:this.systemId ,
					orderId:this.orderId,
					categoryId:this.classifyId,
					brandId:this.brandId
				};
				self.$u.api.orderStandard(data).then((res) => {
					this.loading = false
					if (res.code == 200) {
						if(res.data && res.data.length > 0){
							let dataList = []
							var  flag = false;
							res.data.forEach(item=>{
								item.key = item.orderImages ? item.orderImages.map(v => {
									const key = v.split('com/')
									return key[1]
								}) : []
								if(dataList.length===0 ){
									var dataItem = {type:'',list:[]}
									dataItem.type = item.type
									dataItem.list.push(item)
									dataList.push(dataItem)
								}else{
									dataList.forEach(dataListItem=>{
										if(dataListItem.type===item.type){
											dataListItem.list.push(item)
											flag = true
											return false;
										}else{
											flag = false
										}
									})
									if(!flag){
										var dataItem = {type:'',list:[]}
										dataItem.type = item.type
										dataItem.list.push(item)
										dataList.push(dataItem)
									}
								}
							})
							console.log("===", dataList)
							this.handleData(dataList)
						}
					} else {
						console.log(res.code.message)
					}
				});
			},
			handleData: function(result) {
				this.activeTop = 0
				this.dataList = result
				if (result.length > 0) {
					var item = result[0]
					this.rightList = item.list
				}
			},

			//顶部点击
			handleTopItemChange: function(ikey, item) {
				this.activeTop = ikey
				this.rightList = item.list
				const photo = getApp().globalData.photo
				photo.topIndex = ikey
				photo.waterSetting = item.userWatermark
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// 点击图片
			handleClickImage(item, index) {
				uni.previewImage({
					urls: item.orderImages,
					current: index
				})
			},
			//右侧点击
			rightItemClick: function(item, ikey) {
				const photo = getApp().globalData.photo
				photo.currentItem = item
				photo.itemIndex = ikey
				const len = item.imageList.length
				photo.currentItemLength = len > 9 ? 10 : len
				uni.navigateTo({
					url: '/pages/photo/take'
				})
			},
			take(item,ikey) {
				this.currentItemDate = item

				const photo = getApp().globalData.photo
				photo.currentItem = item
				photo.itemIndex = ikey
				const len = item.orderImages?item.orderImages.length:0
				photo.currentItemLength = len > 9 ? 10 : len

				uni.hideTabBar()
				this.takeStatus = true
			},
			async closeTake(img) {
				if(img !== undefined){
					if (!this.currentItemDate.orderImages) this.currentItemDate.orderImages = []
					// 真实地址key
					let saveList = this.currentItemDate.key 
					const order = {
						orderNumber: this.orderNumber,
						fieldsName: this.currentItemDate.fieldsName,
						fieldsTitle: this.currentItemDate.fieldsTitle,
						uploadType: 'camera'
					}
					const value = await this.saveToTask(img, order)
					value.forEach(item =>{
						// 文件key添加保存数组中
						saveList.push(item.key)
						// step1 添加缓存图片 到显示
						this.currentItemDate.orderImages.push(item.path)
					})
					// // step2 保存图片
					const data = {
						type: this.currentItemDate.type,
						images: saveList,
						fieldsName: this.currentItemDate.fieldName,
						version: 2
					}
					this.$u.api.saveImage(data,this.orderId).then((res) => {
						if (res.code !== 200) console.log("保存图片异常",res.data.message)
					})
				}
				this.takeStatus = false
			},
			getWatermark(){
				var data={partnerCompanyId:this.systemId}
				this.$u.api.getWatermark(data).then((res) => {
					if (res.code == 200) {
						console.log("===", res.data)
						this.userWatermark = res.data
						getApp().globalData.photo.waterSetting = this.userWatermark
					} else {
						console.log("获取水印备注异常",res.data.message)
					}
				});
			}
		}
	}
</script>

<style>
	.backView {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
	}

	.centerBackView {
		display: flex;
		flex-direction: row;
		margin-top: 80rpx;
		width: 100%;
	}

	.ph-lst-top-index {
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		border-radius: 8rpx;
		background-color: #999999;
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
	}

	.ph-lst-top-index.active {
		background-color: #2272FF;
	}


	.rightView {
		background-color: #F4F5F7;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: 50rpx;
	}

	.right-view-title {
		font-size: 36rpx;
		font-weight: bold;
		height: 104rpx;
		line-height: 104rpx;
		margin-left: 30rpx;
	}

	.rightItemView {
		/* width: 100%; */
		/* display: flex; */
		/* flex-direction: row; */
		/* justify-content: space-between; */
		/* border-bottom: 20rpx solid #F3F3F3; */
		margin: 0rpx 30rpx 20rpx 30rpx;
		padding: 36rpx 30rpx 30rpx 30rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		/* min-height: 108rpx; */
	}

	.ph-lst-item-index {
		font-size: 24rpx;
		font-weight: bold;
		border-radius: 4rpx;
		width: 34rpx;
		height: 34rpx;
		line-height: 32rpx;
		text-align: center;
		border-width: 1px;
		border-style: solid;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}

	.rightContentView {
		display: flex;
		align-items: flex-start;
		width: 100%;
		font-size: 30rpx;
		color: #2272FF;
		/* flex-direction: column; */
		/* border-left: 2rpx solid #F3F3F3; */
	}

	.rightContentView.active {
		color: #666666;
		border-color: #666666;
	}

	.ph-list-item-arrow {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 38rpx;
	}

	.rightContent {
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.rightImageView {
		/* width: 300rpx; */
		/* height: 320rpx; */
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 26rpx;
	}

	.rightImage {
		background-color: #F3F3F3;
		/* width: 116rpx;
		height: 116rpx; */
		margin: 0rpx 12rpx 12rpx 0rpx;

	}

	.rightImage:nth-child(5n) {
		margin-right: 0;
	}


	.topView {
		background-color: #FAFAFA;
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		z-index: 1;
	}

	.topItemView {
		/* width: 210rpx; */
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-flex: 1;
		flex: 1;
		background-color: #FFFFFF;
		color: #999999;
	}

	.topItemView.active {
		color: #2272FF;
	}

	.topItemTitle {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 30rpx;
	}

	.greenBackColor {
		background-color: #4CD964;
	}

	.ph-list-pop-text {
		color: #666666;
		text-align: center;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.ph-list-pop-title {
		font-size: 40rpx;
		padding-top: 150rpx;
		text-align: center;
		color: #333333;
	}

	.ph-list-pop-btn-view {
		display: flex;
		justify-content: center;
		margin-top: 150rpx;
	}

	.scroll-y {
		height: 73vh;
	}
</style>
