<template>
  <view  class="page">
	  <tn-nav-bar fixed>扫码入库</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view class="tn-bg-white tn-padding-left tn-padding-right">
			  <tn-form-item label="所属客户" :labelWidth="200" :borderBottom="false">
				<tn-input v-model="client" type="select" placeholder="请选择所属客户" :selectOpen="clientSelectShow" @click="clientSelectShow = true" :showRightIcon="false"></tn-input>
			  </tn-form-item>
			  <tn-form-item label="产品型号" :labelWidth="200" :borderBottom="false">
				<tn-input v-model="productModel" type="select" placeholder="请选择产品型号" :selectOpen="modelSelectShow" @click="modelSelectShow = true" :showRightIcon="false"></tn-input>
			  </tn-form-item>
			  <tn-form-item label="订单号" :labelWidth="200" prop="orderNo" >
				<tn-input v-model="orderNo" type="text" placeholder="请输入订单号"></tn-input>
			  </tn-form-item>
		  </view>
		  <view v-if="productModel && client" >
		  <view  v-for="(item,index) in products" class="tn-margin-top-sm" @click="showInfoForm(index)">
		    <tn-list-cell>
		      <view class="list-icon-text" >
		        <view class="list__left">
		          <view class="list__left__icon ">
					  <tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="40rpx" shape="circle">{{index+1}}</tn-tag>
				  </view>
		          <view class="list__left__text">{{item.qrCode?('产品：'+item.qrCode):'请填写产品信息'}}</view>
		        </view>
		       <view class="list__right">
		          <view class="tn-text-df tn-icon-delete tn-color-blue" v-if="index>0" @click.stop="deleteProduct(index)"> 删除</view>
		          <view class="tn-text-sm tn-icon-down tn-margin-left"></view>
		        </view>
		      </view>
		    </tn-list-cell>
		  </view>
		  <view class="tn-margin">
			<tn-button :shadow="true" width="100%" backgroundColor="#01BEFF" fontColor="#FFFFFF"  @click="submit">提交</tn-button>
		  </view>
		  <!-- <view class="tn-flex tn-flex-wrap tn-margin">
		    <view class="tn-flex-basic-md tn-padding-right-xs">
				<tn-button :shadow="true" width="100%" backgroundColor="tn-bg-teal" fontColor="#FFFFFF"  @click="addProduct">添加产品</tn-button>
		    </view>
		    <view class="tn-flex-basic-md tn-padding-left-xs">
				<tn-button :shadow="true" width="100%" backgroundColor="#01BEFF" fontColor="#FFFFFF"  @click="submit">提交</tn-button>
		    </view>
		  </view> -->
		  </view>
	  </view>
	  
	  
	  <tn-select
	    v-model="clientSelectShow"
	    mode="single"
	    :list="clientList"
	    @confirm="clientSelectConfirm"
	  		labelName="name"
	  		valueName="id"
	  ></tn-select>
	  
	  <tn-select
	    v-model="modelSelectShow"
	    mode="single"
	    :list="modelList"
	    @confirm="modelSelectConfirm"
		labelName="productName"
		valueName="id"
	  ></tn-select>
	  
	  <!-- popup -->
	  <tn-popup
	    v-model="showForm"
	    :marginTop="vuex_custom_bar_height"
	    length="50%"
	    mode="bottom"
	    height="50%"
	    :closeBtn="false"
	    :maskCloseable="false"
	    @close="closedPopup"
	  >
	    <view class="popup-content " :class="{'popup-content--center': mode === 'center'}">
			<view class="tn-padding tn-border-solid-bottom">
				<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="40rpx" shape="circle">{{index+1}}</tn-tag>
				<text class="tn-margin-left" v-if="products[index].qrCode">产品：{{products[index].qrCode}}</text>
			</view>
			<view class="tn-padding tn-no-padding-top">
				<tn-form :model="form" ref="form" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
				  <tn-form-item label="二维码编号" prop="qrCode" :required="true" >
					<tn-input v-model="form.qrCode" type="text" placeholder="请输入二维码编号" :border="border"></tn-input>
					  <view slot="right" class="tn-icon-scan tn-color-blue"  @click="openScan(1)">扫码</view>
				  </tn-form-item>
				  <tn-form-item label="水冷" prop="waterCooling" v-if="showWaterCooling" :required="true">
					<tn-input v-model="form.waterCooling" type="text" placeholder="请输入水冷" :border="border"></tn-input>
				  </tn-form-item>
				  <tn-form-item label="气密" prop="airtight" v-if="showAirtight" :required="true">
					<tn-input v-model="form.airtight" type="text" placeholder="请输入气密" :border="border"></tn-input>
				  </tn-form-item>
				  <!-- <tn-form-item label="订单号" prop="orderNo" :required="true">
					<tn-input v-model="form.orderNo" type="text" placeholder="请输入订单号" :border="border"></tn-input>
				  </tn-form-item> -->
				  <tn-form-item label="冷板二维码" prop="coldQrCode" v-if="showColdQrCode" :required="true">
					<tn-input v-model="form.coldQrCode" type="text" placeholder="请输入冷板二维码" :border="border"></tn-input>
					<view slot="right" class="tn-icon-scan tn-color-blue"  @click="openScan(2)">扫码</view>
				  </tn-form-item>
				 <!-- <tn-form-item label="检测结果" prop="checkResult" :required="true">
					<tn-radio-group v-model="form.checkResult" :width="radioWidth" :wrap="radioWrap" @change="radioGroupChange">
					  <tn-radio name="1">合格</tn-radio>
					  <tn-radio name="2">不合格</tn-radio>
					</tn-radio-group>
				  </tn-form-item> -->
				</tn-form>
				
				  <view class="tn-flex tn-flex-wrap tn-margin-top">
				    <view class="tn-flex-basic-md tn-padding-right-xs">
					  <tn-button :shadow="true" width="100%" backgroundColor="tn-bg-teal" fontColor="#FFFFFF"  @click="closedPopup">关闭</tn-button>
				    </view>
				    <view class="tn-flex-basic-md tn-padding-left-xs">
					  <tn-button :shadow="true" width="100%" backgroundColor="#01BEFF" fontColor="#FFFFFF"  @click="submitForm">提交</tn-button>
				    </view>
				  </view>
			</view>
		 
	    </view>
	  </tn-popup>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		  products:[],
		  clientId:'',
		  client:'',
		  productModelId:'',
		  productModel:'',
		  orderNo:'',
		  info:{
			  qrCode:'',
			  waterCooling:'',
			  airtight:'',
			  orderNo:'',
			  coldQrCode:'',
			  // checkResult:'1',
		  },
		  index:0,
		  form:{
			  qrCode:'',
			  waterCooling:'',
			  airtight:'',
			  orderNo:'',
			  coldQrCode:'',
			  // checkResult:'1',
		  },
		  
		  modelList: [],
		  clientList: [],
		  rules: {
		    qrCode: [
		      {
		        required: true,
		        message: '请输入或扫码二维码编号',
		        trigger: 'blur'
		      },
			],
		    waterCooling: [
		      {
		        required: true,
		        message: '请输入水冷',
		        trigger: 'blur'
		      },
			],
		    airtight: [
		      {
		        required: true,
		        message: '请输入气密',
		        trigger: 'blur'
		      },
			],
		    orderNo: [
		      {
		        required: true,
		        message: '请输入订单号',
		        trigger: 'blur'
		      },
			],
		 //    coldQrCode: [
		 //      {
		 //        required: true,
		 //        message: '请输入或扫码冷板二维码',
		 //        trigger: 'blur'
		 //      },
			// ],
		 //    checkResult: [
		 //      {
		 //        required: true,
		 //        message: '请选择检测结果',
		 //        trigger: 'blur'
		 //      },
			// ],
			  
		  },
		  showForm:false,
          modelSelectShow: false,
          clientSelectShow: false,
		  
		  showWaterCooling:false,
		  showAirtight:false,
		  showColdQrCode:false,
		  
		  labelPosition: 'left',
		  labelAlign: 'right',
		  labelWidth: 170,
		  
      }
    },
	onShow(){
	},
	onLoad(){
		this.getClientSelect()
		this.getModelSelect()
	},
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
		async getClientSelect(){
			const result= await this.api.request('wx/product/api/clientSelect',{},'get')
			this.clientList = result
		},
		async getModelSelect(){
			const result= await this.api.request('wx/product/api/modelSelect',{},'get')
			this.modelList = result
		},
		showInfoForm(index){
			this.showForm = true
			this.$refs.form.resetFields()
			this.form = JSON.parse(JSON.stringify(this.products[index]))
			this.index = index;
		},
		closedPopup(){
			this.showForm = false
			this.form = JSON.parse(JSON.stringify(this.info))
		},
		radioGroupChange(data){
		},
		modelSelectConfirm(event) {
		  this.productModel = `${event[0]['label']}`
		  this.productModelId = `${event[0]['value']}`
		  let item = event[0].item
		  let that = this;
		  let products = [];
		  for(var i=0;i<item.inStockNum;i++){
		  	products.push(JSON.parse(JSON.stringify(that.info)))
		  }
		  that.showWaterCooling=(","+item.inStockFormItem+",").includes(",water_cooling,"); 
		  that.showAirtight=(","+item.inStockFormItem+",").includes(",airtight,"); 
		  that.showColdQrCode=(","+item.inStockFormItem+",").includes(",cold_qr_code,"); 
		  
		  that.products = products
		},
		clientSelectConfirm(event) {
		  this.client = `${event[0]['label']}`
		  this.clientId = `${event[0]['value']}`
		},
		addProduct(){
			this.products.push(JSON.parse(JSON.stringify(this.info)))
		},
		deleteProduct(index){
			this.products.splice(index,1)
		},
		openScan(type){
			// 允许从相机和相册扫码
			let that = this;
			uni.scanCode({
				success: function (res) {
					if(type ==1){
						that.form.qrCode = res.result
					}else if(type==2){
						that.form.coldQrCode = res.result
					}
				}
			});
		},
		submitForm(){
			let that = this;
		  this.$refs.form.validate(valid => {
			if (valid) {
			  // 验证通过
			  that.products[that.index] = that.form;
			  that.closedPopup();
			} else {
			  // 验证失败
			}
		  })
		},
		submit(){
			let that = this;
			let count=0;
			let qrCpdes = ',';
			if(!that.orderNo){
				that.api.toast("请填写订单号");
				return
			}
			for(let i=0;i<that.products.length;i++){
				let product = that.products[i];
				if(!product.qrCode){
					that.api.toast("请填写所有产品信息，若要提交请删除多于空行");
					return
				}
				if(qrCpdes.includes(","+product.qrCode+",")){
					that.api.toast("产品："+product.qrCode+"已存在，请勿重复添加");
					return
				}
				qrCpdes = qrCpdes+product.qrCode+","
				console.log(qrCpdes);
			}
			let form = {};
			form.productModelId = that.productModelId;
			form.clientId = that.clientId;
			form.orderNo = that.orderNo;
			form.details = that.products;
			that.api.request('wx/product/api/batchSubmit',form,'post','').then((res) => {
			  that.api.toast("操作成功")
			  setTimeout(function(){
				  uni.redirectTo({
					url:'../product/inStock',
				  });
			  }, 2000) //停2秒
			}).catch((res) => {
			})
		}
    }
  }
</script>

<style lang="scss" scoped>
  
  .page {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
	
	.list__options {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	
	.list {
	  &__left {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    
	    &__icon, &__image {
	      margin-right: 18rpx;
	    }
	  }
	  
	  &__right {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	  }
	}
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
	
</style>