<template>
	<u-modal width="90%" @confirm="submitIpqc" v-model="visable" :showConfirmButton="true" :showCancelButton="true" title="请填写检验单" content="操作内容" @cancel="close">
	  <u-form ref="qcForm" label-width="90px" class="addForm">
	    <u-row>
	      <u-col span="4">
	        <u-form-item label="工单编码">
	          <SearchInput v-model="qcForm.workorderCode" placeholder="请输入工单编码" hassearchbtn="true" @serach="searchTask" />
	        </u-form-item>
	      </u-col>
				<u-col span="4">
					<u-form-item label="编排编码">
						<SearchInput v-model="qcForm.arrangeCode" placeholder="请输入编排编码" hassearchbtn="true" @serach="searWorkorder" />
					</u-form-item>
				</u-col>
				<u-col span="4">
					<u-form-item label="工序名称">
						<uni-data-select v-model="qcForm.processId" :localdata="processList" @change="changeprocess"></uni-data-select>
					</u-form-item>
				</u-col>
	      <u-col span="3">
	        <u-form-item label="检验单名称" label-width="90px">
	          <u-input v-model="qcForm.ipqcName" placeholder="请输入检验单名称"></u-input>
	        </u-form-item>
	      </u-col>
	    </u-row>
	    <u-row>
	      <u-col span="4">
	        <u-form-item label="检测数量" prop="quantityCheck">
	          <u-number-box disabled v-model="qcForm.quantityCheck"></u-number-box>
	        </u-form-item>
	      </u-col>
	      <u-col span="4">
	        <u-form-item label="合格数量" prop="quantityQualified">
	          <u-number-box v-model="qcForm.quantityQualified" @change="handleChangeQuantityCheck"></u-number-box>
	        </u-form-item>
	      </u-col>
	      <u-col span="4">
	        <u-form-item label="不合格数量" prop="quantityUnqualified">
	          <u-number-box v-model="qcForm.quantityUnqualified" @change="handleChangeQuantityCheck"></u-number-box>
	        </u-form-item>
	      </u-col>
	    </u-row>
	    <u-row>
	      <u-col span="4">
	        <u-form-item label="检测人员" prop="inspectorNickName">
	          <u-input disabled v-model="qcForm.inspectorNickName"></u-input>
						<u-button @tap="userTempVisible=true" type="success" size="mini">选择人员</u-button>
	        </u-form-item>
	      </u-col>
	    </u-row>
	  </u-form>
	   <view class="line-content-item">
	      <uni-table ref="qcLineTable" class="line-table" border stripe :loading="loading" emptyText="未查询到数据">
	        <uni-tr>
	          <uni-th width="100px" align="center">质检项目</uni-th>
	          <uni-th width="100px" align="center">检验要求</uni-th>
	          <uni-th width="150px" align="center">检验结果</uni-th>
	        </uni-tr>
	        <uni-tr v-for="(line, index) in qcLines" :key="index + 'index'">
	          <uni-td align="center">{{ line.indexName }}</uni-td>
	          <uni-td align="center">{{ line.checkMethod }}</uni-td>
	          <uni-td width="150px" align="center">
	            <uni-data-checkbox v-if="line.inputType == 2" multiple v-model="line.qualityCheckResults" :localdata="line.selectValues"></uni-data-checkbox>
	            <uni-easyinput v-else v-model="line.qualityCheckResults"></uni-easyinput>
	          </uni-td>
	        </uni-tr>
	        <uni-tr v-for="(line, index) in qcAddList" :key="index + 'add'">
	          <uni-td align="center">
	            <view style="display:flex;">
	              <u-input disabled v-model="line.indexName" placeholder="选择质检项目"></u-input>
	              <u-button @tap="zjVisible = true, qcAddIndex = index" type="success" size="mini">选择质检项目</u-button>
	            </view>
	          </uni-td>
	          <uni-td align="center"></uni-td>
	          <uni-td width="150px" align="center">
	            <uni-easyinput v-model="line.qualityCheckResults"></uni-easyinput>
	          </uni-td>
	        </uni-tr>
	      </uni-table>
	    </view>
			<u-modal
			  title="选择人员"
			  @confirm="userDetermine()"
			  show-cancel-button
			  :title-style="{ 'background-color': '#1E3770', color: '#FFFFFF', 'line-height': '37px', 'padding-top': '0px' }"
			  v-model="userTempVisible"
			  width="1300rpx"
			>
			  <view class="feedback-card">
			    <User ref="userRef" v-if="userTempVisible" />
			  </view>
			</u-modal>
	</u-modal>
</template>

<script>
	import UniEasyinput from '../../../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import UButton from '../../../../uview-ui/components/u-button/u-button.vue';
	import SearchInput from '@/components/ScanInput/index.vue';
	import User from '@/components/User/User.vue';
	export default {
		components: {
			SearchInput,
			User,
			UniEasyinput,
			UButton
		},
		data() {
			return {
				qcForm: {
					workorderCode: '',
					arrangeCode: '',
					processId: '',
					ipqcName: '',
					quantityCheck: 0,
					quantityQualified: 0,
					quantityUnqualified: 0,
					inspectorNickName: '',
					inspector: ''
				},
				Condition: {},
				userTempVisible: false,
				loading: false,
				visable: true,
				qcAddList: [],
				qcLines: [],
				qcAddList: [],
				processList: []
			}
		},
		methods: {
			userDetermine() {
			  this.qcForm.inspectorNickName = this.$refs.userRef.tableSelectData[0]?.nickName;
			  this.qcForm.inspector = this.$refs.userRef.tableSelectData[0]?.userName;
			},
			async changeprocess() {
				const res = await this.$u.api.generateItems({"workorderCode":this.qcForm.workorderCode,"arrangeCode":this.qcForm.arrangeCode,"qcTypes":"PATROL","processId":this.qcForm.processId})
				// const res = await this.$u.api.generateItems({"workorderCode":"","arrangeCode":"BP24531002","qcTypes":"PATROL","processId":389})
				if (res.code === 200) {
					console.log(res.data)
					this.qcLines = res.data.map((item) => {
					  let selectValues = item.selectValues;
					  let qualityCheckResults = item.qualityCheckResults;
					  if (item.inputType == 2) {
					    // selectValues = selectValues? JSON.parse(item.selectValues) : []
					    if (selectValues) {
					      const data = JSON.parse(item.selectValues);
					      selectValues = data.map((item) => {
					        return {
					          text: item.name,
					          value: item.name
					        };
					      });
					    } else {
					      selectValues = [];
					    }
					    qualityCheckResults = qualityCheckResults ? JSON.parse(item.qualityCheckResults) : [];
					  }
					  return {
					    ...item,
					    selectValues,
					    qualityCheckResults
					  };
					});
				}
			},
			handleChangeQuantityCheck(e) {
				console.log('sadasdas', e)
			  const sum = this.qcForm.quantityQualified + this.qcForm.quantityUnqualified;
			  this.$set(this.qcForm, 'quantityCheck', sum);
			},
			handleAddFirstEdit() {
			  this.qcAddList.push({
			    indexName: '',
			    qualityCheckResults: ''
			  })
			},
			async searchTask(val) {
				const res = await this.$u.api.getQcCondition({
				  workorderCode: val,
					arrangeCode: this.qcForm.arrangeCode
				});
				if (res.code === 200) {
				  if (!res.data) {
				    this.$u.toast('暂未查询到工序信息！');
				  }
					this.Condition = res.data
					this.qcForm.workorderCode = res.data.workorderCode
					this.qcForm.arrangeCode = res.data.arrangeCode
					if(res.data.processList && res.data.processList.length > 0){
						this.processList = res.data.processList.map(v=>({text: v.processName, value: v.processId, code: v.processCode, workstationCode: v.workstationCode, workstationId: v.workstationId, workstationName: v.workstationName}))
					}
				}
			},
			async searWorkorder(val) {
			  const res = await this.$u.api.getQcCondition({
			    workorderCode: this.qcForm.workorderCode,
					arrangeCode: val
			  });
			  if (res.code === 200) {
			    if (!res.data) {
			      this.$u.toast('暂未查询到工序信息！');
			    }
					this.Condition = res.data
					this.qcForm.workorderCode = res.data.workorderCode
					this.qcForm.arrangeCode = res.data.arrangeCode
					if(res.data.processList && res.data.processList.length > 0){
						this.processList = res.data.processList.map(v=>({text: v.processName, value: v.processId, code: v.processCode, workstationCode: v.workstationCode, workstationId: v.workstationId, workstationName: v.workstationName}))
					}
			  }
			},
			submitIpqc() {
				if(!this.qcForm.processId) {
					this.$u.toast('请输入工单编码或编排编码并选择工序！');
					return;
				}
				const item = this.processList.find(v=>v.value === this.qcForm.processId)
				this.$emit('confirm', {
					...this.Condition,
					...this.qcForm,
					processCode: item.code,
					processName: item.text,
					workstationCode: item.workstationCode, 
					workstationId: item.workstationId, 
					workstationName: item.workstationName,
					qcLines: this.qcLines
				})
			},
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style>
	.line-content-item {
	  width: 100%;
	  height: 300px;
	  display: flex;
	  flex-wrap: nowrap;
	}
	.line-table {
	  display: inline-block;
	}
	.addForm {
		padding: 0 10px;
	}
</style>