<template>
	<view class="box-container">
		<u-navbar leftIconSize="25px" title="工单填写" :titleStyle="{fontWeight:700}" height="70px" :autoBack="true">
		</u-navbar>
		<view class="entry-info">
			<u-form labelPosition="top" labelWidth="120" :model="sizeForm" :rules="rules" ref="ruleFormRef">
				<u-form-item label="关联客户" :required="true">
					<view v-show="custIdLabel">{{custIdLabel}}</view>
					<u-icon name="close" v-show="custIdLabel" @click="clearCustId" size="15" color="#BFBFBF"
						style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
					<view @tap="custIdShow = true">请选择</view>
				</u-form-item>
				<u-picker @cancel="custIdShow = false" :show="custIdShow" :columns="custIdcolumns"
					keyName="optionText" @confirm="pickerConfirmCustId"></u-picker>
				
				<u-form-item label="工单类型" :required="true">
					<view v-show="issueTypeLabel">{{issueTypeLabel}}</view>
					<u-icon name="close" v-show="issueTypeLabel" @click="clearIssueType" size="15" color="#BFBFBF"
						style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
					<view @tap="issueTypeShow = true">请选择</view>
				</u-form-item>
				<u-picker @cancel="issueTypeShow = false" :show="issueTypeShow" :columns="issueTypecolumns"
					keyName="optionText" @confirm="pickerConfirmIssueType"></u-picker>
				<u-form-item label="工单标题" prop="title" :required="true">
					<u-textarea v-model="sizeForm.title" placeholder="请输入标题" autoHeight></u-textarea>
				</u-form-item>
				<u-form-item label="工单内容" prop="content" :required="true">
					<u-textarea v-model="sizeForm.content" placeholder="请输入内容" count :maxlength="500"></u-textarea>
				</u-form-item>
				<u-form-item label="附件" prop="ossFileDTOList">
					<imgUpload :ossFileDTOList.sync="sizeForm.ossFileDTOList" v-model="sizeForm.ossFileDTOList" />
				</u-form-item>
				<u-form-item label="优先级" :required="true">
					<view v-show="priorityLabel">{{priorityLabel}}</view>
					<u-icon name="close" v-show="priorityLabel" @click="clearPriority" size="15" color="#BFBFBF"
						style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
					<view @tap="priorityShow = true">请选择</view>
				</u-form-item>
				<u-picker @cancel="priorityShow = false" :show="priorityShow" :columns="prioritycolumns"
					keyName="optionText" @confirm="pickerConfirmPriority"></u-picker>

				<u-form-item label="是否为问题件" :required="true">
					<view v-show="isIssueLabel">{{isIssueLabel}}</view>
					<u-icon name="close" v-show="isIssueLabel" @click="clearIsIssue" size="15" color="#BFBFBF"
						style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
					<view @tap="isIssueShow = true">请选择</view>
				</u-form-item>
				<view style="font-size:10px ;color: #C1C1C1;">
					说明：拦截为问题件后，该订单不能做任何操作，请谨慎操作！！！
				</view>
				<u-picker @cancel="isIssueShow = false" :show="isIssueShow" :columns="isIssuecolumns"
					keyName="optionText" @confirm="pickerConfirmIsIssue"></u-picker>
				<u-form-item label="关注人" prop="followDTOList" :required="true">
					<view style="display: flex; flex-wrap: wrap;width: 100%;">
						<view class="avatar" @click="getUserAvatar(1)">
							<u-icon name="plus" color="#1A4F94" size="20"></u-icon>
						</view>
						<view v-for="(item,index) in sizeForm.followDTOList" :key="index" class="userAvatar">
							<image src="@/static/images/common/userAvatar.png" class="img"></image>
							<view style="margin:0 20rpx;">
								{{item.optionText}}
							</view>
							<u-icon name="close" @click="deleteAvatar('1', index)" color="#C5C5C5" size="15"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="处理人" prop="handleIdList" :required="true">
					<view style="display: flex; flex-wrap: wrap;width: 100%;">
						<view class="avatar" @click="getUserAvatar(2)">
							<u-icon name="plus" color="#1A4F94" size="20"></u-icon>
						</view>
						<view v-for="(item,index) in sizeForm.handleIdList" :key="index" class="userAvatar">
							<image src="@/static/images/common/userAvatar.png" class="img"></image>
							<view style="margin:0 20rpx;">
								{{item.optionText}}
							</view>
							<u-icon name="close" @click="deleteAvatar('1', index)" color="#C5C5C5" size="15"></u-icon>
						</view>
					</view>
				</u-form-item>
			</u-form>
			<button type="primary" class="btn" @click="submitData">确认提交</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import store from '@/store/index'
	import Api from '@/api/api.js'
	import imgUpload from '@/components/image-upload.vue'
	export default {
		components: {
			imgUpload,
		},
		onLoad(op) {
			if (op.orderNo) {
				this.sizeForm.busId = op.orderNo
				uni.$on('newPages', (e) => {
					if (e.type == "1") {
						this.sizeForm.followDTOList = e.checkboxList.filter(item => e.followDTOList.includes(item
							.optionValue));
						this.sizeForm.followDTOList.map(item=>{
							item.followerId = item.optionValue
						})
					} else {
						this.sizeForm.handleIdList = e.checkboxList.filter(item => e.followDTOList == item
							.optionValue);
					}

				})


			}
		},

		onUnload() {
			uni.$off('newPages')
		},

		onShow() {
			Api.storge.queryByDictCode({
				"dictCode": "work_issue_type",
				"pageNum": 1,
				"pageSize": 500
			}).then(res => {

				if (res?.data?.records) {
					this.issueTypecolumns = [res.data.records]
				}

			})
			Api.storge.queryByDictCode({
				"dictCode": "work_issue_priority",
				"pageNum": 1,
				"pageSize": 500
			}).then(res => {

				if (res?.data?.records) {
					this.prioritycolumns = [res.data.records]
				}

			})
			Api.storge.queryByDictCode({
				"dictCode": "yes_or_no",
				"pageNum": 1,
				"pageSize": 500
			}).then(res => {

				if (res?.data?.records) {
					this.isIssuecolumns = [res.data.records]
					this.sizeForm.isIssue  = "1"
				}

			})
			Api.storge.queryByDictCode({
				"dictCode": "aaf_cust",
				"pageNum": 1,
				"pageSize": 500
			}).then(res => {
				if (res?.data?.records) {
					this.custIdcolumns = [res.data.records]
				}
			
			})


		},
		data() {
			return {
				sizeForm: {
					ossFileDTOList: [],
					busId: "",
					issueType: "",
					content: "",
					title: "",
					isIssue: "",
					priority: "",
					followDTOList: [],
					handleIdList:[]
				},
				rules: {
					content: {
						type: "string",
						required: true,
						message: '请输入工单内容',
						trigger: ['blur', 'change']
					},
					title: {
						type: "string",
						required: true,
						message: '请输入工单标题',
						trigger: ['blur', 'change']
					},
					followDTOList: {
						type: "array",
						required: true,
						message: '请添加关注人',
						trigger: ['blur', 'change']
					},
					handleIdList: {
						type: "array",
						required: true,
						message: '请添加处理人',
						trigger: ['blur', 'change']
					},

				},
				issueTypeShow: false,
				issueTypeLabel: "",
				issueTypecolumns: [
					[]
				],
				priorityShow: false,
				priorityLabel: "",
				prioritycolumns: [
					[]
				],
				isIssueShow: false,
				isIssueLabel: "是",
				isIssuecolumns: [
					[]
				],
				custIdShow: false,
				custIdLabel: "",
				custIdcolumns: [
					[]
				],
			}
		},

		methods: {
			getUserAvatar(type) {
				if (type == "1") {
					uni.navigateTo({
						url: `/pages/workOrder/userAvatarMul?data=${JSON.stringify(this.sizeForm.followDTOList)}`
					})
				}
				if (type == "2") {
					uni.navigateTo({
						url: `/pages/workOrder/userAvatarSin?data=${JSON.stringify(this.sizeForm.handleIdList)}`
					})
				}
			},
			deleteAvatar(type, index) {
				if (type == "1") {
					this.sizeForm.followDTOList.splice(index, 1);
				}
				if (type == "2") {
					this.sizeForm.handlerIdList.splice(index, 1);
				}
			},
			pickerConfirmIssueType(val) {
				this.sizeForm.issueType = val.value[0].optionValue
				this.issueTypeLabel = val.value[0].optionText
				this.issueTypeShow = false
			},

			clearIssueType() {
				this.sizeForm.issueType = ""
				this.issueTypeLabel = ""
			},
			pickerConfirmPriority(val) {
				this.sizeForm.priority = val.value[0].optionValue
				this.priorityLabel = val.value[0].optionText
				this.priorityShow = false
			},
			clearPriority() {
				this.sizeForm.priority = ""
				this.priorityLabel = ""
			},
			pickerConfirmIsIssue(val) {
				this.sizeForm.isIssue = val.value[0].optionValue
				this.isIssueLabel = val.value[0].optionText
				this.isIssueShow = false
			},
			clearIsIssue() {
				this.sizeForm.isIssue = ""
				this.isIssueLabel = ""
			},
			pickerConfirmCustId(val) {
				this.sizeForm.custId = val.value[0].optionValue
				this.custIdLabel = val.value[0].optionText
				this.custIdShow = false
			},
			clearCustId() {
				this.sizeForm.custId = ""
				this.custIdLabel = ""
			},
			submitData() {
				if (!this.sizeForm.custId) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择关联客户",
					})
					return
				}
				if (!this.sizeForm.issueType) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择工单类型",
					})
					return
				}
				if (!this.sizeForm.priority) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择优先级",
					})
					return
				}
				if (!this.sizeForm.isIssue) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择是否为问题件",
					})
					return
				}
				
				
				this.$refs.ruleFormRef.validate().then(valid => {
					this.sizeForm.handler = this.sizeForm.handleIdList[0].optionValue
					Api.storge.workIssueInsertByPage(this.sizeForm).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: "提交成功",
						})
						uni.navigateBack()
					})
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.box-container {
		.entry-info {
			width: 85%;
			margin: auto;
			margin-top: 230rpx;

			.btn {
				border-radius: 12px;
				font-size: 28rpx;
				margin: 60rpx 0;
				background-color: #1A4F94;
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				background-color: #E8EDF4;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.userAvatar {
				padding: 0px 10px;
				box-sizing: border-box;
				height: 40px;
				background-color: #f1f1f1;
				margin-left: 20rpx;
				border-radius: 63rpx;
				display: flex;
				align-items: center;
				
				font-size: 12px;
				color: #595959;

				.img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

			}
		}
	}
</style>