<template>
	<view style="background-color: #fff;">
		<uni-row style="margin-bottom: 5px;">
			<uni-col :span="3">
				<u-button type="primary" style="font-size: 24px;" name="logIn" @click="empinput">登 录</u-button>
			</uni-col>
			<uni-col :span="18"></uni-col>
			<uni-col :span="6">
				<view style="position: absolute;right: 0;top:5px;font-size: 22px;">
					{{empName?empName+' 您好！':'请登录！'}}
				</view>
			</uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="12">
				<uni-card :is-shadow="false" is-full>
					<u-cell-group :border="false">
						<u-cell title="工单" :clickable="true" name="pwo" @click="input">
							<u-icon slot="right-icon" size="25" name="edit-pen-fill" label="填写"
								label-pos="bottom"></u-icon>
							<span slot="value" class="value">{{pwoCode}}</span>
						</u-cell>
						<u-cell title="作业编码" :clickable="true" @click="selectJob">
							<u-icon slot="right-icon" size="25" name="list-dot" label="切换" label-pos="bottom"></u-icon>
							<span slot="value" class="value">{{job.code}}</span>
						</u-cell>
						<u-cell title="设备" :clickable="true">
							<u-button slot="right-icon" type="primary" :plain="false" v-if="!job.eqpId"
								@click="eqpInput">上 机</u-button>
							<!-- <u-icon slot="right-icon" size="25" name="edit-pen-fill" label="填写" label-pos="bottom"></u-icon> -->
							<span slot="value" class="value">{{eqpValue}}</span>
						</u-cell>
						<u-cell title="SN" :border="false" :clickable="true" name="sn" @click="input">
							<u-icon slot="right-icon" size="25" name="edit-pen-fill" label="填写"
								label-pos="bottom"></u-icon>
							<span slot="value" class="value">{{snCode}}</span>
						</u-cell>
					</u-cell-group>
				</uni-card>

			</uni-col>
			<!-- 			<uni-col :span="2">
				<u-line direction="col" length="50px"></u-line>
			</uni-col> -->
			<uni-col :span="12">
				<uni-card :is-shadow="false" is-full>
					<u-cell-group :border="false">
						<u-cell title="物料编码">
							<span slot="value" class="value">{{job.ptNoTar}}</span>
							<u-button slot="right-icon" type="primary" @click="report" :plain="false">报 工</u-button>
						</u-cell>
						<u-cell title="物料名称">
							<span slot="value" class="value">{{job.ptTitleTar}}</span>
						</u-cell>
						<u-cell title="工序名称">
							<span slot="value" class="value">{{job.opTitle}}</span>
						</u-cell>
						<u-cell title="作业数量" :border="false">
							<span slot="value" class="value">{{job.planNum}}</span>
						</u-cell>
					</u-cell-group>
				</uni-card>
			</uni-col>
		</uni-row>
		<uni-row>
			<u-divider text="数据采集进度" textSize="20"></u-divider>
			<u-line-progress :percentage="80" inactiveColor="" height="20"></u-line-progress>
		</uni-row>
		<!-- 		<u-picker style="width: 80%;" :show=" showMenu" @close="Menuclose" @confirm="confirm" @cancel="cancel"
			:columns="columns" :closeOnClickOverlay="true"></u-picker> -->
		<u-action-sheet :actions="columns" @select="confirm" cancelText="取消" @close="cancel" title="请选择模式"
			:show="showMenu" :closeOnClickOverlay="true"></u-action-sheet>
		<view>
			<!-- 输入框 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" :title="'输入'+title"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="selectDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="关闭" confirmText="确定" title="请选择作业" @confirm="dialogConfirm"
					@close="dialogClose">
					<u-radio-group v-model="job" iconPlacement="right" :borderBottom="true" placement="column">
						<u-radio v-for="(item, index) in jobList" :customStyle="{marginBottom: '16px'}" :name="item"
							:key="index" labelSize="20" :label="item.name"></u-radio>
					</u-radio-group>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		updatePwoJob,
		listEquipment,
		getEquipment,
		getPwoJob,
		listPwoJob
	} from "@/api/mes/jobReport.js"
	import {
		listEmployee,
	} from "@/api/mes/jobIn.js"
	export default {
		data() {
			return {
				showMenu: false,
				// columns: [
				// 	['常规功能', 'MES智能终端']
				// ],
				columns: [{
						name: '常规功能',
						path: '/pages/work/index'
					},
					{
						name: 'MES智能终端',
						path: '/pages/work/mesIT'
					},
				],
				empName: null,
				title: null,
				pwoCode: null,
				jobCode: null,
				eqpValue: null,
				snCode: null,
				//作业列表
				jobList: [],
				radiovalue: null,
				//作业信息
				job: []
			}
		},
		methods: {
			//根据点击的cell来赋值title
			input(e) {
				console.log(e)
				if (e.name == 'pwo') {
					this.title = '工单'
				}
				if (e.name == 'sn') {
					this.title = 'SN'
				}
				this.$refs.inputDialog.open()
			},
			empinput() {
				this.title = '人员编码'
				this.$refs.inputDialog.open()
			},
			eqpInput() {
				this.title = '设备编码';
				this.$refs.inputDialog.open()
			},
			//输入框确认按钮
			dialogInputConfirm(val) {
				//根据标题进入相应的逻辑运算
				if (val && this.title == '工单') {
					uni.showLoading({
						title: '正在跳转中'
					})
					setTimeout(() => {
						uni.hideLoading()
						this.pwoCode = val
						this.getJobByPwo(val);
						// 关闭窗口后，恢复默认内容
						this.$refs.inputDialog.close()
						this.$refs.selectDialog.open()
					}, 1000)
				} else if (val && this.title == 'SN') {
					uni.showLoading()
					setTimeout(() => {
						uni.hideLoading()
						this.snCode = val
						// 关闭窗口后，恢复默认内容
						this.$refs.inputDialog.close()
					}, 1000)
				} else if (val && this.title == '人员编码') {
					uni.showLoading({
						title: '正在绑定中'
					});
					setTimeout(() => {
						uni.hideLoading()
						this.empCode = val;
						listEmployee({
							empCode: val
						}).then(res => {
							if (res.total > 0) {
								this.empName = res.rows[0].name;
								this.$refs.inputDialog.close()
							} else {
								this.$modal.msgError("未查询到相关人员，请重新输入！");
							}
						})
					}, 1000)
				} else if (val && this.title == '设备编码') {
					uni.showLoading();
					setTimeout(() => {
						uni.hideLoading()
						//根据设备编码来获取设备id
						listEquipment({
							equipmentCode: val
						}).then(async res => {
							if (res.total > 0) {
								this.job.eqpId = res.rows[0].id;
								this.eqpValue = res.rows[0].equipmentCode + ':' + res.rows[0]
									.equipmentTitle
								updatePwoJob(this.job).then(res => {
									this.$modal.msgSuccess("作业上机成功！");
								});
								this.$refs.inputDialog.close()
							} else {
								this.$modal.msgError("未查询到该设备信息！");
							}
						});
					}, 1000)
				} else {
					this.$modal.msgError("请输入" + this.title);
				}
			},
			//根据输入的工单获取作业信息
			async getJobByPwo(val) {
				await listPwoJob({
					pwoCode: val
				}).then(res => {
					this.jobList = res.rows.map(item => {
						item.name = item.code;
						item.disabled = false;
						return item;
					});
				})
			},
			//打开选择作业弹框
			selectJob() {
				this.$refs.selectDialog.open()
			},
			//选择作业弹框的确认按钮，存入job信息，赋值设备信息
			dialogConfirm() {
				if (this.job) {
					this.eqpValue = null;
					if (this.job.eqpId) {
						getEquipment(this.job.eqpId).then(async res => {
							this.eqpValue = res.data.equipmentCode + ':' + res.data.equipmentTitle
						})
					}
					this.$refs.selectDialog.close()
				}
			},
			//作业选择弹框关闭
			dialogClose() {
				this.$refs.selectDialog.close()
			},
			//报工弹框
			report() {

			},
			//模式选择弹框关闭
			Menuclose() {
				this.showMenu = false
			},
			//模式选择弹框确认
			confirm(e) {
				console.log(e)
				// if (e.value == '常规功能') {
				// 	this.$tab.reLaunch('/pages/work/index');
				// } else if (e.value == 'MES智能终端') {
				// 	this.$tab.reLaunch('/pages/work/mesIT');
				// }
				this.$tab.reLaunch(e.path);
			},
			//模式选择弹框取消
			cancel() {
				this.showMenu = false
			},
			//获取模式选择点击事件
			onNavigationBarButtonTap(e) {
				console.log(e)
				this.showMenu = !this.showMenu;
			},
		}
	}
</script>

<style lang="scss">
	::v-deep .u-cell__body__content {
		flex: 0.5;
	}

	::v-deep .u-cell__title-text {
		font-size: 24px !important;
		font-weight: 900;
	}

	::v-deep .u-cell__body {
		padding: 5px 15px;
		height: 50px;
	}

	::v-deep .u-line-progress__text {
		font-size: 18px;
		margin-right: 20px;
	}

	::v-deep .u-line-progress {
		margin: 10px;
	}

	::v-deep .uni-popup-dialog {
		width: 500px;
	}


	::v-deep .uni-dialog-input {
		font-size: 20px
	}

	::v-deep .u-cell__right-icon-wrap {
		position: absolute;
		right: 80px;
	}

	.u-reset-button {
		background-color: #3c9cff;
		font-size: 20px;
		color: #fff;
		width: 80px;
		height: 40px;
		// margin-left: 10px;
	}

	.value {
		font-size: 22px
	}

	.radio-group-wrapper {
		max-height: 200px;
		/* 设置最大高度，超过该高度将显示滚动条 */
		overflow-y: auto;
		/* 仅在内容溢出时显示垂直滚动条 */
		width: 100%;
	}

	@media screen and (min-width: 600px) and (orientation:landscape) {
		::v-deep .u-cell__title-text {
			font-size: 24px;
			font-weight: 900;
		}

	}
</style>