<template>
	<view class="add">
		<!-- 设备信息 -->
		<view class="main">
			<u--form labelPosition="left" labelAlign="center" :model="task" ref="form1">
				<u-form-item label="任务名称" prop="task.name" labelWidth="auto" borderBottom ref="item1">
					<u--text :text="task.name"></u--text>
				</u-form-item>
				<!-- <u-form-item label="创建时间" prop="task.addTime" labelWidth="auto" borderBottom ref="item1" >
							<u--text :text="task.addTime"></u--text>
						</u-form-item> -->
				<u-form-item label="截止时间" prop="task.enableTime" labelWidth="auto" borderBottom ref="item1">
					<u--text :text="task.enableTime"></u--text>
				</u-form-item>
				<u-form-item label="任务照片" prop="task.picUrl" labelWidth="auto" borderBottom ref="item1">
					<image :src="task.picUrl" mode="" style="width: 32px;height: 32px;"
						@click="imgPreview(task.picUrl)"></image>
				</u-form-item>
				<u-form-item label="任务说明" prop="task.remark" labelWidth="auto" borderBottom ref="item1">
					<u--textarea v-model="task.remark" autoHeight disabled="true"></u--textarea>
				</u-form-item>
				<u-form-item label="分配维度" prop="task.dimension" borderBottom @click="showDimension = true; "
					labelWidth="auto" ref="item1">
					<u--input v-model="task.dimension" disabled disabledColor="#ffffff" placeholder="请选择分配维度"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<view v-show="task.dimensionId == 0">
					<u-form-item label="盘点部门" prop="task.dept" borderBottom @click="deptMethod" labelWidth="auto"
						ref="item1">
						<u--input v-model="task.dept" disabled disabledColor="#ffffff" placeholder="请选择盘点部门"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>

				<view v-show="zcUserShow">
				<u-form-item label="资产归属" labelWidth="auto" borderBottom ref="item1">
					<u-checkbox-group>
						<u-checkbox :customStyle="{marginBottom: '8px'}" label='全选' :checked="isAllChecked" @change="allChoose">
					
						</u-checkbox>
					</u-checkbox-group>

					<u-checkbox-group v-model="checkboxValue1"
					    placement="column" @change="checkboxChange" >
						 
					    <u-checkbox
					        :customStyle="{marginBottom: '8px'}"
					        v-for="(item, index) in checkboxList1"
					        :key="item.id"
					        :label="item.name+'：'+item.value"
					        :name="item.id"
							:checked="item.checked"
							@change="choose(item)"
					    >
					    </u-checkbox>
					</u-checkbox-group>

				<!-- 	<u-radio-group v-model="radiovalue1" placement="column">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="item.id" :label="item.name+'：'+item.value" :name="item.id">
						</u-radio>
					</u-radio-group> -->

				</u-form-item>
				
				</view>
				<u-form-item label="盘点人员" prop="task.user" borderBottom @click="showUser = true; " labelWidth="auto"
					ref="item1">
					<u--input v-model="task.user" disabled disabledColor="#ffffff" placeholder="请选择盘点人员" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="盘点数量" prop="task.number" labelWidth="auto" borderBottom ref="item1">
					<u-number-box v-model="number" integer></u-number-box>
				</u-form-item>
			</u--form>
			<u-action-sheet :show="showDimension" :actions="dimensionActions" title="请选择盘点维度"
				@close="showDimension = false" @select="dimensionSelect">
			</u-action-sheet>
			<u-action-sheet :show="showUser" :actions="userActions" title="请选择盘点人员" @close="showUser = false"
				@select="userSelect">
			</u-action-sheet>
			<qianziyu-select :show="showDept" type="checkbox" popupTitle="选择部门" name="name" :dataLists="deptActions"
				placeholder="输入名称搜索" @cancel="showDept=false" @submit="deptSelect">
			</qianziyu-select>
		</view>
		<view class="btn">
			<u-button type="primary" class="submit" @click="submit" text="提 交"></u-button>
			<u-button type="primary" class="submit" @click="done" text="结 束"></u-button>
			
			<u-button type="primary" class="submit" v-if="revokeShow" @click="revoke" text="撤 回"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				task: {
					taskId: null,
					name: '',
					addTime: '',
					enableTime: '',
					picUrl: '',
					remark: '',
					user: '',
					userId: null,
					zcUserIds: '',
					number: 1,
					dept: '',
					deptId: null,
					dimension: '',
					dimensionId: null,
					deptIds: []
				},
				number: 1,
				showUser: false,
				userActions: [],
				checkboxValue1: [],
				checkboxList1: [],
				radiovalue1: '',
				revokeShow: false,
				showDimension: false,
				dimensionActions: [{
						name: '部门',
						value: 0
					},
					{
						name: '人员',
						value: 2
					}
				],
				showDept: false,
				deptActions: [],
				isAllChecked: false,
				zcUserShow: false
			}
		},

		onLoad: function(options) {
			let data = JSON.parse(options.issue);
			this.task = data;
			this.task.taskId = data.id;
			// this.queryTaskUser();
			this.getUsers();
			this.getDept();
			this.task.dimensionId = null
			// this.revokeBtnShow();
		},

		created() {},
		filters: {},

		methods: {
			// 1.1扫码
			scan() {
				var that = this;
				uni.scanCode({
					success: function(res) {
						console.log(res.result);
						that.getdeviceinfo(res.result)
					}
				})
			},
			async queryTaskUser() {
				console.log("taskId=" + this.task.id)
				const { data: res } = await this.$http('/queryTaskUserByTaskId', {
					taskId: this.task.id,
					deptIds: this.task.deptIds ? this.task.deptIds.join(",") : null
				});
				if (res.code) return
				this.checkboxList1 = [];
				for (var i = 0; i < res.data.length; i++) {
					this.checkboxList1.push({
						id: res.data[i].id,
						name: res.data[i].deptName+"-"+res.data[i].nickName,
						value: res.data[i].zcValue,
						disabled: false
					});
				}
				this.zcUserShow = true;
			},
			async getUsers() {
				const {
					data: res
				} = await this.$http('/peopleList', {});
				if (res.code) return
				this.userActions = [];
				for (var i = 0; i < res.data.length; i++) {
					this.userActions.push({
						// name: res.data[i].deptName+" - "+res.data[i].ksName+" - "+res.data[i].nickName,
						name: res.data[i].deptName + " - " + res.data[i].nickName,
						value: res.data[i].id
					})
				}
			},
			checkboxChange(n) {
				// console.log('change', n);
			},
			refresh() {
				this.task.user = '';
				this.task.userId = null;
				// this.checkboxValue1=[];
				this.radiovalue1 = '';
				this.number = 1;
				this.queryTaskUser();
			},
			userSelect(e) {
				this.task.user = e.name
				this.task.userId = e.value
				this.$refs.form1.validateField('task.user')
			},
			async revokeBtnShow() {
				const {
					data: res
				} = await this.$http('/hasTaskDetails/' + this.task.taskId, {});
				if (res.code == 0) {
					if (res.data == 0 && this.task.status == 1) {
						this.revokeShow = true;
					}
				}
			},
			revoke() {

			},
			submit() {
				// if(this.task.user==null || this.task.user=='' || this.checkboxValue1.length == 0 || this.radiovalue1 == ''){
				if (this.task.user == null || this.task.user == '' ||
					this.checkboxValue1.length == 0 || this.number == null || this.number == '' || this.number == 0) {
					return uni.showToast({
						title: '请补充任务内容',
						icon: 'error'
					})
				}
				this.task.number = this.number;
				this.task.zcUserIds = this.checkboxValue1.join(",");
				// this.task.zcUserIds = this.radiovalue1;
				this.addTask();

			},
			async done(){
				const {data: res} = await this.$http('/finishIusseTask/'+this.task.taskId, {});
				if(res.code) return
				uni.navigateBack({ delta: 1 });
			},
			async addTask() {
				const {
					data: res
				} = await this.$http('/addTaskDetail', this.task);
				if (res.code == 0) {
					uni.showToast({
						title: '分配成功',
						icon: 'success'
					});
					this.refresh();
				}
			},
			imgPreview(url) {
				uni.previewImage({
					loop: true,
					urls: [url]
				})
			},
			dimensionSelect(e) {
				this.task.dimension = e.name
				this.task.dimensionId = e.value
				this.$refs.form1.validateField('task.dimension');
				
				this.zcUserShow = false;
				this.isAllChecked = false;
				this.task.deptIds = [];
				this.task.dept = '';
				
				if(e.value == 2){
					this.queryTaskUser()
					this.zcUserShow = true;
				}
			},
			deptMethod() {
				this.showDept = true;
			},
			async getDept() {
				const {
					data: res
				} = await this.$http('/queryTaskDeptByTaskId', {
					taskId: this.task.id
				});
				if (res.code) return
				this.deptActions = [];
				for (var i = 0; i < res.data.length; i++) {
					this.deptActions.push({
						name: res.data[i].deptName,
						value: res.data[i].deptId
					})
				}
			},
			deptSelect(e) {
				var nameArr = [];
				var valueArr = [];
				for (var i = 0; i < e.length; i++) {
					nameArr.push(e[i].name);
					valueArr.push(e[i].value);
				}
				this.task.dept = nameArr.join(",")
				this.task.deptIds = valueArr;
				this.showDept = false;
				console.log(this.task.dept)
				console.log(this.task.deptIds)
				this.queryTaskUser();
				this.isAllChecked = false;
			},// 反选
			choose(item) {
                //先进行取反,改变当前数据的checked状态
				item.checked = !item.checked;
				// 是否全部选中
				let allSelected = this.checkboxList1.every(item => item.checked === true);
				if (allSelected)
					this.isAllChecked = true;
				else
					this.isAllChecked = false;
			},
 
            //  全选
			allChoose() {
				this.checkboxValue1=[]
				this.isAllChecked = !this.isAllChecked;
				this.checkboxList1.map(item => {
					item.checked = this.isAllChecked
					if(this.isAllChecked){
						this.checkboxValue1.push(item.id)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.add {
		background: #f6f6f6;
		padding: 2.667vw;
		height: 100vh;

		.main {
			background: #ffffff;
			margin-bottom: 2.667vw;
			padding: 2vw;
			border-radius: 8px;

			.u-form-item__body__right {
				padding-left: 20vw;
			}

			.submit {
				position: absolute;
				bottom: 10vw;
				width: 100%;
			}
		}
		.btn{
			.u-button{
				margin-bottom: 10px;
			}
		}
	}

	.u-popup {
		.title {
			margin: 1vh 0 0 0;
			text-align: center;
		}

		.u-button {
			justify-content: center !important;
		}

		.u-checkbox {
			margin-bottom: 16px;
		}
	}
</style>
