<template>
  <view class="page">
	  <tn-nav-bar fixed>产品详情</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view class="tn-margin">
			  <view >
				<tn-list-cell>
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">产品名称</view>
				    </view>
				    <view class="list__right">{{details.productName}}</view>
				  </view>
				</tn-list-cell>
				<tn-list-cell>
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">产品型号</view>
				    </view>
				    <view class="list__right">{{details.productModel}}</view>
				  </view>
				</tn-list-cell>
				<tn-list-cell>
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">二维码编号</view>
				    </view>
				    <view class="list__right">{{details.qrCode}}</view>
				  </view>
				</tn-list-cell>
				<tn-list-cell>
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">状态</view>
				    </view>
				    <view class="list__right">{{details.status==1?'维修中':details.status==2?'已下线':details.status==3?'已入库':details.status==0?'作废':details.status==-1?'生产中':''}}</view>
				  </view>
				</tn-list-cell>
				<tn-list-cell>
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">AI识别状态</view>
				    </view>
				    <view class="list__right">{{details.aiStatus==-1?'无需识别':details.aiStatus==0?'未识别':details.aiStatus==1?'NG待处理':details.aiStatus==2?'OK':details.aiStatus==3?'人工OK':''}}</view>
				  </view>
				</tn-list-cell>
				<tn-list-cell>
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">创建时间</view>
				    </view>
				    <view class="list__right">{{details.createTime}}</view>
				  </view>
				</tn-list-cell>
				<tn-list-cell v-if="details.frontImg">
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">产品正面图片</view>
				    </view>
				    <view class="list__right">
						<view
						  class="tn-image-upload__item tn-image-upload__item-preview"
						  :style="{
							width: $tn.string.getLengthUnitValue(170),
							height: $tn.string.getLengthUnitValue(170)
						  }"
						>
						<image
						  class="tn-image-upload__item-preview__image"
						  :src="details.frontImg"
						  :mode="imageMode"
						  @tap.stop="doPreviewImage(details.frontImg)"
						></image>
						</view>
						<view
						  v-if="details.frontAiImg"
						  class="tn-image-upload__item tn-image-upload__item-preview"
						  :style="{
							width: $tn.string.getLengthUnitValue(170),
							height: $tn.string.getLengthUnitValue(170)
						  }"
						>
						<image
						  class="tn-image-upload__item-preview__image"
						  :src="details.frontAiImg"
						  :mode="imageMode"
						  @tap.stop="doPreviewImage(details.frontAiImg)"
						></image>
						</view>
					</view>
				  </view>
				</tn-list-cell>
				<tn-list-cell v-if="details.backImg">
				  <view class="list-icon-text">
				    <view class="list__left">
				      <view class="list__left__text tn-color-gray--dark">产品背面图片</view>
				    </view>
				    <view class="list__right">
						<view
						  class="tn-image-upload__item tn-image-upload__item-preview"
						  :style="{
							width: $tn.string.getLengthUnitValue(170),
							height: $tn.string.getLengthUnitValue(170)
						  }"
						>
						<image
						  class="tn-image-upload__item-preview__image"
						  :src="details.backImg"
						  :mode="imageMode"
						  @tap.stop="doPreviewImage(details.backImg)"
						></image>
						</view>
						<view
						  v-if="details.backAiImg"
						  class="tn-image-upload__item tn-image-upload__item-preview"
						  :style="{
							width: $tn.string.getLengthUnitValue(170),
							height: $tn.string.getLengthUnitValue(170)
						  }"
						>
						<image
						  class="tn-image-upload__item-preview__image"
						  :src="details.backAiImg"
						  :mode="imageMode"
						  @tap.stop="doPreviewImage(details.backAiImg)"
						></image>
						</view>
					</view>
				  </view>
				</tn-list-cell>
				<template v-if="details.status==3">
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">扫码日期</view>
						</view>
						<view class="list__right">{{details.scanDate}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">批次号</view>
						</view>
						<view class="list__right">{{details.batchNo}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">水冷</view>
						</view>
						<view class="list__right">{{details.waterCooling}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">气密</view>
						</view>
						<view class="list__right">{{details.airtight}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">订单号</view>
						</view>
						<view class="list__right">{{details.orderNo}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">冷板二维码</view>
						</view>
						<view class="list__right">{{details.coldQrCode}}</view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
					  <view class="list-icon-text">
						<view class="list__left">
						  <view class="list__left__text tn-color-gray--dark">入库时间</view>
						</view>
						<view class="list__right">{{details.inStockDate}}</view>
					  </view>
					</tn-list-cell>
				  </template>
				  <template v-if="details.isEnableProcess==1">
					  <view class="list tn-border-solid">
					    <view class="tn-flex tn-border-solid-bottom tn-main-gradient-blue--reverse">
					  	<view class="tn-flex-2 tn-text-center">工序</view>
					  	<view class="tn-flex-2 tn-text-center">状态</view>
					  	<view class="tn-flex-2 tn-text-center">是否达标</view>
					  	<view class="tn-flex-2 tn-text-center">操作时间</view>
					    </view>
					    <block  v-for="(item,index) in details.productProcessList ">
					  	  <view class="tn-flex tn-border-solid-bottom" >
					  		<view class="tn-flex-2 tn-text-center tn-color-blue"  @click="showProcessDetail(item)">{{item.processName}}({{item.processCode}})</view>
					  		<view class="tn-flex-2 tn-text-center">{{item.status==1?'已完成':'未完成'}}</view>
					  		<view class="tn-flex-2 tn-text-center">{{item.isStandards==1?'达标':item.isStandards==-1?'达标':item.isStandards==0?'未达标':''}}</view>
							<view class="tn-flex-2 tn-text-center">{{item.status==1?item.updateTime:''}}</view>
					  	  </view>
					    </block>
					  </view>
				  </template>
				  
				  
				  <template v-if="details.status==2 && (details.aiStatus==0 || details.aiStatus==1 )">
				    <view class="tn-flex">
				      <view class="tn-flex-1 tn-padding-sm">
						<tn-button :shadow="true" width="100%"  backgroundColor="tn-bg-teal" fontColor="#FFFFFF" @click="productOkOrNg(0)" margin="10rpx 0">{{details.aiStatus==0?'产品OK':'AI误判'}}</tn-button>
					  </view>
				      <view class="tn-flex-1 tn-padding-sm">
						<tn-button :shadow="true" width="100%"  backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="productOkOrNg(1)" margin="10rpx 0">{{details.aiStatus==0?'产品NG-发起维修':'发起维修'}}</tn-button>
					  </view>
				    </view>
				  </template>
			  </view>
		  </view>
	  </view>
	  
	  <tn-popup
	    v-model="showProcess"
	    :marginTop="vuex_custom_bar_height"
	    length="50%"
	    mode="center"
	    :borderRadius="20"
	    :closeBtn="true"
		width="80%"
	    :maskCloseable="true"
	  >
		  <view class="tn-padding" style="max-height: 60vh;">
			<tn-list-cell>
			  <view class="list-icon-text">
				<view class="list__left">
				  <view class="list__left__text tn-color-gray--dark">工序</view>
				</view>
				<view class="list__right">{{productProcess.processName}}({{productProcess.processCode}}</view>
			  </view>
			</tn-list-cell>
			<tn-list-cell>
			  <view class="list-icon-text">
				<view class="list__left">
				  <view class="list__left__text tn-color-gray--dark">是否追溯</view>
				</view>
				<view class="list__right">{{productProcess.isRetrospect==1?'是':'否'}}</view>
			  </view>
			</tn-list-cell>
			<tn-list-cell  v-if="productProcess.isStandards">
			  <view class="list-icon-text">
				<view class="list__left">
				  <view class="list__left__text tn-color-gray--dark">是否达标</view>
				</view>
				<view class="list__right">{{productProcess.isStandards==1?'达标':productProcess.isStandards==-1?'达标':productProcess.isStandards==0?'未达标':''}}</view>
			  </view>
			</tn-list-cell>
			<tn-list-cell>
			  <view class="list-icon-text">
				<view class="list__left">
				  <view class="list__left__text tn-color-gray--dark">是否拍照</view>
				</view>
				<view class="list__right">{{productProcess.isPhotograph==1?'是':'否'}}</view>
			  </view>
			</tn-list-cell>
			<tn-list-cell v-if="productProcess.images && productProcess.isPhotograph==1">
			  <view class="list-icon-text">
				<view class="list__left">
				  <view class="list__left__text tn-color-gray--dark">拍照图片</view>
				</view>
				<view class="list__right">
					<view
					  class="tn-image-upload__item tn-image-upload__item-preview"
					  :style="{width: $tn.string.getLengthUnitValue(150),height: $tn.string.getLengthUnitValue(150)}"
					  v-for="(item,index) in productProcess.images.split(',')">
					<image
					  class="tn-image-upload__item-preview__image"
					  :src="item"
					  :mode="imageMode"
					  @tap.stop="doPreviewImage(item)"
					></image>
					</view>
				</view>
			  </view>
			</tn-list-cell>
			<tn-list-cell>
			  <view class="list-icon-text">
				<view class="list__left">
				  <view class="list__left__text tn-color-gray--dark">操作人</view>
				</view>
				<view class="list__right">{{productProcess.operatorName}}</view>
			  </view>
			</tn-list-cell>
			<tn-list-cell>
			  <view class="list-icon-text">
				<view class="list__left">
				  <view class="list__left__text tn-color-gray--dark">操作时间</view>
				</view>
				<view class="list__right">{{productProcess.updateTime}}</view>
			  </view>
			</tn-list-cell>
			
			<template v-if="productProcess.isRetrospect==1">
			  <view class="list  tn-border-solid">
				<view class="tn-flex tn-border-solid-bottom tn-main-gradient-blue--reverse">
				<view class="tn-flex-2 tn-text-center">追溯范围</view>
				<view class="tn-flex-2 tn-text-center">标准值</view>
				<view class="tn-flex-2 tn-text-center">实际值</view>
				</view>
				<block  v-for="(item,index) in productProcess.details ">
				  <view class="tn-flex tn-border-solid-bottom" >
					<view class="tn-flex-2 tn-text-center ">{{item.processItemName}}</view>
					<view class="tn-flex-2 tn-text-center" v-if="item.valueType=='2'">{{item.minValue}}~{{item.maxValue}} {{item.unit?item.unit:''}}</view>
					<view class="tn-flex-2 tn-text-center" v-else>OK/NG</view>
					<view class="tn-flex-2 tn-text-center">{{item.value}}</view>
				  </view>
				</block>
			  </view>
			</template>
		  </view>
	  </tn-popup>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		  details:{},
		  showProcess:false,
		  productProcess:{},
	  }
    },
	onLoad(option){
		this.detail(option.id);
	},
    methods: {
		detail(id){
			if(!id){
				this.api.toast('请传入产品信息')
				return
			}
			let that = this
			that.api.request('wx/product/api/detail',{id:id},'get','').then((res) => {
				that.details = res
			}).catch((res) => {
			})
		},
		showProcessDetail(item){
			this.showProcess = true;
			this.productProcess=item;
		},
		productOkOrNg(isNg){
			this.btnLoad = true;
			let that = this,
			params = {
				productId:that.details.id,
				aiImg:that.details.frontAiImg?that.details.frontAiImg:that.details.backAiImg,
				isNg:isNg,
			}
			that.api.request('wx/product/api/productNgOperate',params,'get','').then((res) => {
				that.api.toast('操作成功')
				that.detail(that.details.id);
			}).catch((res) => {
			})
		},
		  // 预览图片
		  doPreviewImage(url) {
			uni.previewImage({
			  urls: [url],
			  current: url,
			  success: () => {
			  },
			  fail: () => {
				this.api.toast('预览图片失败')
			  }
			})
		  },
    }
  }
</script>

<style lang="scss" scoped>
	
	.list-icon-text, .list-image-text {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	
	.list {
	  &__left {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
		min-width: 140rpx;
	    
	    &__icon, &__image {
	      margin-right: 18rpx;
	    }
	  }
	  
	  &__right {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
		flex-wrap: wrap;
		word-break: break-all;
	  }
	}
	
	
	.page{
		.list{
			.tn-flex{
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				view{
					
				}
			}
		}
	}
	
	
	.tn-image-upload {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  align-items: center;
	  
	  &__item {
	    /* #ifndef APP-NVUE */
	    display: flex;
	    /* #endif */
	    align-items: center;
	    justify-content: center;
	    width: 200rpx;
	    height: 200rpx;
	    overflow: hidden;
	    margin: 12rpx;
	    margin-left: 0;
	    background-color: $tn-font-holder-color;
	    position: relative;
	    border-radius: 10rpx;
	    
	    &-preview {
	      border: 1rpx solid $tn-border-solid-color;
	      
	      
	      &__image {
	        display: block;
	        width: 100%;
	        height: 100%;
	        border-radius: 10rpx;
	      }
	    }
	    
	  }
	  
	}
</style>