<template>
  <view >
	  <tn-nav-bar fixed>下线查询</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view class="tn-margin">
			  <view v-if="!details.qrCode">
			    <tn-form-item label="产品二维码" :labelWidth="200">
			      <tn-input v-model="qrCode" type="text" placeholder="请输入产品二维码"></tn-input>
			      <view slot="right" class="tn-icon-scan tn-color-blue"  @click="openScan">扫码</view>
			    </tn-form-item>
				<tn-button backgroundColor="tn-main-gradient-aquablue" padding="40rpx 0" width="100%" shadow @click="detail" >
					查询
				</tn-button>
			  </view>
			  
			  <view v-if="details.qrCode">
				<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?'已出库':''}}</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>
				  </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>
				  </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>
				  <tn-button backgroundColor="tn-main-gradient-aquablue" padding="40rpx 0" width="100%" shadow @click="details={}" >
					重新查询
				  </tn-button>
			  </view>
			  <tn-empty  v-if="code" icon="../../../static/image/cart.jpg" :text="'无条码'+code+'的商品下线记录'" :imgWidth="200" :imgHeight="200" class="tn-margin-top-xl "></tn-empty>
			  <view  class="tn-margin-top-xl">
				 <!-- <tn-button backgroundColor="tn-main-gradient-aquablue" padding="40rpx 0" width="100%" shadow  @click="openScan">
					重新扫码
				  </tn-button> -->
			  </view>
			  
		  </view>
	  </view>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		  qrCode:'',
		  details:{},
		  code:'',
      }
    },
	onLoad(){
		// this.openScan();
	},
    methods: {
		openScan(){
			// 允许从相机和相册扫码
			let that = this;
			uni.scanCode({
				success: function (res) {
					that.qrCode = res.result
					that.detail()
				}
			});
		},
		detail(){
			let that = this
			that.api.request('wx/product/api/detail',{qrCode:that.qrCode},'get','').then((res) => {
				that.details = res
				that.code = ''
				that.qrCode = ''
			}).catch((res) => {
				that.code = that.qrCode;
			})
		},
		  // 预览图片
		  doPreviewImage(url) {
			uni.previewImage({
			  urls: [url],
			  current: url,
			  success: () => {
			  },
			  fail: () => {
				this.showToast('预览图片失败')
			  }
			})
		  },
    }
  }
</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;
	  }
	}
	
	
	.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>