<template>
	<view class="page-css">
		<u-form
			labelPosition="left"
			labelWidth="120"
			:model="feedbackForm"
			:rules="rules"
			ref="backForm"
		>
			<u-form-item label="工单编号" prop="productionOrderCode" borderBottom ref="item1" :required="true">
				<u-input v-model="feedbackForm.productionOrderCode"  :border="false"></u-input>
			</u-form-item>
			<view class="" @click="turnCommodity">
				<u-form-item label="商品" prop="commodityName" borderBottom  ref="item1" :required="true" @click="turnCommodity">
					<view class="" @click="turnCommodity" style="display: flex;width: 100%;">
						<u-input v-model="feedbackForm.commodityName"  disabledColor="#ffffff" @click="turnCommodity"
							placeholder="请选择商品" :border="false" style="pointer-events: none;width: 90%;"></u-input>
					</view>
					<u-icon slot="right" name="arrow-right"  @click="turnCommodity"></u-icon>
				</u-form-item>
			</view>
			<u-form-item label="商品编码" prop="commodityCode" borderBottom ref="item1" :required="true">
				<u-input v-model="feedbackForm.commodityCode" disabled :border="false"></u-input>
			</u-form-item>
			<u-form-item label="商品规格" prop="commoditySpecifications" borderBottom ref="item1" :required="true">
				<u-input v-model="feedbackForm.commoditySpecifications" disabled :border="false"></u-input>
			</u-form-item>
			<u-form-item label="商品型号" prop="commodityModelNum" borderBottom ref="item1" :required="true">
				<u-input v-model="feedbackForm.commodityModelNum" disabled :border="false"></u-input>
			</u-form-item>
			<view class="" @click="showProblemType = true">
				<u-form-item label="问题分类" prop="problemTypeName" borderBottom   :required="true">
					<view class="" @click="showProblemType = true" style="display: flex;width: 100%;">
						<u-input v-model="feedbackForm.problemTypeName"  disabledColor="#ffffff" 
							placeholder="请选择问题分类" :border="false" style="pointer-events: none;width: 90%;" @click="showProblemType = true"></u-input>
					</view>
					<u-icon slot="right" name="arrow-right" @click="showProblemType = true"></u-icon>
				</u-form-item>
			</view>
			<!-- <view class="" @click="showProblem = true">
				<u-form-item label="问题" prop="problemName" borderBottom   >
					<view class="" @click="showProblem = true" style="display: flex;width: 100%;">
						<u-input v-model="feedbackForm.problemName"  disabledColor="#ffffff" 
							placeholder="请选择问题" :border="false" @click="showProblem = true" style="pointer-events: none;width: 90%;"></u-input>
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view> -->
			<u-form-item label="问题描述" prop="problemDescription" borderBottom :required="true"  >
				<u-input v-model="feedbackForm.problemDescription" :border="true" placeholder="请输入问题描述"
				    type="textarea" :height="120" />
			</u-form-item>
			<u-form-item label="问题图片" prop="picAttaches" :border-bottom="false" >
			    <!-- <u-upload :action="action" :file-list="fileList" 
				:header="headers"
				on-success="handleSuccess"
				on-error="handleError"></u-upload> -->
				<betone-upload  :type="'images'" v-model="feedbackForm.attachList"
				    @changeFile="changePic" >
				</betone-upload>
			</u-form-item>
			<!-- <u-form-item label="售后编号" prop="erpOrderCode" borderBottom ref="item1" >
				<u-input v-model="feedbackForm.erpOrderCode"  :border="false"></u-input>
			</u-form-item> -->
			<u-form-item label="客户名称" prop="customerName" borderBottom ref="item1" :required="true">
				<u-input v-model="feedbackForm.customerName"  :border="false"></u-input>
			</u-form-item>
			<u-form-item label="联系方式" prop="contactPhone" borderBottom ref="item1" :required="true">
				<u-input v-model="feedbackForm.contactPhone"  :border="false"></u-input>
			</u-form-item>
			<!-- <u-form-item label="生产批次" prop="batchCode" borderBottom ref="item1" >
				<u-input v-model="feedbackForm.batchCode"  :border="false"></u-input>
			</u-form-item> -->
			<u-form-item label="备注" prop="remark" borderBottom   >
				<u-input v-model="feedbackForm.remark" :border="true" placeholder="请输入备注"
				    type="textarea" :height="120" />
			</u-form-item>
		</u-form>
		<u-button class="item-bottom" type="primary" @click="formSubmit()">
		  提交
		</u-button>
		<!-- <u-action-sheet
			v-model="showProblemType"
			:list="problemTypeArr"
			@close="showProblemType = false"
			@click="clickProblemType"
		>
		</u-action-sheet> -->
		<u-select v-model="showProblemType" :list="problemTypeArr" @confirm="clickProblemType" @cancel="showProblemType = false"></u-select>
		<u-select v-model="showProblem" :list="problemArr" @confirm="clickProblem" @cancel="showProblem = false"></u-select>
		<!-- <u-action-sheet
			v-model="showProblem"
			:list="problemArr"
			@close="showProblemType = false"
			@click="clickProblem"
		>
		</u-action-sheet> -->
		<u-popup v-model="showGoods" mode="bottom" height="400px">
			<view class="popup-content">
				<view class="title_box">搜索</view>
				<view class="search_box">
					<u-input v-model="goods" style="width: 64%;  margin-right: 20rpx;margin-left: 20rpx;" placeholder="商品名称/商品编码" border></u-input>
					<u-button  style="width: 17%;height: 70rpx; margin-right: 20rpx;" type="primary" @click="handleSearch">搜索</u-button>
					<u-button  style="width: 17%;height: 70rpx;margin-right: 20rpx;" @click="handleReset">重置</u-button>
				</view>
				<view class="list_box">
					<view class="list_item" v-for="item in goodsList" :key="item.id" @click="clickItem(item)">
						<text>{{item.name}}</text> <text>{{item.code}}</text>
					</view>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				action:'/blade-resource/oss/endpoint/put-file',
				fileList:[],
				selector:['1','2'],
				feedbackForm:{
					attachList:[]
				},
				userInfo:{},
				headers:{},
				showGoods:false,
				showProblemType:false,
				problemArr:[],
				problemTypeArr:[],
				showProblem:false,
				formDisabled:false,
				goodsList:[],
				goodsArr:[],
				goods:'',
				rules: {
					commodityName: [{
						type: "string",
						required: true,
						message: "请输入商品名称",
						trigger: ["blur", "change"],
					  }],
					commodityCode:[{
						type: "string",
						required: true,
						message: "请输入商品编码",
						trigger: ["blur", "change"],
					}],
					commoditySpecifications:[{
				  		type: "string",
				  		required: true,
				  		message: "请输入商品规格",
				  		trigger: ["blur", "change"],
				  	}],
					commodityModelNum:[{
				  		type: "string",
				  		required: true,
				  		message: "请输入商品型号",
				  		trigger: ["blur", "change"],
				  	}],
					problemTypeName: [{
						type: "string",
						required: true,
						message: "请选择问题类型",
						trigger: ["blur", "change"],
					}],
					// problemName:[{
					// 	type: "string",
					// 	required: true,
					// 	message: "请选择问题",
					// 	trigger: ["blur", "change"],
					// }],
					problemDescription: [{
						type: "string",
						required: true,
						message: "请输入问题描述",
						trigger: ["blur", "change"],
					}],
					customerName:[{
						type: "string",
						required: true,
						message: "请输入客户名称",
						trigger: ["blur", "change"],
					}],
					productionOrderCode:[{
						type: "string",
						required: true,
						message: "请输入工单编号",
						trigger: ["blur", "change"],
					}],
					contactPhone:[{
						type: "string",
						required: true,
						message: "请输入联系方式",
						trigger: ["blur", "change"],
					}]
				},
			}
		},
		onLoad(option){
			console.log('option--------------',option)
			if(option && option.productionOrderCode){
				this.feedbackForm = {
					...this.feedbackForm,
					productionOrderCode:option.productionOrderCode
				}
			}
			
		  // this.feedbackForm = {
			 //  ...this.feedbackForm,
			 //  commodityId:option.id,
			 //  commodityName:option.name
		  // }
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.backForm.setRules(this.rules);
		},
		mounted(){
			this.userInfo = uni.getStorageSync("userinfo")
			this.getProblemList()
		},
		methods:{
			turnCommodity(){
				// uni.navigateTo({
				//   url: "/pages/commodity/list",
				// });
				uni.hideKeyboard();
				console.log('111111111111111111111111111111')
				this.$u.api.getAllGoods().then(res =>{
					console.log('goodsres----------------------------',res)
					this.goodsList = res.data
					this.goodsArr = res.data
					this.showGoods = true
				})
				// uni.navigateTo({
				// 	url:'/pages/commodity/commodity'
				// })
			},
			// 修改图片
			changePic(file, index) {
				console.log('file---------------------',file)
				this.feedbackForm.attachList = file
			},
			// 搜索数据
			handleSearch(){
				console.log('goods----------------',this.goods)
				if(this.goods == ''){
					this.goodsList = this.goodsArr
				}else{
					let arr = this.goodsArr.filter(item => item.name.includes(this.goods) || item.code.includes(this.goods))
					console.log('arr-------------',arr)
					this.goodsList = arr
				}
				
			},
			// 重置搜索
			handleReset(){
				this.goods = ''
				this.goodsList = this.goodsArr
			},
			// 选择商品
			clickItem(item){
				console.log('item----------------',item)
				this.feedbackForm = {
					...this.feedbackForm,
					commodityName:item.name,
					commodityCode:item.code,
					commodityId:item.id,
					commoditySpecifications:item.specifications,
					commodityModelNum:item.modelNum,
				}
				this.showGoods = false
			},
			// 获取问题类型
			getProblemList(){
				this.$u.api.getProblemType().then(res =>{
					console.log('prores-------------------------',res)
					res.data.map(item =>{
						this.problemTypeArr.push({
							label:item.dictValue,
							value:item.dictKey,
							children:item.children
						})
					})
				}).catch(err =>{
					
				})
			},
			clickProblemType(e){
				console.log('e-----------------',e)
				this.feedbackForm.problemType = e[0].value
				this.feedbackForm.problemTypeName = e[0].label
				// this.problemArr = 
				let tmp = this.problemTypeArr.find(item => item.value == e[0].value)
				console.log('tmp---------------------',tmp)
				this.problemArr = []
				if(tmp && tmp.children){
					tmp.children.map(item =>{
						this.problemArr.push({
							label:item.dictValue,
							value:item.dictKey,
						})
					})
					
				}
			},
			clickProblem(e) {
				this.feedbackForm.problemName = e[0].label
				this.feedbackForm.problemTypeTwo = e[0].value
			},
			getCurrengTime(){
				var now = new Date();
				var year = now.getFullYear();
				var month = (now.getMonth() + 1) < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1 ; // 注意加 1
				var day = now.getDate();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				
				let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
				return time
				
			},
			// 修改图片
			changePic(file, index) {
				console.log('file-------------------------',file)
			    // this.breakdownInfo[index].picAttaches = file
			},
			formSubmit(){
				this.$nextTick(() => {
					this.$refs.backForm.validate(valid => {
						if (valid) {
							console.log('valid----------------',valid)
							let query = {
								// ...this.feedbackForm,
								feedbackTime:this.getCurrengTime(),
								createUser:this.userInfo.user_id, 
								updateUser: this.userInfo.user_id,
								createDept: this.userInfo.dept_id,
								attachList:this.feedbackForm.attachList,
								commodityName:this.feedbackForm.commodityName,
								commodityId:this.feedbackForm.commodityId,
								problemType:this.feedbackForm.problemType,
								// problemTypeTwo:this.feedbackForm.problemTypeTwo,
								problemDescription:this.feedbackForm.problemDescription,
								productionOrderCode:this.feedbackForm.productionOrderCode,
								// erpOrderCode:this.feedbackForm.erpOrderCode,
								customerName:this.feedbackForm.customerName,
								contactPhone:this.feedbackForm.contactPhone,
								// batchCode:this.feedbackForm.batchCode,
								remark:this.feedbackForm.remark
							}
							console.log('query==================',query)
							this.$u.api.addQuality(query).then(res => {
								console.log('res----------',res)
								if (res.code == 200) {
									uni.redirectTo({
									  url: "/pages/home/index",
									});
								} else {
									uni.$u.toast(res.msg);
								}
							}).catch(err=>{
								console.log('err-------',err)
							})
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-css{
		overflow-x: hidden;
		padding: 20rpx;
		background: #fff;
		
		.popup-content {
		  position: relative;
		  background: #fff;
		  box-shadow: 0px, -2px rgba(0, 0, 0, 0.25);
		  position: relative;
		  min-height: 320rpx;
			
			.title_box{
				font-size: 18px;
				width: 100%;
				padding: 32rpx;
				text-align: center;
				top: 0;
				background: #fff;
				position: fixed;
			}
			
			.search_box{
				width: 100%;
				position: fixed;
				background: #fff;
				display: flex;
				top: 92rpx;
				
				/deep/ .u-input{
					height: 70rpx;
				}
				
				/deep/ .u-input__input{
					height: 70rpx;
				}
			}
			
			.list_box{
				width: 100%;
				overflow-y: auto;
				margin-top: 172rpx;
				
				.list_item{
					text-align: center;
					padding: 30rpx 20rpx;
					border-bottom: 1px solid #E8E8E8;
				}
				
			}
		}
	}
</style>