<template>
	<fullscreen :fullscreen.sync="fullscreen" class="container">
		<div class="container-box">
			<toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
			<div class="search">
				<mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
				<el-button class="btn-check" size="medium" type="primary" @click="dialogCheck(3)">添加
				</el-button>
			</div>
			<div class="tabbox">
				<el-table height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
					tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading">
					<el-table-column prop="taskName" label="任务名称">
					</el-table-column>
					<el-table-column prop="channel" label="推送渠道">
					</el-table-column>
					<el-table-column prop="time" label="推送时间">
					</el-table-column>
					<el-table-column prop="tit" label="推送标题">
					</el-table-column>
					<el-table-column prop="pushAbstract" label="推送摘要" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="remark" label=" 任务说明" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="deptName" label="发起人部门">
					</el-table-column>
					<el-table-column label="操作" width="160px" align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="dialogCheck(1,scope.row)">查看</el-button>
							<el-button size="mini" type="danger" @click="dialogCheck(2,scope.row)"
								v-if="scope.row.sts == 1&&scope.row.approvalSts == 1">审核</el-button>
							<el-button size="mini" type="danger" @click="dialogCheck(4,scope.row)"
								v-if="scope.row.sts == 3&&scope.row.approvalSts == 1">审核</el-button>
							<el-button size="mini" type="danger" @click="dialogCheck(7,scope.row)"
								v-if="scope.row.sts == 7&&scope.row.approvalSts == 1">下发</el-button>
							<el-button size="mini" type="danger" @click="dialogCheck(8,scope.row)"
								v-if="scope.row.sts == 4&&scope.row.approvalSts == 1">处理</el-button>
							<!-- <el-button size="mini" type="primary" @click="dialogCheck(2,scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="delLine(scope.row)">删除</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
					:total="total">
				</el-pagination>
			</div>
		</div>

		<el-dialog :title="titname + '物料类型'" :visible.sync="dialogStatus" width="50%" :destroy-on-close="true"
			:modal-append-to-body="false" :close-on-click-modal="false" :before-close="closedia" :fullscreen="true">
			<div v-loading="loadinged">
				<el-form :model="infolist" ref="infolist" style="height: calc(100vh - 180px);overflow-y: scroll;">
					<div class="info-line">
						<el-form-item>
							<span>任务名称</span>
							<el-input v-model="infolist.taskName" disabled></el-input>
						</el-form-item>
						<el-form-item>
							<span>推送渠道</span>
							<el-input v-model="infolist.channel" disabled></el-input>
						</el-form-item>
						<el-form-item>
							<span>推送时间</span>
							<el-input v-model="infolist.time" disabled></el-input>
						</el-form-item>
						<el-form-item>
							<span>推送标题</span>
							<el-input v-model="infolist.tit" disabled></el-input>
						</el-form-item>
						<el-form-item>
							<span>推送摘要</span>
							<el-input v-model="infolist.pushAbstract" disabled></el-input>
						</el-form-item>
						<el-form-item>
							<span>原文链接</span>
							<el-input v-model="infolist.original" disabled></el-input>
						</el-form-item>
					</div>
					<el-form-item class="info-line online">
						<span>落实单位</span>
						<el-input v-model="infolist.original" disabled></el-input>
					</el-form-item>
					<el-form-item class="info-line online" prop="quality">
						<span>任务说明</span>
						<el-input v-model="infolist.remark" disabled type="textarea" :autosize="{ minRows: 4, maxRows: 10}"></el-input>
					</el-form-item>
					<div style="padding: 0 20px 0 100px;margin-bottom: 20px;">
					    <uploadDown :datalist="datalist" :dialogStatus="uploadstatus"></uploadDown>
					</div>
					<!-- company 落实单位   (数组)
					sts（1待审核（科室），2打回，3待审核（分管），3.5选人，4待审核（地市），5待填写，6，归档） -->

					<el-form-item class="info-line online" prop="quality">
						<span>审批意见</span>
						<el-input v-model="infolist.directorApprovalContent" placeholder="审批意见"
							:disabled="infolist.sts != 1 || infolist.approvalSts != 1" type="textarea" :autosize="{ minRows: 4, maxRows: 10}">
						</el-input>
					</el-form-item>
					<el-form-item class="info-line online" prop="quality">
						<span>审批意见</span>
						<el-input v-model="infolist.leaderApprovalContent" placeholder="审批意见"
							:disabled="infolist.sts != 3 || infolist.approvalSts != 1" type="textarea" :autosize="{ minRows: 4, maxRows: 10}">
						</el-input>
					</el-form-item>

					<div v-if="infolist.fillSts == '5'">
						<div class="info-line">
							<el-form-item>
								<span>落实渠道</span>
								<el-input v-model="infolist.lsqd" placeholder="落实渠道" :disabled="disableStatus">
								</el-input>
							</el-form-item>
							<el-form-item>
								<span>落实情况</span>
								<el-input v-model="infolist.lsqk" placeholder="落实情况" :disabled="disableStatus">
								</el-input>
							</el-form-item>
						</div>
						<el-form-item class="info-line online" prop="quality">
							<span>落实原因</span>
							<el-input v-model="infolist.lsyy" placeholder="落实原因" :disabled="disableStatus"
								type="textarea" :rows="4"></el-input>
						</el-form-item>
						<!-- <div style="padding-left: 80px">
									<myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList">
									</myUpload>
								</div> -->
					</div>
					<div v-if="infolist.opNo == userInfo.loginNo || infolist.approvalSts != '1'" style="padding: 0 20px;">
						<el-table class="com-table" ref="multipleTable" :data="infolist.fillList" tooltip-effect="dark"
							size="mini" border style="width: 100%">
							<el-table-column prop="compName" label="地市公司">
							</el-table-column>
							<el-table-column prop="approvalName" label="填报人">
							</el-table-column>
							<el-table-column prop="workable" label="落实渠道">
							</el-table-column>
							<el-table-column prop="situation" label="落实情况">
							</el-table-column>
							<el-table-column prop="reason" label="落实原因">
							</el-table-column>
						</el-table>
					</div>
				</el-form>

				<div slot="footer" class="dialog-footer myfooter">
					<el-button type="primary" @click="dialogCli(2)" v-if="infolist.sts == '5'">确 定</el-button>
					<el-button type="primary" @click="checkexa = true" v-if="infolist.sts == '1'&&titname === '修改'">通 过
					</el-button>
					<el-button type="primary" @click="dialogCli(5)" v-if="infolist.sts == '3'&&titname === '修改'">通 过
					</el-button>
					<el-button type="primary" @click="dialogCli(4)" v-if="infolist.sts == '1'&&titname === '修改'">打 回
					</el-button>
					<el-button type="primary" @click="checkexatwo = true" v-if="infolist.sts == '7'&&titname === '修改'">下
						发
					</el-button>
					<el-button type="primary" @click="dialogCli(8)"
						v-if="infolist.sts == '4'&&infolist.approvalSts == '1'&&infolist.fillSts != '5'">确 定
					</el-button>
					<el-button type="primary" @click="dialogCli(9)" v-if="infolist.fillSts == '5'">确 定
					</el-button>
					<el-button @click="dialogCli(1)" v-if="titname === '查看'">确 定</el-button>
					<el-button @click="dialogCli(1)">取 消</el-button>
				</div>
			</div>
		</el-dialog>

		<el-dialog title="选择审批人" :visible.sync="checkexa" width="50%" :destroy-on-close="true"
			:modal-append-to-body="false" :close-on-click-modal="false">
			<div>

				<el-form :model="infolist" ref="infolist">
					<el-form-item prop="visiblec" class="info-line online">
						<span>审批人员</span>
						<deptTreeOnly class="tree" @treeCheck="treeCheckonly" :defaultList="defaultList"
							:type="depttype" :closeList="closeList"></deptTreeOnly>
						<div class="tree treeUser">
							<p>{{treeListonly.leaderAuditName}}
								<i v-if="treeListonly.leaderAuditName" @click="deletes()" class="el-icon-error"></i>
							</p>
						</div>
					</el-form-item>
				</el-form>

				<div slot="footer" style="text-align: right;padding-bottom: 20px;">
					<el-button type="primary" @click="dialogCli(3)">确 定</el-button>
					<el-button @click="checkexa = false">取 消</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog title="选择下发人" :visible.sync="checkexatwo" width="50%" :destroy-on-close="true"
			:modal-append-to-body="false" :close-on-click-modal="false">
			<div>

				<el-form :model="infolist" ref="infolist">
					<el-form-item prop="visiblec" class="info-line online">
						<div class="compListree">
							<span v-for="item in infolist.compList" :key="item.taskFillId">
								<em>{{item.compName}}</em>
								<el-select :popper-append-to-body="false" v-model="item.approvalNo" placeholder="下发人员"
									@change="chologin(item)">
									<el-option v-for="item in item.opt" :key="item.loginNoStr"
										:label="item.loginNameStr" :value="item.loginNoStr">
									</el-option>
								</el-select>
							</span>
						</div>
					</el-form-item>
				</el-form>

				<div slot="footer" style="text-align: right;padding-bottom: 20px;">
					<el-button type="primary" @click="dialogCli(7)">确 定</el-button>
					<el-button @click="checkexatwo = false">取 消</el-button>
				</div>
			</div>
		</el-dialog>

		<myMessage :messTit='messTit' @closeMessage="closeMessage" :centerDialogVisible="centerDialogVisible"
			v-if="centerDialogVisible"></myMessage>
	</fullscreen>

</template>
<script>
	import mySearch from "../../../components/search.vue";
	import myMessage from "../../../components/myMessage.vue"
	import toolList from '../../../components/toolList'
	import myUpload from "../../../components/upload.vue";
	import uploadDown from "../../../components/uploadDown.vue";
	import deptTreeOnly from "../../../components/deptTreeOnly.vue"

	export default {
		components: {
			mySearch,
			myMessage,
			toolList,
			myUpload,
			uploadDown,
			deptTreeOnly
		},
		data() {
			return {
				searchList: [{
					type: 'input',
					tit: '物料名称',
					value: '',
					width: '98%',
				}, ],
				tooltit: '公众号图文协推下发',
				fullscreen: false,
				total: 0,
				pageSize: 1,
				tableData: [{}],
				dialogStatus: false,
				disableStatus: false,
				titname: '',
				infolist: {},
				userInfo: {},
				params: {},
				centerDialogVisible: false,
				messTit: '',
				delid: '',
				loading: false,
				loadinged: false,
				attList: [],
				fileInfo: {
					type: 'img',
					limit: 5,
					url: '/bpm/api/upload',
					fileList: []
				},
				datalist: {
					url: '/market/compatt/downfile',
					type: 1
				},
				uploadstatus: false,
				checkexa: false, //审批人弹窗
				checkexatwo: false, //审批人弹窗
				treeListonly: {}, //返回数据
				defaultList: [],
				closeList: false,
				depttype: 0,
				peopopt: []
			}
		},
		methods: {
			chologin(v) {
				for (let i = 0; i < v.opt.length; i++) {
					if (v.opt[i].loginNoStr == v.approvalNo) {
						v.approvalName = v.opt[i].loginNameStr
					}
				}
			},
			deletes() {
				this.treeListonly = {};
				this.closeList = !this.closeList;
			},
			treeCheckonly(v) {
				this.treeListonly = v;
			},
			//处理所需数据
			verifall(v) {
				for (let j = 0; j < this.suppOpt.length; j++) {
					if (this.suppOpt[j].code == v) {
						this.infolist.supplierName = this.suppOpt[j].name
					}
				}
			},
			closedia() {
				this.infolist = {};
				this.dialogStatus = false;
			},
			//搜索数据
			searchInfo(v) {
				this.params = {};
				v[0] ? this.params.metirialType = v[0] : '';
				this.getList(this.params, this.pageSize);
			},
			//获取列表
			getList(v, n) {
				this.pageSize = n;
				let _this = this;
				this.loading = true;
				this.tableData = [];
				this.$http({
					url: "/market/cemscnpl/queryMkEmscnplPage",
					method: "post",
					headers: {
						"Content-Type": "application/json",
						"page": '{"pageNo":"' + n + '","pageSize":"10"}'
					},
					data: v,
				}).then((res) => {
					this.tableData = res.data.data;
					this.total = res.data.totalRecord;
					this.loading = false;
				});
			},
			// 分页
			currchange(v) {
				this.pageSize = v;
				this.getList(this.params, this.pageSize);
			},
			//申请
			dialogCheck(v, n) {
				let _this = this;
				if (v === 1) {
					this.dialogStatus = true;
					this.infolist = Object.assign({}, n);
					this.titname = '查看';
					this.disableStatus = true;
					// return
				} else if (v === 2) { //一次审核
					this.dialogStatus = true;
					this.infolist = Object.assign({}, n);
					this.titname = '修改';
					this.disableStatus = false;
				} else if (v === 4) { //二次审核
					this.dialogStatus = true;
					this.infolist = Object.assign({}, n);
					this.titname = '修改';
					this.disableStatus = false;
				} else if (v === 7) { //下发
					this.dialogStatus = true;
					this.infolist = Object.assign({}, n);
					this.titname = '修改';
					this.disableStatus = false;
				} else if (v === 8) { //下发
					this.dialogStatus = true;
					this.infolist = Object.assign({}, n);
					this.titname = '修改';
					this.disableStatus = false;
				} else if (v == 3) {
					_this.$router.push({
						path: '/officialAccountadd',
					});
					_this.setabList('公众号图文协推资料发起', '/officialAccountadd');
				}
				this.$http({
					url: "/market/cemscnpl/queryEmscnplInfo",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {
						taskId: this.infolist.taskId
					},
				}).then((res) => {
					let _this = this;
					this.infolist.compList = res.data.compList;
					this.infolist.fillList = res.data.fillList;
					this.infolist.attList = res.data.fillList;
					this.datalist.attList = res.data.attList;
					this.uploadstatus = true;
					console.log(this.datalist)
					if (v == 7) {
						for (let i = 0; i < _this.infolist.compList.length; i++) {
							_this.infolist.compList[i].opt = [];
							_this.$http({
								url: "/sysmgr/sysuserinfo/queryList",
								method: "post",
								headers: {
									"Content-Type": "application/json",
								},
								data: {
									groupId: _this.infolist.compList[i].deptNo
								},
							}).then((res) => {
								_this.infolist.compList[i].opt = res.data;
							});
						}
					}
				});
				this.infolist.opNo = this.userInfo.loginNo;
				this.infolist.opName = this.userInfo.loginName;
			},
			setabList(n, p) {
				let params = {
					children: "",
					name: n,
					rountPath: p,
					target: "_self",
				};
				for (let i = 0; i < this.$store.state.tabList.length; i++) {
					if (this.$store.state.tabList[i].name === params.name) {
						this.$store.state.tabList[i] = params;
					}
				}
				let set = new Set([...this.$store.state.tabList, params]);
				set.add(params);
				this.$store.commit("setDefaultActive", params.rountPath);
				this.$store.commit("setTabList", Array.from(set));
			},
			//添加
			dialogCli(v) {
				if (v == 1) {
					this.infolist = {};
					this.dialogStatus = false;
					return
				}
				if (v == 3) { //通过
					let info = {};
					info.sts = "3";
					info.stsDesc = "待审核";
					info.leaderNo = this.treeListonly.leaderAuditNo;
					info.leaderName = this.treeListonly.leaderAuditName;
					info.directorApprovalTime = this.$formatDate(new Date(), "YYYY-MM-DD");
					info.taskId = this.infolist.taskId;
					info.directorApprovalContent = this.infolist.directorApprovalContent;
					this.submitInfo("/market/cemscnpl/mkEmscnplApproval", info);
				}
				if (v == 4) { //打回
					let info = {};
					info.sts = "2";
					info.stsDesc = "打回";
					info.taskId = this.infolist.taskId;
					this.submitInfo("/market/cemscnpl/mkEmscnplApproval", info);
				}
				if (v == 5) { //二审通过
					let info = {};
					info.sts = "7";
					info.stsDesc = "待下发";
					info.leaderApprovalTime = this.$formatDate(new Date(), "YYYY-MM-DD");
					info.taskId = this.infolist.taskId;
					info.leaderApprovalContent = this.infolist.leaderApprovalContent;
					this.submitInfo("/market/cemscnpl/mkEmscnplApproval", info);
				}
				if (v == 7) { //下发
					let info = {};
					info.sts = "4";
					info.stsDesc = "待审核";
					info.taskId = this.infolist.taskId;
					info.compList = this.infolist.compList;
					this.submitInfo("/market/cemscnpl/mkEmscnplApproval", info);
				}
				if (v == 8) { //下发到人
					let info = {};
					info.sts = "5";
					info.stsDesc = "待填写";
					for (let i = 0; i < this.infolist.compList.length; i++) {
						if (this.infolist.compList[i].approvalNo == this.userInfo.loginNo) {
							info.taskFillId = this.infolist.compList[i].taskFillId;
							info.sendNo = this.infolist.compList[i].approvalNo;
							info.sendName = this.infolist.compList[i].approvalName;
						}
					}
					this.submitInfo("/market/cemscnpl/mkEmscnplApproval", info);
				}
				if (v == 9) { //tianxie
					let info = {};
					for (let i = 0; i < this.infolist.fillList.length; i++) {
						if (this.infolist.fillList[i].approvalNo == this.userInfo.loginNo) {
							info = this.infolist.fillList[i];
							info.workable = this.infolist.lsqd;
							info.situation = this.infolist.lsqk;
							info.reason = this.infolist.lsyy;
							info.sts = "8";
							info.stsDesc = "填写完成";
						}
					}
					this.submitInfo("/market/cemscnpl/mkEmscnplFill", info);
				}
			},
			submitInfo(u, v) {
				let _this = this;
				this.$refs.infolist.validate(valid => {
					if (valid) {
						this.loadinged = true;
						this.$http({
							url: u,
							method: "post",
							headers: {
								"Content-Type": "application/json",
							},
							data: v,
						}).then((res) => {
							this.loadinged = false;
							if (res.data.result === 1) {
								_this.$message({
									message: res.data.desc,
									type: 'error'
								});
							} else {
								_this.$message({
									message: '成功',
									type: 'success'
								});
								_this.infolist = {};
								_this.dialogStatus = false;
								_this.checkexa = false;
								_this.checkexatwo = false;
								_this.getList({}, _this.pageSize);
							}

						});
					}
				})
			},
			closeMessage(v) {
				this.centerDialogVisible = false;
				let _this = this;
				if (v === 1) {
					_this.$http({
						url: "/market/cadvSecbuyMetirial/del",
						method: "post",
						headers: {
							"Content-Type": "application/json",
						},
						data: {
							id: this.delid
						},
					}).then((res) => {
						if (res.data.result === 1) {
							_this.$message({
								message: res.data.desc,
								type: 'error'
							});
						} else {
							_this.$message({
								message: '删除成功',
								type: 'success'
							});
							_this.getList(this.params, this.pageSize);
						}
					});
				}
			},
			//删除
			delLine(v) {
				this.centerDialogVisible = true;
				this.messTit = '即将删除此条数据, 是否删除?';
				this.delid = v.id;
			},
			//文件返回值
			uploadBack(v) {
				console.log(v)
			},
			//功能栏
			iconCli(v) {
				if (v === 1) {
					this.getList(this.params, this.pageSize);
				}
				if (v === 2) {
					this.fullscreen = !this.fullscreen
				}
			},
			getUser() {
				this.userInfo = JSON.parse(window.sessionStorage.userInfo);

				this.$http({
					url: "/market/cadvSupplier/queryValidSupplierList",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {
						"buyTypeCode": "2"
					},
				}).then((res) => {
					this.suppOpt = res.data;
				});

			}
		},
		mounted() {
			this.getList({}, 1);
			this.getUser();
		},
		created() {

		}
	}
</script>
<style scoped lang="scss">
	.compListree {
		width: 100% !important;

		span {
			width: 100% !important;
			display: inline-block;
			padding: 10px 0;

			em {
				width: 120px;
				display: inline-block;
				font-style: normal;
			}

			.el-select {
				width: calc(100% - 120px)
			}
		}
	}

	.onetab {
		margin-bottom: 20px;
		padding: 0 20px;
	}

	.titbox {
		div {
			float: right;

			i {
				font-size: 22px;
				margin-left: 20px;
				cursor: pointer;
			}
		}
	}

	.tabbox {
		margin-top: 15px;
	}

	.pageBox {
		text-align: right;
		margin-top: 10px;
	}

	.info-line {
		width: 100%;
		display: block;
		padding-left: 20px;

		div {
			width: 50%;
			display: inline-block;
		}

		span {
			width: 80px;
			display: inline-block;
			text-align: left;

			i {
				color: red;
				display: inline-block;
				padding-right: 5px;
			}
		}

		.el-select,
		.el-input {
			width: calc(100% - 100px);
		}
	}

	.online {
		width: 100%;

		.el-select {
			width: calc(100% - 100px);
		}

		span {
			vertical-align: top;
		}

		.el-textarea {
			width: calc(100% - 100px);
		}

		.tree {
			width: calc(50% - 60px);
			display: inline-block;
			margin-right: 20px;
			height: 300px;
			overflow-y: scroll;

			.el-icon-error {
				float: right;
				font-size: 20px;
				margin-top: 9px;
				cursor: pointer;
			}
		}

		.treeUser {
			margin: 0;
			border: 1px solid #ddd;

			p {
				background: #f4f4f4;
				padding: 0 20px;
				margin-bottom: 5px;
			}
		}
	}
</style>
