<template>
	<view class="page-css">
		<u-form
			labelPosition="left"
			labelWidth="120"
			:model="feedbackForm"
			:rules="rules"
			ref="backForm"
		>
			<u-form-item label="工单编号" prop="soCode" borderBottom ref="item1" :required="true">
				<u-input v-model="feedbackForm.soCode"  :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>
			<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>
			<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" >
				<betone-upload  :type="'images'" v-model="feedbackForm.attachList"
				    @changeFile="changePic" >
				</betone-upload>
			</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:[]
				},
				code:'',
				userInfo:{},
				headers:{},
				showGoods:false,
				showProblemType:false,
				problemArr:[],
				problemTypeArr:[],
				showProblem:false,
				formDisabled:false,
				goodsList:[],
				goodsArr:[],
				goods:'',
				rules: {
					problemTypeName: [{
						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"],
					}],
					soCode:[{
						type: "string",
						required: true,
						message: "请输入工单编号",
						trigger: ["blur", "change"],
					}],
					contactPhone:[{
						type: "string",
						required: true,
						message: "请输入联系方式",
						trigger: ["blur", "change"],
					},
					{
					  validator: (rule, value, callback) => {
					    return this.$u.test.mobile(value);
					  },
					  message: '请输入正确的联系方式',
					  trigger: ["change", "blur"]
					},
					]
				},
			}
		},
		onLoad(option){
			console.log('option--------------',option)
			if(option){
				this.code = option.soCode ? option.soCode : ''
				// this.feedbackForm = {
				// 	...this.feedbackForm,
				// 	soCode:option.soCode ? option.soCode : '',
				// 	soId:option.soId ? option.soId : ''
				// }
			}
			
		  // 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()
			if(this.code != ''){
				this.getDetail()
			}
		},
		methods:{
			getDetail(){
				this.$u.api.getOrderDetail({code:this.code}).then(res =>{
					console.log('code res--------------------------',res)
					this.feedbackForm = {
						...this.feedbackForm,
						soCode:res.data.code ? res.data.code : '',
						soId:res.data.id ? res.data.id : ''
					}
				}).catch((err) =>{
					console.log('err------------------------',err)
				})
			},
			// 修改图片
			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,
								problemType:this.feedbackForm.problemType,
								problemDescription:this.feedbackForm.problemDescription,
								soCode:this.feedbackForm.soCode,
								soId:this.feedbackForm.soId,
								customerName:this.feedbackForm.customerName,
								contactPhone:this.feedbackForm.contactPhone,
								remark:this.feedbackForm.remark
							}
							console.log('query==================',query)
							this.$u.api.addQuality(query).then(res => {
								console.log('res----------',res)
								if (res.code == 200) {
									uni.switchTab({
									  url: "/pages/home/feedList",
									});
								} 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>