<template>
	<view class="edit">
		<view class="container">
			<uni-steps :options="stepList" :active="active" />
			<view class="ul">
				<template v-if="active == 0">
					<view class="li">
						<p class="liTitle"><text class="required">*</text>资损发生环节</p>
						<radio-group class="radioList" @change="radioChange">
							<label class="radioBox" v-for="(item, index) in radioList" :key="item.value">
								<view>
									<radio :value="item.value" :checked="index === current" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
					<view class="li">

						<p class="liTitle">板车照片</p>
						<van-uploader>
							<van-button icon="plus" type="info">图片上传</van-button>
						</van-uploader>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
						</view>
					</view>
					<view class="li">
						<p class="liTitle">板车车牌照</p>
						<van-uploader>
							<van-button icon="plus" type="info">图片上传</van-button>
						</van-uploader>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
						</view>
					</view>
				</template>

				<template v-if="active == 3">
					<view class="li">
						<p class="liTitle"><text class="required">*</text>签名:</p>
						<p class="sign" @click="sign">点击签名</p>
					</view>
				</template>
			</view>
			<view class="ul zsInfo">
				<template v-if="active == 1">
					<view class="li">
						<p class="liTitle"><text class="required">*</text>车架号/条形码:</p>
						<uni-easyinput class="inputBox" v-model="carValue" placeholder="请输入"></uni-easyinput>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>船名航次:</p>
						<uni-data-select v-model="shipValue" :localdata="shipList"
							@change="shipChange"></uni-data-select>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>车型:</p>
						<uni-data-select v-model="carModel" :localdata="carList" @change="carChange"></uni-data-select>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>品牌:</p>
						<uni-data-select v-model="brandValue" :localdata="brandList"
							@change="brandChange"></uni-data-select>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>场位:</p>
						<uni-data-select v-model="fieldValue" :localdata="fieldList"
							@change="fieldChange"></uni-data-select>
					</view>
					<view class="li">
						<p class="liTitle"><text class="required">*</text>质损时间:</p>
						<uni-datetime-picker type="datetime" v-model="zsDate" @change="dateChange" />
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>质损货物品类:</p>
						<radio-group @change="radioChange2" class="radioList2">
							<label class="radioBox" v-for="(item, index) in radioList2" :key="item.value">
								<view>
									<radio :value="item.value" :checked="index === current2" />
								</view>
								<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other"
										placeholder="请输入" v-if="showInput2 && item.name == '其他'"></uni-easyinput></view>
							</label>
						</radio-group>
					</view>
					<view class="li imageLi">
						<image src="../../static/images/car1.png"></image>
						<image src="../../static/images/car2.png"></image>
						<image src="../../static/images/car3.png"></image>
						<image src="../../static/images/car4.png"></image>
						<image src="../../static/images/car5.png"></image>
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>资损概况:</p>
						<checkbox-group class="radioList2" @change="checkboxChange">
							<label class="radioBox" v-for="item in checklist" :key="item.value">
								<view>
									<checkbox :value="item.value" :checked="item.checked" />
								</view>
								<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other1"
										placeholder="请输入" v-if="item.name == '其他' && showInput3"></uni-easyinput>
								</view>
							</label>
						</checkbox-group>
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>损伤情况:</p>
						<checkbox-group class="radioList2" @change="checkboxChange2">
							<label class="radioBox" v-for="item in checklist2" :key="item.value">
								<view>
									<checkbox :value="item.value" :checked="item.checked" />
								</view>
								<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other2"
										placeholder="请输入" v-if="item.name == '其他' && showInput4"></uni-easyinput>
								</view>
							</label>
						</checkbox-group>
					</view>
					<view class="li zsLi">
						<p class="liTitle"><text class="required">*</text>处置情况:</p>
						<checkbox-group class="radioList2" @change="checkboxChange3">
							<label class="radioBox" v-for="item in checklist3" :key="item.value">
								<view>
									<checkbox :value="item.value" :checked="item.checked" />
								</view>
								<view class="boxInfo">{{item.name}}<uni-easyinput class="inputBox" v-model="other3"
										placeholder="请输入" v-if="item.name == '其他' && showInput5"></uni-easyinput>
								</view>
							</label>
						</checkbox-group>
					</view>
				</template>

				<template v-if="active == 2">
					<view class="li tpLi">
						<p class="liTitle">资损照片</p>
						<van-uploader>
							<van-button icon="plus" type="info">图片上传</van-button>
						</van-uploader>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
						</view>
					</view>
					<view class="li tpLi">
						<p class="liTitle">车架号图片</p>
						<van-uploader>
							<van-button icon="plus" type="info">图片上传</van-button>
						</van-uploader>
						<view class="picture">
							<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
						</view>
					</view>
				</template>
			</view>

			<view class="btnList">
				<van-button type="default" @click="cancel">取消</van-button>
				<van-button type="default" @click="back" v-if="active > 0">上一步</van-button>
				<van-button type="default" @click="next" v-if="active < 3">下一步</van-button>
				<van-button type="info" @click="save" v-if="active == 3">提交</van-button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "monEdit",
		data() {
			return {
				active: 0,
				stepList: [{
						title: '基本信息'
					},
					{
						title: '质损信息'
					},
					{
						title: '质损图片'
					},
					{
						title: '签字'
					}
				],
				// 基本信息
				radioList: [{
						value: "1",
						name: "收车交接"
					},
					{
						value: "2",
						name: "卸船（舱内）"
					}, {
						value: "3",
						name: "卸船（场地）"
					}, {
						value: "4",
						name: "移车"
					}, {
						value: "5",
						name: "交接检查"
					}, {
						value: "6",
						name: "查验"
					}, {
						value: "7",
						name: "巡场"
					}, {
						value: "8",
						name: "提货交接"
					}, {
						value: "9",
						name: "装船（舱内）"
					}, {
						value: "10",
						name: "装船（场地）"
					}, {
						value: "11",
						name: "装船（场地）"
					}, {
						value: "12",
						name: "理货"
					}, {
						value: "13",
						name: "退关"
					}, {
						value: "14",
						name: "退运"
					}, {
						value: "15",
						name: "直装"
					}, {
						value: "16",
						name: "客户反馈"
					}, {
						value: "17",
						name: "其他"
					},
				],
				current: "",

				// 质损信息
				carValue: "", // 车架号
				shipValue: "", // 船名
				shipList: [{
						value: 0,
						text: "船名0"
					},
					{
						value: 1,
						text: "船名1"
					},
					{
						value: 2,
						text: "船名2"
					},
				],
				carModel: "", // 车型
				carList: [{
						value: 0,
						text: "车型0"
					},
					{
						value: 1,
						text: "车型1"
					},
					{
						value: 2,
						text: "车型2"
					},
				],
				brandValue: "", // 品牌
				brandList: [{
						value: 0,
						text: "品牌0"
					},
					{
						value: 1,
						text: "品牌1"
					},
					{
						value: 2,
						text: "品牌2"
					},
				],
				fieldValue: "", // 场位
				fieldList: [{
						value: 0,
						text: "场位0"
					},
					{
						value: 1,
						text: "场位1"
					},
					{
						value: 2,
						text: "场位2"
					},
				],
				zsDate: "", // 质损时间
				radioList2: [{
						value: "1",
						name: "商品车"
					},
					{
						value: "2",
						name: "特种车"
					},
					{
						value: "3",
						name: "备件/件杂货"
					},
					{
						value: "4",
						name: "其他"
					}
				],
				showInput2: false,
				current2: "",
				other: "", // 质损货物品类其他
				checkValue: [], // 资损概况多选框选中
				checklist: [{ // 资损概况多选框
						value: "1",
						name: "碰撞",
					},
					{
						value: "2",
						name: "追尾",
					},
					{
						value: "3",
						name: "短装/卸",
					},
					{
						value: "4",
						name: "其他",
					}
				],
				showInput3: false,
				other1: "", // 资损概况其他
				checkValue2: [], // 资损概况多选框选中
				checklist2: [{
						value: "1",
						name: "磕伤（点状）",
					},
					{
						value: "2",
						name: "擦伤（面状）",
					}, {
						value: "3",
						name: "划伤（线状）",
					}, {
						value: "4",
						name: "凹陷（凹状）",
					}, {
						value: "5",
						name: "其他",
					}
				],
				showInput4: false,
				other2: "", // 损伤情况其他
				checkValue3: [], // 处置情况多选框选中
				checklist3: [{ // 处置情况多选框
						value: "带伤发运",
						name: "带伤发运",
					},
					{
						value: "取消发运",
						name: "取消发运",
					},
					{
						value: "补装/卸",
						name: "补装/卸",
					}, {
						value: "短装/卸",
						name: "短装/卸",
					},
					{
						value: "其他",
						name: "其他",
					}
				],
				showInput5: false,
				other3: "", // 处置情况其他
			}
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.radioList.length; i++) {
					if (this.radioList[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			radioChange2(evt) {
				for (let i = 0; i < this.radioList2.length; i++) {
					if (this.radioList2[i].value === evt.detail.value) {
						this.current2 = i;
						break;
					}
				}
				if (evt.detail.value == 4) {
					this.showInput2 = true
				} else {
					this.showInput2 = false
				}
			},
			checkboxChange(e) {
				var items = this.checklist,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				newArr.forEach(v => {
					if (v == '其他') {
						this.showInput3 = true
					} else {
						this.showInput3 = false
					}
				})
			},
			checkboxChange2(e) {
				if (e.detail.value == 5) {
					this.showInput4 = true
				} else {
					this.showInput4 = false
				}
				var items = this.checklist2,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist2.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue2 = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				newArr.forEach(v => {
					if (v == '其他') {
						this.showInput4 = true
					} else {
						this.showInput4 = false
					}
				})
			},
			checkboxChange3(e) {
				var items = this.checklist3,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist3.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue3 = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				newArr.forEach(v => {
					if (v == '其他') {
						this.showInput5 = true
					} else {
						this.showInput5 = false
					}
				})
			},
			// 点击签名
			sign() {
				uni.navigateTo({
					url: '/pages/quality/sign'
				})
			},
			// 船名
			shipChange(e) {
				this.shipValue = e
			},
			// 车型
			carChange(e) {
				this.carModel = e
			},
			// 品牌
			brandChange(e) {
				this.brandValue = e
			},
			// 场位
			fieldChange(e) {
				this.fieldValue = e
			},
			// 质损日期
			dateChange(e) {
				this.zsDate = e
			},
			// 上一步
			back() {
				this.active--
			},
			// 下一步
			next() {
				this.active++
			},
			// 取消
			cancel() {
				uni.navigateTo({
					url: '/pages/quality/index'
				})
			},
			// 提交
			save() {},
		}
	}
</script>


<style lang="less" scoped>
	.edit {
		.container {
			padding: 20px 30px;

			/deep/.uni-steps {
				height: 80px;
				justify-content: center;
			}

			/deep/.uni-steps__row-title {
				font-size: 20px;
			}

			/deep/.uni-icons {
				font-size: 32px !important;
			}

			/deep/.uni-steps__row-container {
				margin-top: 14px;
			}

			input::placeholder {
				color: #6a6a6a !important;
			}

			.ul {
				margin-top: 10px;

				.li {
					margin-bottom: 20px;

					.liTitle {
						margin-bottom: 10px;
						font-size: 16px;

						.required {
							color: red;
							margin-right: 5px;
						}
					}

					.radioList {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20px;

						.radioBox {
							display: flex;
							width: 14%;
							margin-top: 10px;
						}
					}
				}

				.picture {
					margin-top: 20px;

					/deep/.file-picker__box {
						width: 120px !important;
						height: 120px !important;
						padding-top: 0;
					}
				}

				.inputBox {
					/deep/.is-input-border {
						width: 345px;
					}
				}

				.sign {
					color: #2979ff;
					line-height: 40px;
					margin-left: 20px;
					font-size: 16px;
				}

			}

			.zsInfo {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.li {
					width: 48%;
					display: flex;

					.liTitle {
						text-align: right;
						width: 120px;
						font-size: 16px;
					}

					/deep/.uni-select {
						background-color: #fff;
						height: 44px;
					}

				}

				.zsLi {
					width: 100%;
					line-height: 36px;

					.liTitle {
						width: 120px;
					}

					.radioList2 {
						display: flex;
					}

					.radioBox {
						display: flex;
						margin-left: 10px;

						.boxInfo {
							display: flex;

							/deep/.is-input-border {
								width: 240px;
							}

							/deep/.uni-easyinput {
								margin-left: 10px;
							}
						}
					}
				}

				.tpLi {
					width: 100%;
					display: block;

					.liTitle {
						text-align: left;
					}
				}

				.imageLi {
					width: 100%;
					flex-wrap: wrap;
					height: 400px;

					image {
						height: auto;
					}

					image:nth-of-type(1) {
						width: 25%;
					}

					image:nth-of-type(2) {
						width: 25%;
					}

					image:nth-of-type(3) {
						width: 50%;
					}

					image:nth-of-type(4) {
						width: 50%;
					}

					image:nth-of-type(5) {
						width: 50%;
					}
				}
			}

			.btnList {
				display: flex;
				justify-content: center;

				/deep/ .van-button {
					margin: 30px 20px;
					width: 120px;
					height: 50px;
				}
			}
		}
	}
</style>