<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" title="故障信息"
			@clickLeft="back">
		</uni-nav-bar>
		<u-cell-group>

			<u-cell title="故障类型" arrow-direction="down">
				<uni-data-picker v-model="form.type" slot="value" placeholder="请选择" :localdata="typeOptions"
					@change="sourceCodeOnchange">
				</uni-data-picker>
			</u-cell>
			<u-cell title="故障现象" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.faultPhenomenon"></u--input>
			</u-cell>
			<u-cell title="故障原因" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.faultReason"></u--input>
			</u-cell>
			<u-cell title="维修过程" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.maintenanceProcess"></u--input>
			</u-cell>

			<view class="footerButton">
				<u-button type="default" text="返回" @click="back"></u-button>
				<u-button type="primary" @click="save" text="保存"></u-button>
			</view>
		</u-cell-group>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				form: {
					type: '',
					faultPhenomenon: '',
					faultReason: '',
					maintenanceProcess: '',
				},
				type: '',
				infoIdx:'',
				typeOptions: [{
						text: '维修',
						value: '1'
					},
					{
						text: '保养',
						value: '2'
					},
					{
						text: '安装',
						value: '3'
					}
				],
			}
		},

		async onLoad(data) {
			this.infoIdx = data.index;
			this.type = data.type
			if (data.data) {
				this.form = JSON.parse(data.data)
			}
		},
		methods: {
			save() {
				if (!this.form.type) {
					this.$refs.uToast.show({
						type: "warning",
						message: "故障类型不能为空",
					})
					return
				}
				if (!this.form.faultPhenomenon) {
					this.$refs.uToast.show({
						type: "warning",
						message: "故障现象不能为空",
					})
					return
				}
				uni.$emit('updateFaultList', {
				data: this.form,
				type: this.type,
				index:this.infoIdx
				})
				this.back()
			},
			sourceCodeOnchange(e){
				console.log(e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell__body__content {
		flex: none;
		margin-right: 16rpx;
	}

	.mainBox {
		padding-bottom: 84rpx;
	}

	.footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;

		}
	}

	// /deep/.u-button {
	// 	height: 100%;
	// }

	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}
</style>