<template>
	<div style="width: 100%">
		<el-breadcrumb separator-class="el-icon-arrow-right">

			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>监测任务</el-breadcrumb-item>
			<el-breadcrumb-item>专项监测</el-breadcrumb-item>
			<el-breadcrumb-item :to="{path:'/admin/routineMonitor'}">任务列表</el-breadcrumb-item>
			<el-breadcrumb-item>添加任务</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="title">
			专项监测
		</div>
		<el-form :model="form" label-width="100px">

			<el-form-item label="任务名称" required>
				<el-input v-model="form.task_name" placeholder="最长40字符"></el-input>
			</el-form-item>
			<el-form-item label="任务优先级" required>
				<el-select v-model="form.level" placeholder="请选择">
					<el-option v-for="item in priority" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年度" required>
				<el-date-picker v-model="form.year" type="year" value-format="yyyy">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="批次" required>
				<el-select v-model="form.batch">
					<el-option v-for="item in batch" :key="item.label" :label="item.label" :value="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="任务时间" required>
				<el-col :span="8">
					<el-date-picker v-model="form.starttime" type="date" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
				<el-col :span="1">
					<div class="line">--</div>
				</el-col>
				<el-col :span="11">
					<el-date-picker v-model="form.endtime" type="date" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
			</el-form-item>
			<!-- <el-form-item label="发布单位" required>
				<el-input v-model="groupname" :disabled="true"></el-input>
			</el-form-item> -->
			<el-form-item label="牵头单位" required>
				<el-input v-model="form.main_unit" @focus="getTestListShow = true"></el-input>
			</el-form-item>
			<el-form-item label="文件号">
				<el-input v-model="form.filenum"></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input type="textarea" placeholder="最长300字符" v-model="form.log"></el-input>
			</el-form-item>
			<el-form-item label="附件" required>
				<el-upload class="upload-demo" :file-list="fileList" drag :headers="myHeaders"
					action="http://syjcapi.aielab.net/api/v1/ossUpload" :on-success="uploadSuccess"
					:limit="1">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="onSubmit">保存</el-button>
				<el-button @click="reBack">返回</el-button>
			</el-form-item>
		</el-form>
		<!-- 选择检测机构对话框 -->
		<el-dialog title="机构选择" :visible.sync="getTestListShow" width="50%" :close-on-click-modal="false"
			@open="getTestList()" class="dialogItem">
			<el-form v-if="getTestListShow" :model="getTestListForm">
				<!--  表格数据区域-->
				<el-table ref="multipleTable" :data="testList" row-key="id" @selection-change="handleSelectionChange"
					border stripe highlight-current-row style="width: 100%">
					<el-table-column type="selection" :reserve-selection="true" width="50"></el-table-column>
					<el-table-column label="序号" width="50px">
						<template slot-scope="scope">
							{{ scope.$index+1 }}
						</template>
					</el-table-column>
					<el-table-column :key="table.prop" v-for="table in tableHeader" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
				</el-table>
				<div class="footer">
					<!--    分页器区域-->
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryInfo.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total" background />
					<el-button type="success" @click="choseTest()">提交</el-button>
				</div>

			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	const groupname = window.sessionStorage.getItem('rymc')
	const token = window.sessionStorage.getItem('token')
	export default {
		data() {
			return {
				groupname: groupname,
				myHeaders: {
					Authorization: 'bearer'+ token
				},
				form: {
					main_unit: [],
				},
				// 优先级选项
				priority: [{
					value: '0',
					label: '一般'
				}, {
					value: '1',
					label: '紧急'
				}, {
					value: '2',
					label: '特急'
				}],
				// 批次
				batch: [{
					label: '一季度'
				}, {
					label: '二季度'
				}, {
					label: '三季度'
				}, {
					label: '四季度'
				}],
				// 弹出检测机构弹窗
				getTestListShow: false,
				// 查询检测机构请求参数
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					keyWord: ''
				},
				// 检测机构列表
				testList: [],
				// 表头
				tableHeader: [{
						label: '单位名称',
						prop: 'name',
						width: 300
						// fixed: 'left'
					},
					{
						label: '机构类型',
						prop: 'groupname',
						// width: 40
						// fixed: 'left'
					}, {
						label: '所属区域',
						prop: 'dtRelyOnUnit',
						width: 300
						// fixed: 'left'
					}
				],
				// 总共多少条数据
				total: 0,
				multipleSelection: null,
				getTestListForm: {},
				// 选中的牵头单位
				orgs: [],
				fileList: []
			}
		},
		mounted() {
			let that = this
			// this.$nextTick(() => {
			// 	console.log(that.multipleSelection)
			//         that.multipleSelection.forEach((row) => {
			//           that.$refs.multipleTable.toggleRowSelection(
			//             that.testList.find((item) => {
			//               return row==item; 
			//             }),
			//             true
			//           );
			//         });
			//       });

			// this.$nextTick(() => {
			//   this.testList.forEach(outerItem => {
			//     this.multipleSelection[this.page.current - 1] && this.multipleSelection[this.page.current - 1].forEach(item => {
			//       if(outerItem.id == item.id) {
			//         this.$refs.multipleTable.toggleRowSelection(outerItem,true);
			//       }
			//     })
			//   })
			// })
		},
		methods: {
			async onSubmit() {
				this.form['token'] = token
				this.form['groupname'] = this.groupname
				this.form['orgs'] = this.orgs
				this.form['releaser'] = window.sessionStorage.getItem('rymc')
				this.form['task_class'] = '专项监测'
				this.form['ispublic'] = 0
				console.log(this.form)
				const result = await this.$http.post('AddTask', this.form)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.$router.push('specialMonitor')
				} else {
					this.$message({
						type: 'error',
						message: result.data.message
					})
				}
			},
			reBack() {
				this.$router.push('specialMonitor')
			},
			// 获取任务列表
			async getTask() {
				const result = await this.$http.post('getTaskList', this.queryInfo)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.testList = result.data.data.rows
					this.total = result.data.data.total
				}
			},
			// 获取检测机构列表
			async getTestList() {
				this.queryInfo['token'] = token
				const result = await this.$http.post('getTestList', this.queryInfo)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.testList = result.data.data.rows
					this.total = result.data.data.total
				}
			},
			/** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
			setPageNum() {
				this.queryInfo.pageNum = 1
				this.getTestList()
			},
			setSelectedRow() {
				// 设置当前页已选项
				this.hander = true
				this.testList.forEach(item => {
					if (this.list.includes(item[this.uniqueKey])) {
						this.$refs.multipleTable.toggleRowSelection(item, true)
					}
				})
				this.hander = false
			},

			/** 监听每页显示多少数据的改变 */
			handleSizeChange(newSize) {
				this.queryInfo.pageSize = newSize
				this.getTestList()
			},

			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.getTestList()
			},
			// 批量勾选
			handleSelectionChange(val) {
				this.multipleSelection = val
				if (this.hander) return false
				// this.setSelectRows() // 处理选中的方法
			},
			// 提交
			choseTest() {
				let that = this
				that.orgs = that.multipleSelection
				console.log(that.orgs)
				that.form.main_unit = that.multipleSelection.map(el => el.name).join(', ')
				console.log(that.form.main_unit)
				// that.form.main_unit = that.multipleSelection
				// for(let i=0;i<that.multipleSelection.length;i++){
				// 	that.form.main_unit.push(that.multipleSelection[i].name)
				// }
				that.getTestListShow = false

			},
			// 上传成功
			uploadSuccess(res) {
				console.log(res.data)
				this.form.file_url = res.data.fileUrl
				this.form.file_name = res.data.fileName
			}
		}
	}
</script>
<style lang="less" scoped>
	.title {
		margin-left: 50%;
		margin-bottom: 20px;
	}

	.el-form {
		width: 800px;
		margin: 0 auto;
	}

	.footer {
		margin-top: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
