<template>
	<view class="todo-page">
		<view class="card">
			<uni-card margin="0" :is-shadow="true">
				<u--form labelPosition="left" labelWidth="auto" labelAlign="center" :model="model" :rules="rules"
					ref="wForm" errorType="border-bottom">
					<u-form-item required label="征集目的：" prop="NAME" borderBottom>
						<u--input v-model="model.NAME" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="开始时间" required prop="START_TIME" @click="showCheckDate({ name: 'START_TIME'})">
						<u--input disabledColor="#fff" v-model="model.START_TIME" disabled placeholder="请选择开始时间"
							suffixIcon="arrow-down" suffixIconStyle="font-size:14px" fontSize="14px"
							customStyle="margin:0px;display:flex;padding:3px 9px">
						</u--input>
					</u-form-item>
					<u-form-item label="结束时间" required prop="END_TIME" @click="showCheckDate({name: 'END_TIME'})">
						<u--input disabledColor="#fff" v-model="model.END_TIME" disabled placeholder="请选择结束时间"
							suffixIcon="arrow-down" suffixIconStyle="font-size:14px" fontSize="14px"
							customStyle="margin:0px;display:flex;padding:3px 9px">
						</u--input>
					</u-form-item>
					<u-form-item label="负责人：" prop="Nav_User" borderBottom>
						<u--input v-if="model.Nav_ChargeUser" v-model="model.Nav_ChargeUser.NAME" disabled
							disabledColor="#fff" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="征集人员：">
						<u-icon name="man-add" @click="handleShowUserSelector()" size="24" color="#3d9cff"
							slot="right"></u-icon>
					</u-form-item>
					<view v-if="model.Nav_Users" v-show="!!model.Nav_Users.length" class="tag-view">
						<uni-tag class="tag" v-for="(i, k) in model.Nav_Users.filter(i => !i.IS_DELETED)" :key="k"
							:inverted="true" :text="i.NAME" type="primary" />
					</view>
				</u--form>
			</uni-card>
		</view>
		<u-datetime-picker :show="dateTimePickerInfo.showCheckDate" mode="datetime"
			v-model='dateTimePickerInfo.defaultDateTime' :formatter="formatter" @confirm="handleCheckDate"
			@close="dateTimePickerInfo.showCheckDate = false;"
			@cancel="dateTimePickerInfo.showCheckDate = false;"></u-datetime-picker>
		<people-selector :defaultChecked="peopleSelectOption.defaultChecked" :show="peopleSelectOption.showSelector"
			@select="handleSelectorPeople" @close="peopleSelectOption.showSelector = false">
		</people-selector>
		<view class="bottom-button">
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		extendFilterGroup,
		extendGroupRule,
		extendInclude,
		extendOrder,
		extendRule,
		guid,
		initFilter,
		initFilterGroup
	} from '../../../../utils/common'
	import {
		getRequest,
	} from '../../../../services/apply/FOServices/FOServices';
	import config from '../../../../config/common'
	export default {
		data() {
			return {
				model: {
					ORG_ID: "",
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				rules: {
					'NAME': {
						type: 'string',
						required: true,
						trigger: ['blur', 'change']
					}
				},
				peopleSelectOption: {
					showSelector: false,
					value: null,
					index: 0,
					defaultChecked: []
				},
				dateTimePickerInfo: {
					showCheckDate: false,
					dataIndex: undefined,
					defaultDateTime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM'),
					value: '',
					name: ''
				},
				formatter: null,
				tableKey: '0',
				TaskID: '',
				ORG_ID: uni.getStorageSync('orgId')
			}
		},
		onLoad(option) {
			this.TaskID = option.taskID ? option.taskID : '';
			this.model.ID = option.ID ? option.ID : '';
			this.loadData();
		},
		methods: {
			loadData() {
				const json = initFilter(this.ORG_ID, "", "")
				extendInclude(json, "Nav_Department")
				extendInclude(json, "Nav_User")
				extendInclude(json, "Nav_Users.Nav_User")
				extendInclude(json, "Nav_ChargeUser")
				// TODO: id 未获取
				extendRule(json, 'ID', 1, this.model.ID)
				getRequest(json, "/OG/EmployeeOpinionCollection/Get").then(res => {
					this.model = res
				})
			},
			//人员多选start
			handleShowUserSelector() {
				this.peopleSelectOption = {
					showSelector: true,
					value: this.model,
					defaultChecked: this.model.Nav_Users.map(i => {
						return {
							...i,
							NAME: i.Nav_User.NAME,
							USER_ID: i.Nav_User.ID,
						}
					})
				}
			},
			handleSelectorPeople(e) {
				this.model.Nav_Users = e.map(i => {
					return {
						USER_ID: i.USER_ID,
						ID: i.ID || guid(),
						COLLECTION_ID: this.model.ID,
						ORG_ID: this.ORG_ID,
						IS_DELETED: i.IS_DELETED,
						NAME: i.NAME,
					}
				})
			},
			//人员多选end
			//时间start
			//显示时间控件
			showCheckDate(p) {
				if (p.name === 'START_TIME') {
					if (this.model.START_TIME == null) {
						this.model.START_TIME = uni.$u.timeFormat(new Date(),
							'yyyy-mm-dd hh:MM')
					}
					this.dateTimePickerInfo = {
						showCheckDate: true,
						dataIndex: p.dataIndex,
						defaultDateTime: this.model.START_TIME,
						name: p.name
					}
				} else if (p.name === 'END_TIME') {
					if (this.model.END_TIME == null) {
						this.model.END_TIME = uni.$u.timeFormat(new Date(),
							'yyyy-mm-dd hh:MM')
					}
					this.dateTimePickerInfo = {
						showCheckDate: true,
						dataIndex: p.dataIndex,
						defaultDateTime: this.model.END_TIME,
						name: p.name
					}
				}
			},
			handleCheckDate(e) {
				const {
					name,
					dataIndex
				} = this.dateTimePickerInfo
				if (name === 'START_TIME') {
					this.model.START_TIME = uni.$u.timeFormat(e.value,
						'yyyy-mm-dd hh:MM')
				}
				if (name === 'END_TIME') {
					this.model.END_TIME = uni.$u.timeFormat(e.value,
						'yyyy-mm-dd hh:MM')
				}
				this.dateTimePickerInfo.showCheckDate = false
			},
			//时间end
			submit() {
				const ele = this.$refs
				ele['wForm'].validate().then(res => {
					this.model.PUBLISH = "SaveAndNotify";
					if (this.TaskID != "") {
						this.model.TaskID = this.TaskID;
					}
					if (this.model.ORG_ID == "") {
						this.model.ORG_ID = this.ORG_ID;
					}
					getRequest(this.model, "/OG/OGEmployeeOpinionCollection/FullUpdate").then(res => {
						if (res) {
							uni.$showMsgFunc('操作成功!', () => {
								uni.navigateBack()
							}, 'success', 1000)
						}
					})
				}).catch(err => {
					uni.$showErrorInfo('请检查必填项，必填项不能为空')
				})
			},
		}
	}
</script>

<style scoped>
	@import url("../../../../style/css/editTemplate.css");

	.todo-page {
		padding: 16px 16px 70px;
	}
</style>