<template>
	<div>
		<uni-nav-bar title="面料修正" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
				<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
			</view>
			<view slot="right" @tap="$utils.open(`/pages/index/index`)">
				<span style="color: #FFFFFF;">返回</span>
			</view>
		</uni-nav-bar>
		<view class="container">
			<view style="display: flex; padding: 4px; height: 50px">
				<view style="width: 90px">喷印日期:</view>
				<view @click="showDate = true">{{ SprayPrintDate ? SprayPrintDate : '点此选择时间' }}
				</view>
				<u-picker mode="time" end-year="2030" v-model="showDate" :params="params" @confirm="confirmEnd">
				</u-picker>
			</view>
			<view style="display: flex; padding: 4px; height: 50px">
				<view style="width: 90px">喷印人员:</view>
				<view @click="showSelectOne = true">
					{{ printingWorkers ? printingWorkers : '点此选择状态' }}
				</view>
				<u-select v-model="showSelectOne" :default-value="[0]" :list="selectOneList" @cancel="showSelect=false"
					@confirm="selectWorkers"></u-select>
			</view>
			<view style="display: flex; padding: 4px; height: 50px">
				<view style="width: 90px">面料:</view>
				<view @click="showSelectTwo = true">
					{{ fabric ? fabric : '点此选择面料' }}
				</view>
				<u-select v-model="showSelectTwo" :default-value="[0]" :list="selectTwoList" @cancel="showSelect=false"
					@confirm="selectFabric"></u-select>
			</view>
			<view style="display: flex; padding: 4px; height: 50px">
				<view style="width: 90px">供应商:</view>
				<view @click="showSelectThree = true">
					{{ supplier ? supplier : '点此选择供应商' }}
				</view>
				<u-select v-model="showSelectThree" :default-value="[0]" :list="selectThreeList"
					@cancel="showSelect=false" @confirm="selectSupplier"></u-select>
			</view>
			<view style="display: flex; padding: 4px; height: 50px">
				<view style="width: 90px">修正面积:</view>
				<u-input v-model="fixedArea" :type="number" :border="true" />
			</view>
			<view style="display: flex; padding: 4px; height: 50px">
				<view style="width: 90px">修正原因</view>
			</view>
			<view class="wenti-list">
				<view class="list-box" :class="i.active ? 'active' : ''" v-for="(i,index) in whyList" :key="i.type"
					@click="wentiSelect(i,index)">
					{{i.name}}
				</view>
			</view>
			<view>
				<u-input v-model="remark" :type="textarea" placeholder="备注信息" :border="true" :height="100"
					:auto-height="true" />
			</view>
			<my-fixed-button :customClick="true" @click="cfm" text="提交"></my-fixed-button>
		</view>
	</div>
</template>

<script>
	export default {
		name: "xx",
		data() {
			return {
				SprayPrintDate: '',
				params: {
					year: true,
					month: true,
					day: true
				},
				showDate: false,
				showSelectOne: false,
				showSelectTwo: false,
				showSelectThree: false,
				printingWorkers: '',
				printingWorkersId: '',
				fabric: '',
				fabricId: '',
				supplier: '',
				supplierId: '',
				fixedArea: null,
				selectOneList: [],
				selectTwoList: [],
				selectThreeList: [],
				whyList: [{
						type: 1,
						name: "短少",
						active: false
					},
					{
						type: 2,
						name: "抽纱",
						active: false
					},
					{
						type: 3,
						name: "褶皱",
						active: false
					},
					{
						type: 4,
						name: "脏污",
						active: false
					},
					{
						type: 5,
						name: "破洞",
						active: false
					},
					{
						type: 6,
						name: "缩水",
						active: false
					}
				],
				number: 'number',
				textarea: 'textarea',
				remark: '',
			}
		},
		created() {
			this.selectList()
		},
		methods: {
			toDtl(_id) {
				const v = this
				uni.removeStorage({
					key: 'reviewDtl',
					success: function(res) {
						v.$utils.open(`/pages/warehouse/reviewDtl?id=${_id}`)
					},
					fail() {
						v.$utils.open(`/pages/warehouse/reviewDtl?id=${_id}`)
					}
				});

			},
			confirmEnd(e) {
				var endDate = ''
				if (this.params.year) endDate += e.year
				if (this.params.month) endDate += '-' + e.month
				if (this.params.day) endDate += '-' + e.day
				this.SprayPrintDate = endDate
			},
			selectList() {
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/supplier/selectList',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: {
						pageNum: 1,
						pageSize: 9999,
					},
					success: res => {
						this.selectThreeList = res.data.data.map(item => {
							return {
								...item,
								value: item.id,
								label: item.name,
							}
						})
					},
				});
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/material/selectList',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: {
						pageNum: 1,
						pageSize: 9999,
					},
					success: res => {
						this.selectTwoList = res.data.data.map(item => {
							return {
								...item,
								value: item.id,
								label: item.name,
							}
						})
					},
				});
				this.$http.GetUserPageList({
					pageIndex: 1,
					pageSize: 9999,
					takeUser: true
				}).then(res => {
					if (res.code == 0) {
						let list = res.result.list.map(item => {
							return {
								label: item.realName,
								value: item.id
							}
						})
						this.selectOneList = list
					}
				})
			},
			selectWorkers(val) {
				if (val && val.length > 0) {
					this.printingWorkersId = val[0].value
					this.printingWorkers = val[0].label
				}
			},
			selectFabric(val) {
				if (val && val.length > 0) {
					this.fabricId = val[0].value
					this.fabric = val[0].label
				}
			},
			selectSupplier(val) {
				if (val && val.length > 0) {
					this.supplierId = val[0].value
					this.supplier = val[0].label
				}
			},
			wentiSelect(item, index) {
				this.whyList[index].active = !this.whyList[index].active
			},
			cfm() {
				if (!this.SprayPrintDate) {
					this.$msg.showToast('请选择喷印日期')
					return
				}
				if (!this.printingWorkers) {
					this.$msg.showToast('请选择喷印人员')
					return
				}
				if (!this.fabric) {
					this.$msg.showToast('请选择面料')
					return
				}
				if (!this.supplier) {
					this.$msg.showToast('请选择供应商')
					return
				}
				if (!this.fixedArea) {
					this.$msg.showToast('请输入修正面积')
					return
				}
				let data = this.whyList.filter(item => item.active)
				if (!(data && data.length > 0)) {
					this.$msg.showToast('请输入修正原因')
					return
				}
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/correctSave',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: {
						correctTime: this.SprayPrintDate + ' 00:00:00',
						userId: this.printingWorkersId,
						materialId: this.fabricId,
						supplierId: this.supplierId,
						correctArea: this.fixedArea,
						correctReason: data.map(item => {
							return item.type
						}).join(","),
						remarks: this.remark,
					},
					success: res => {
						console.log(res)
						if (res.data.code === 200) {
							this.$msg.showToast(res.data.msg || '操作成功！')
							this.timer = setTimeout(() => {
								this.$utils.back()
							}, 1000)
						} else {
							this.$msg.showToast(res.data.msg)
						}
					},
				});
			}
		},
	}
</script>

<style scoped lang="less">
	.container {
		padding: 20rpx;
		height: calc(100vh - var(--status-bar-height) - 44px);
		overflow: auto;
		padding-bottom: 100rpx;
	}

	.wenti-list {
		overflow: hidden;

		.list-box {

			width: 28%;
			margin: 0 2% 20rpx;
			float: left;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1px solid #DDDCDC;
			border-radius: 10rpx;
		}

		.list-box.active {
			border: 1px solid #1A3AF0;
			background-color: #1A3AF0;
			color: #fff;
		}
	}
</style>
