<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 label="征集目的：" prop="NAME" borderBottom>
						<u--input v-model="model.NAME" disabled disabledColor="#fff" border="none"
							inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="征集开始时间：" prop="START_TIME" borderBottom>
						<u--input v-model="model.START_TIME" disabled disabledColor="#fff" border="none"
							inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="征集结束时间：" prop="END_TIME" borderBottom>
						<u--input v-model="model.END_TIME" disabled disabledColor="#fff" border="none"
							inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="征集部门：" prop="Nav_Department" borderBottom>
						<u--input v-if="model.Nav_Department" v-model="model.Nav_Department.NAME" disabled
							disabledColor="#fff" border="none" inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="征集份数：" borderBottom>
						<u--input v-model="count" disabled disabledColor="#fff" border="none"
							inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="回收份数：" borderBottom>
						<u--input v-model="feedback" disabled disabledColor="#fff" border="none"
							inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="回收比例：" borderBottom>
						<u--input v-model="rate" disabled disabledColor="#fff" border="none"
							inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="参与人员：" prop="Nav_User" borderBottom>
					</u-form-item>
					<rich-text v-html="strUserName"></rich-text>
				</u--form>
			</uni-card>
		</view>
		<u-sticky offset-top="20">
			<view class="sub-form">
				<view class="sub-form-wrap">
					<u--form labelPosition="left" labelWidth="auto" labelAlign="center" errorType="border-bottom"
						ref="sForm">
						<u-collapse :border="false" accordion>
							<uni-card style="margin-bottom: 16px;" margin="0" spacing="0" :is-shadow="false"
								v-if="model.Nav_Users" v-for="(item, index) in opinions">
								<u-collapse-item
									:title="(index + 1) + '. ' +getUserName(item)+': '+ item.OPINION_CONTENT">
									<u-form-item label="受理意见：" prop="DESC" borderBottom>
										<u-subsection activeColor="#0eacf5" mode="subsection" :list="list"
											:current="item.RESULT" @change="sectionChange($event,item)"></u-subsection>
									</u-form-item>
									<u-form-item label="不认可解释：" prop="DESC" borderBottom>
									</u-form-item>
									<u-textarea v-model="item.REFUSE_DESCRIPTION" placeholder="请输入不认可解释"
										:disabled="isAudit"></u-textarea>
								</u-collapse-item>
							</uni-card>
						</u-collapse>
					</u--form>
				</view>
			</view>
		</u-sticky>
		<view class="bottom-button">
			<button type="primary" @click="submit" v-if="!isAudit">提交</button>
			<button type="primary" @click="confirm" v-if="isAudit">确认</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: "",
					Nav_Users: []
				},
				rules: {
					'JOB_CONTENT': {
						type: 'string',
						required: true,
						trigger: ['blur', 'change']
					}
				},
				tableKey: '0',
				TaskID: '',
				ORG_ID: uni.getStorageSync('orgId'),
				list: ['不认可', '认可'],
				opinions: [],
				map: [],
				count: 0,
				feedback: 0,
				rate: "",
				strUserName: "",
				isAudit: false,
			}
		},
		onLoad(option) {
			this.TaskID = option.taskID ? option.taskID : '';
			this.model.ID = option.ID ? option.ID : '';
			this.loadData();
		},
		methods: {
			sectionChange(index, item) {
				if (this.isAudit) {
					return
				}
				item.RESULT = index;
			},
			loadData() {
				const json = initFilter(this.ORG_ID, "", "")
				extendInclude(json, "Nav_User")
				extendInclude(json, "Nav_Department")
				extendInclude(json, "Nav_Users.Nav_User")
				extendInclude(json, "Nav_Users.Nav_Opinions")
				// TODO: id 未获取
				extendRule(json, 'ID', 1, this.model.ID)
				getRequest(json, "/OG/EmployeeOpinionCollection/Get").then(res => {
					let map = {};
					let opinions = [];
					let opinion_user_map = {};
					res.Nav_Users.forEach((it, idx) => {
						map[it.ID] = idx;
					})
					res.Nav_Users.filter(t => t.STATUS !== 0).forEach((it, idx) => {
						it.Nav_Opinions.forEach((op, idx) => {
							opinions.push(op);
							opinion_user_map[op.ID] = op;
						})
					})
					let strUserName = '';
					if (res.Nav_Users && res.Nav_Users.length > 0) {
						for (let i = 0; i < res.Nav_Users.length; i++) {
							if (res.Nav_Users[i].STATUS == 0) {
								strUserName += (strUserName.length > 0 ? " " : "") +
									"<view style='color:#E35D58;background-color:rgba(227,93,88,0.2);padding:5px;line-height:30px;white-space:nowrap;'>" +
									res.Nav_Users[i].Nav_User.NAME + "</view>";
							} else {
								strUserName += (strUserName.length > 0 ? " " : "") +
									"<text style='padding:5px;line-height:30px;white-space:nowrap;'>" +
									res.Nav_Users[i].Nav_User.NAME + "</text>";
							}
						}
					}
					this.strUserName = strUserName;
					this.opinions = opinions;
					this.map = map;
					this.model = res;
					this.count = res.Nav_Users.length;
					this.feedback = res.Nav_Users.filter(t => t.STATUS !== 0).length;
					this.rate = this.count !== 0 ? `${Math.round(this.feedback * 100 / this.count)}%` : '';
					if (res.STATUS == 3 || res.STATUS == 4) {
						this.isAudit = true;
					}
				})
			},
			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('请检查必填项，必填项不能为空')
				})
			},
			confirm() {
				const ele = this.$refs
				ele['wForm'].validate().then(res => {
					this.model.PUBLISH = "SaveAndNotify";
					if (this.TaskID != "") {
						this.model.Parameter1 = this.TaskID;
					}
					this.model.Keyword = this.model.ID
					if (this.model.ORG_ID == "") {
						this.model.ORG_ID = this.ORG_ID;
					}
					getRequest(this.model, "/OG/OGEmployeeOpinionCollection/Agree").then(res => {
						if (res) {
							uni.$showMsgFunc('操作成功!', () => {
								uni.navigateBack()
							}, 'success', 1000)
						}
					})
				}).catch(err => {
					uni.$showErrorInfo('请检查必填项，必填项不能为空')
				})
			},
			getUserName(it) {
				let id = it.COLLECTION_USER_ID;
				let idx = this.map[id];
				let t = this.model.Nav_Users[idx];
				return t && t.Nav_User && t.Nav_User.NAME;
			}
		}
	}
</script>

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

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