<template>
  <view >
	  <tn-nav-bar fixed>返工返修</tn-nav-bar>
	  <view class="tn-margin" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <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="请输入二维码编号" ></tn-input>
					<view slot="right" class="tn-icon-scan tn-color-blue"  @click="openScan">扫码</view>
				</tn-form-item>
			  <tn-form-item label="上传图片" prop="images"  :required="true">
				<tn-image-upload :fileList="form.images" :action="action" :header="header" @on-success="imageUploadChange"></tn-image-upload>
			  </tn-form-item>
			  <tn-form-item label="问题描述" prop="problemDesc"  :required="true">
				<tn-input v-model="form.problemDesc" type="textarea" placeholder="请输入问题描述" ></tn-input>
			  </tn-form-item>
		  </tn-form>
		  <view class="tn-margin-top">
			<tn-button :shadow="true" width="100%" backgroundColor="#01BEFF" fontColor="#FFFFFF"  @click="submit">提交</tn-button>
		  </view>
	  </view>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		labelPosition: 'left',
		labelAlign: 'left',
		labelWidth: 170,
		action: this.api.apiHost()+"wx/communal/api/upload",
		header:{
			'Authorization':'Basic d3hBcHBsZXQ6d3hBcHBsZXRfc2VjcmV0',
			'tenant_id':'000000',
			'Blade-Auth': "bearer "+this.api.getToken(),
		},
		form:{
			qrCode:'',
			images:[],
			problemDesc:'',
		},
		rules: {
		  qrCode: [
		    {
		      required: true,
		      message: '请输入或扫码二维码编号',
		      trigger: 'blur'
		    },
		  ],
		  images:  [
            {
              required: true,
              message: '请选择图片',
              trigger: 'change',
              type: 'array'
            }
          ],
		  problemDesc: [
		    {
		      required: true,
		      message: '请输入问题描述',
		      trigger: 'blur'
		    },
		  ],
		},
      }
    },
	onShow(){
	},
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
		openScan(){
			// 允许从相机和相册扫码
			let that = this;
			uni.scanCode({
				success: function (res) {
					that.form.qrCode = res.result
				}
			});
		},
		imageUploadChange(data,index,datas){
			this.form.images = datas;
		},
		submit(){
			let that = this;
			this.$refs.form.validate(valid => {
			if (valid) {
			  // 验证通过
			  let form = {}
			  form.qrCode = that.form.qrCode
			  form.problemDesc = that.form.problemDesc
			  let urls = [];
			  for(let i=0;i<that.form.images.length;i++){
				let url = that.form.images[i].url
				urls.push(url)
			  }
			  form.repairsImgs = urls.join()
			  that.api.request('wx/productRework/api/add',form,'post','').then((res) => {
				  uni.navigateBack({
					  	success: function (e) { 
					  		 var page = getCurrentPages().pop();
					  		 if (page == undefined || page == null) return;
					  		 page.onLoad();
					  	},
				  });
			  }).catch((res) => {
					console.log(res);
			  })
			} else {
			  // 验证失败
			}
		  })
		},
    }
  }
</script>

<style lang="scss" scoped>
</style>