<!doctype html>
<html>
	<head>
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>政策补算</title>

		<script src="../../../jsnew/elementDefault.js?v=20220425"></script>
        <script src="../../../jsnew/vue/vue.js"></script>
		<script src="../../../jsnew/vue/element-ui/element-ui_15/index.js"></script>
		<script src="../../../jsnew/myelement.js?v=20220425"></script>
		<script src="../../../jsnew/page.js?v=20220425"></script>
		<!-- <script src="../../../setting.js"></script> -->
		
		<link href="../../../jsnew/vue/element-ui/element-ui_15/theme-chalk/index.css" rel="stylesheet">
		<link href="../../../jsnew/myelement.css?v=20220426" rel="stylesheet">
		<link href="../../../jsnew/theme.css?v=20220426" rel="stylesheet">
		<link href="../../../css/iconfont.css" rel="stylesheet">
		<link href="../../../jsnew/page.css?v=20220425" rel="stylesheet">
		<link href="//at.alicdn.com/t/font_2374495_13ltsxm2eor.css" rel="stylesheet">
	</head>
	
	<body style="margin: 0px;">
		<div v-cloak id="vbody">
			<div id="page_root">
				<div class="topbar">
                    <span>{{title}}</span>

					<div style="margin-right: 18px;float: right;">
						<el-button-group style="margin-left: 3px">
							<el-button @click="beforeAddData">新 增</el-button>
						</el-button-group>
					</div>
				</div>

				<el-dialog title="选择折让类型" :visible.sync="selectType"
					:close-on-press-escape="false"
					:close-on-click-modal="false"
					:show-close="false"
					height="50%">
					<h-form
						ref="form_temp"
						:form-attr="formAttr_temp"
						:table-fields="formFields"
						:form-data="formData"
						:table-field-click="formfieldClick"
					>
					</h-form>
					
					<div slot="footer" class="dialog-footer" >
						<el-button size="small" type="default" @click="closeDialog">取 消</el-button>
						<el-button size="small" type="primary" @click="setType">确 定</el-button>
					</div>
				</el-dialog>
			
				<div class="topbar-line">
					<div class="query-bar">
						<h-form-filter ref="form1" 
							:form-attr="filterAttr" 
							:table-fields="filterFields" 
							:form-data="filterObj" 
							:table-field-click="filterfieldClick"
							:isdraggableorder="false"
							
							v-on:on-query="onQuery"
							v-on:on-init-query="onInitFilter"
							v-on:order-fields="orderFilterFields"
							>
						</h-form-filter>
					</div>
				</div>
			
				<div class="h_dialog__body" :style="{height: t_height +'px', 'overflow-y': 'auto', 'padding-top': '15px'}">
                    <template v-if="isRefresh && tableFields">
						<div v-for="(row, index) in tableData" :key="'c' + index" class="" style="margin-bottom: 10px;" @click="onClickRowCard(row)">
							<el-card :class="[selectedrow && selectedrow.id == row.id ? 'h_select_card' : '','h_table_card']" shadow="hover" style="position: relative;" >
								<div class="h_table_card_title">
									<div style="width: 100%; height: 100%; display: flex;">
										<div style="padding: 10px; display: inline-block;">
											<el-tag>
												{{row.plan_name}}
											</el-tag>
											<!-- <el-tag
												:type="row. == '' ? '' : 'danger' "
												>
												{{row.}}
											</el-tag> -->
										</div>
                                        <!-- 流程编号 -->
                                        <div class="state" @click="codeClick({data: row})" style="padding: 20px 5px; display: inline-block; color: red;">
											{{row.code}}
										</div>
                                        <!-- 审批状态 -->
										<div class="state" @click="state_click(row)" style="padding: 20px 5px; display: inline-block; color: red;">
											{{statusMap[row.status]}}
										</div>
										<!-- <div class="" @click="" style="padding: 20px 5px; display: inline-block; color: red;">
											创建时间:{{row.create_time?row.create_time.split(' ')[0]:""}}
										</div> -->
                                        <div v-if="row.status != 'open'" style="padding: 20px 5px; display: inline-block; color: red;">
											{{row.node_name ? '审批节点:' + row.node_name : '审批节点:'}}
										</div>

										<div v-if="row.status != 'open'" style="padding: 20px 5px; display: inline-block; color: red;">
											{{row.emp_name ? '审批人:' + row.emp_name : '审批人:'}}
										</div>

										<div v-if="row.status != 'open'" style="padding: 20px 5px; display: inline-block; color: red;">
											{{row.readed && row.readed == "T" ? '处理状态:处理中' : '处理状态:未处理'}}
										</div>
									</div>
								</div>
								
								<el-row :gutter="20">
									<el-col :span="2" class="h_table_card_front">
										<!-- <div style="width: 100%; height: 100%;background-color: #b780e600;">前缀</div> -->
									</el-col>
									<el-col :span="20" class="h_table_card_body">
										<h-form
										    :ref="'cf' + index"
										    :form-attr="formAttr"
										    :table-fields="tableFields"
										    :form-data="row"
										    :table-field-click="tablefieldClick"
										>
										</h-form>
									</el-col>
									<el-col :span="2" class="h_table_card_after" style="position: absolute; right: 5%; height: 100vh;">
										<div style="width: 100%; background-color: #83e67300; display: flex;">
											<div>
												<el-button
                                                    plain
                                                    icon="el-icon-arrow-right"
													class="button-card"
													@click="showInfo(row)" >
												</el-button>
											</div>
											<div style="padding-left: 10px;">
												<el-button
													class="button-card"
													v-if="row.status === 'refuse'"
													type="primary"
													@click="closeFlow(row)" >作 废
												</el-button>
											</div>
											<div style="padding-left: 10px;">
												<el-button
												v-if="row.status == 'input' || row.status == 'close' || !row.status"
													class="button-card"
													@click="opRowData(row)" >删 除
												</el-button>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-card>
						</div>
					</template>
				</div>

                <div style="text-align: right; padding: 16px 0px;">
                	<el-pagination
                		background
                		layout="prev, pager, next"
                		:total="total"
                		v-on:current-change="changePage"
                		>
                	</el-pagination>
                </div>
			</div>
		</div>
		
		<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
			<div class="spinner">
			  <div class="cube1"></div>
			  <div class="cube2"></div>
			</div>
		</div>

        <script type="text/javascript">
			function initVue() {
				new ListVue({
					el: "#vbody",
					data: {
						dataname: "pkg_agm_modify",
						dataname_map: "agm_plan_mapping",
						filter: "type = 'red'",
						title: "政策红冲",
						dataurl: "rootjemin/data/getEntitySet",
						orderby: "update_time desc",
						default_filterFields: [
							{isshow: "T", field: "code", name: "流程编号",type: "input",},
							{isshow: "T", field: "plan_name", name: "类型", type:"select"},
							{isshow: "T", field: "status", name: "状态", type: "select", 
								options: [
									{value: "待提交", code: "input"},
									{value: "审批中", code: "working"},
									{value: "审批完成", code: "open"},
								],
							},
						],
						default_tableFields: [
                            // {isshow: "T",field: "from_source",name: "来源",width: "150", type: "span", formatter: "formatter_json", formatpattern: "from_source"},
                            {isshow: "F",field: "code",name: "流程编号",width: "150", type: "span"},
                            {isshow: "F",field: "state_name",name: "状态",width: "150", type: "span"},
                            {isshow: "F",field: "node_name",name: "审批节点",width: "150", type: "span"},
                            {isshow: "F",field: "emp_name",name: "审批人",width: "150", type: "span"},
                            {isshow: "T",field: "name",name: "申请人",width: "150", type: "span"},
							{isshow: "T",field: "amt",name: "折让汇总",width: "150", type: "span", formatter: "formatter_money"},
							{isshow: "T", field: "start_date",name: "开始时间", width: "100", align: "center", isminwidth: true, type: "span", formatter: "formatter_date"},
							{isshow: "T", field: "end_date",name: "结束时间", width: "100", align: "center", isminwidth: true, type: "span", formatter: "formatter_date"},
							{isshow: "F", field: "create_time",name: "创建时间", width: "100", align: "center", isminwidth: true, type: "span", formatter: "formatter_date"},
						],

                        tableData: [],

						filterfieldClick: {},
						tablefieldClick: {},
						formfieldClick: {},

                        formAttr: {
							istitle: false,
							title: "表单名称",
							columnnumber: 4,
							labelwidth: "100px",
							labelposition: "left",//"left",// right//top
							size: "mini",
							border: "1px solid #c6c6c600",
							disabled: true,
						},

                        
						t_height:null,

						selectType: false,
						formFields: [],
						default_formFields:[
							{isshow: "T", required: true, field: "head_remark", name: "标题", type: "textarea",},
							{isshow: "T", required: true, field: "plan_id", name: "折让类型", type: "select",},
						], 

						formAttr_temp: {//变更申请弹窗属性
							columnnumber: 1,
							labelwidth: "100px",
							labelposition: "left",//"left",// right//top
							size: "mini",
							border: "10px solid #c6c6c600",
						},
						formData: {},

						formAttr_info: {//变更申请弹窗属性
							columnnumber: 1,
							labelwidth: "100px",
							labelposition: "left",//"left",// right//top
							size: "mini",
							border: "10px solid #c6c6c600",
						},
						formData_info: {},
						
						dataRequest: [
							{
								name: "v_modify_plan",
								url: "rootjemin/data/getEntitySet",
								paramsobj: {dataname: "v_modify_plan", filter: "plan_type = 'red'"},
								isnotoption: false, //true:不是选项
							}
						],
						policyMap: {},
						emp_code: localStorage.getItem('emp_code'),
						roleid: localStorage.getItem('roleid'),
						undertake: false,
						operate: false,

						statusMap:{
							input: '待提交',
							refuse: '待修改',
							working: '审批中',
							open: '审批完成',
							close: '作废',
						},
						v_modify_plan_: [],
						filterObjBydefault: {
							type: 'red'
						}
					},
					created() {
						// this.getButtonsByPage("A10-49");
						// if (this.roleid && this.roleid.indexOf("2beaab4dcbd44a2285818ea480e5364c") != -1) {
						// 	this.undertake = true
						// 	this.dataname = "v_fee_task_emp"
						// 	this.filterTxt = " state_code in ('Distributed', 'Feedbacked') and check_emp_code = '" + this.emp_code + "' "
						// }
						// else {
						// 	this.operate = true
						// 	let idStr = ""
						// 	if (window.top.vue.userinfo.user.roleList && window.top.vue.userinfo.user.roleList.length > 0) {
						// 		window.top.vue.userinfo.user.roleList.map(s => {
						// 			if (!idStr) {
						// 				idStr = "'" + s.id + "'"
						// 			}
						// 			else {
						// 				idStr += ",'" + s.id + "'"
						// 			}
						// 		})
						// 	}
						// 	this.filterTxt = "EXISTS (SELECT * FROM fee_task_roles fr WHERE fee_task.plan_id = fr.plan_id AND fr.role_id in (" + idStr + "))"
						// }
						// if (this.roleid && this.roleid.indexOf("760a780cbffa4f73a2777a05f9185f2d") != -1) {
						// 	this.filterTxt += " and statu_code <> 'Unconfirme'"
						// }
					},
					mounted() {
                        var me = this;
						me.t_height = document.documentElement.clientHeight*1 - 152;

						if (this.dataRequest && this.dataRequest.length) {
							var result = {};
							this.loadRequestData(this.dataRequest, result, function(data) {
								me.dataRequestObj = data;
								//获取数据
								me.initData();
							});
						}
						else {
							//获取数据
							me.initData();
						}
						this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
							hideLoading();
						});
					},
					
					methods:{
						// getButtonsByPage(pageid) {
						// 	var me = this;
						// 	var resource_type = "button";
							
						// 	var roleCode = Root.role.id;
						// 	var roleid_str = "";
						// 	roleCode.map(r=>{
						// 		if (!roleid_str) {
						// 			roleid_str = r;
						// 		}
						// 		else {
						// 			roleid_str += ";" + r;
						// 		}
						// 	});
							
						// 	var roleid_ = roleid_str.replace(/;/g,"','");
						// 	//按键
						// 	var params = {
						// 		dataname: "buttonByPage",//buttonByPage/buttonByPanel
						// 		isClientMode: false,
						// 		filter: "resource_page.id='" + pageid + 
						// 		"' and EXISTS( SELECT 1 from resource_role r where r.type='" + resource_type + 
						// 		"' and r.role_id in ('" + roleid_ + "') and r.resource_id = t.id)"
						// 		//userId: this.userId
						// 	}
						// 	Server.call("root/data/getEntitySet", params, function(result) {
						// 		console.log(result);
						// 		if (result && result.data.entityset) {
						// 			result.data.entityset.map(e=>{
						// 				if (!me.tabMapButton[e.page_id]) {
						// 					me.tabMapButton[e.page_id] = {};
						// 				}
						// 				me.tabMapButton[e.page_id][e.id_name]=e;
						// 			});
						// 			me.getButtonByTabName(pageid);
									
						// 			me.$forceUpdate();
						// 		}
						// 	});
						// },
						// getButtonByTabName(tab_name) {
						// 	var me = this;
						// 	me.buttons = {};
						// 	if (me.tabMapButton[tab_name]) {
						// 		me.buttons = me.tabMapButton[tab_name];
						// 	}
						// },
						onInitFilter() {
							//清空
							this.filterObj = {};
							this.selectedrow = {};
							this.initData();
						},

						// onQuery() {
						// 	this.initData();
						// },

						closeDialog() {
							var me = this;
							me.selectType = false;
						},

						// 新增折让类型点击确定
						setType() {
							var me = this;
							if (!this.formData.plan_id) {
								Root.message({
								    type: 'error',
								    message: '请选择折让类型'
								});
								return
							}
							me.selectType = false;
                            let filter_map = "plan_id = '" + this.formData.plan_id + "'"
							let params = {
								dataname: this.dataname_map,
								filter: filter_map,
							}
							Server.call("rootjemin/data/getEntity", params, function(result) {
								console.log("result=>",result);
								if (result && result.data['agm_plan_mapping']) {
									me.formData.policy_type = result.data['agm_plan_mapping'].policy_type || "syzc";
									me.formData.policy_sub_type = result.data['agm_plan_mapping'].policy_sub_type || "";
									
									let params_id = {
										dataname: "pkg_agm_modify"
									}
									Server.call("rootjemin/data/newEntity", params_id, function(result_id) {
										if (result_id && result_id.data['agm_modify_apply']) {
											me.formData.id = result_id.data['agm_modify_apply'].id || ""
											me.formData.from_new = "new"
											me.addData();
										}
									})
																		
								}
							});
						},


						initData() {
							var me = this;
							this.onQuery(function(result, callback) {//查询后的回调,用于获取字段的
								if (result.meta && result.meta['agm_modify_apply'] && result.meta['agm_modify_apply'].fields) {
									var metas = clone(result.meta['agm_modify_apply'].fields);
									var filterFields_ = [];
									var tableFields_ = [];
									metas.map(f=>{
										f.isshow = "T";
										
										if (f.field == "code") {
											f.isshow = "F"
											f.colspan = 2
										}
										if (f.field == "head_remark") {
											f.colspan = 3
										}
										
										me.default_formFields.map(s => {
											if (s.field == 'plan_id') {
												me.dataRequestObj.v_modify_plan.data.entityset.map(e => {
													e.value = e.name
													e.code = e.id
												})
												s.options = me.dataRequestObj.v_modify_plan.data.entityset
											}
										})

										me.default_filterFields.map(f => {
											if (f.field == 'plan_name') {
												me.v_modify_plan_ = clone(me.dataRequestObj.v_modify_plan.data.entityset)
												me.v_modify_plan_.map(e => {
													e.value = e.name
													e.code = e.name
												})
												f.options = me.v_modify_plan_
											}
										})
										tableFields_.push(clone(f));
									})
									if (!me.filterFields || (me.filterFields && me.filterFields.length == 0)) {
										me.filterFields = clone(me.default_filterFields);
										me.tableFields = clone(tableFields_);
										me.formFields = clone(me.default_formFields);
										
										//字段数组转字段obj
										me.fieldsToFieldsObj();
										
										//设置字段事件
										me.tableFieldClick();
									}
								}
								
								if (callback) {
									callback();
								}
							});
						},
						// queryAfter() {

						// }

						// 删除
						opRowData(row) {
							let me = this
							
							Root.confirm('确定删除吗?', '提示', {
							  confirmButtonText: '确定',
							  cancelButtonText: '取消',
							  type: 'warning'
							}).then(() => {
								let param = {
									dataName: 'pkg_agm_modify',
									id: row.id,
								}
								
								Server.call("rootjemin/data/deleteEntity", param, function(result) {
									console.log(result);
									if (result && result.data) {
										
										Root.message({
											type: 'success',
											message: '删除成功!'
										});
										
										me.onQuery()
									}
								});
							}).catch(() => {
								
							});
						},

						changePage(pageNo) {
							this.pagenum = pageNo
							this.selectedrow = {};
							this.doQuery()
						},
						state_click(row){
							var me = this;
						
							if (!row.flow_id) {
								Root.message({
									type: 'warning',
									message: '该数据无流程'
								}); 
								
								return
							}
							var config = {
								totab: false, //true: 以Tab导航的方式打开
								width: "900px",
								height: "500px",
								icon: "icon-product",
								text: "",
								id: row.id,//totab: true时需设置,用于判断是否已打开此页面
								url: "../approval_new/ApprovalList_page_new.html?flow_id=" + row.flow_id,
								data: row,
								delta: {},
								sceneCode: "change",//"refuseedit",//"approval", //"add"//"browse",
								callback: function(obj, callback) {
									if (callback) {
										callback();
									}
								}
							};
							me.doPopupByPublic(config);
						},
						tableFieldClick() {
							var me = this;
							//筛选字段事件设置
							this.filterfieldClick = {
								
							};
							//表格字段事件设置
							this.tablefieldClick = {
								
							};
						
							//表单字段事件设置
							this.formfieldClick = {
								plan_id: {
									select: {
										onchange: function(obj) {
											me.$set(me.formData, "plan_name", obj.selectoption.value);
											me.$set(me.formData, "plan_id", obj.selectoption.code);
										}
									}
								},
								head_remark: {
									input: {
										onchange: function(obj) {
											console.log("obj",obj)
											me.$set(me.formData, "head_remark", obj.data.head_remark);
										}
									}
								}
							};
						},

						beforeAddData() {
							let formData = clone(this.formData)
							formData.id = ""
							formData.type = "red"
							formData.plan_id = ""
							formData.plan_name = ""
							formData.policy_type = ""
							formData.policy_sub_type = ""
							formData.head_remark = ""
							formData.from_new = "";
							this.formData = formData
							this.selectType = true;
						},
						
						showInfo(row) {
							var me = this;

							var config = {
								totab: true, //true: 以Tab导航的方式打开
								width: "900px",
								height: "900px",
								icon: "icon-product",
								text: row.plan_name + "信息查看",
								id: "policy_redflush_info" + row.id,//totab: true时需设置,用于判断是否已打开此页面
								url: '../tradeDiscount/discount/policy_redflush_info.html',
								data: row,
								delta: {},
								sceneCode: "browse",//"refuseedit",//"approval", //"add"//"browse",
								callback: function(obj, callback) {
									me.onQuery();
									if (callback) {
										callback();
									}
								}
							};
							me.doPopupByPublic(config);
						},

						closeFlow(row) {
							let me = this
							Root.confirm('确定作废吗?', '提示', {
								confirmButtonText: '确定',
							    cancelButtonText: '取消',
							    type: 'warning'
							}).then(() => {
								let param = {
									businessId: row.id,
									flowId: row.flow_id,
									variableMap: {
										dataName: "agm_modify_apply",
										reason: this.approveremark || "作废",
										flowId: row.flow_id,
										attachment: ""
									},
									pass: false
								}
								Server.call("jeminact/rootact/act/deal/" +row.flow_id, param, function(result) {
									if (result.success) {
										Root.message({
											type: 'success',
											message: '作废成功'
										})
										me.onQuery()
									}
									else {
										Root.message({
											type: 'error',
											message: result.error
										})
									}
								});
							}).catch(() => {

							})

						},
						
						// 点击流程编号
						codeClick(obj) {
							var me = this;
							
							var config = {
								totab: true, //true: 以Tab导航的方式打开
								width: "900px",
								height: "900px",
								icon: "icon-product",
								text: obj.data.plan_name + "补算信息查看",
								id: "policy_supplement_info" + obj.data.id,//totab: true时需设置,用于判断是否已打开此页面
								url: '../tradeDiscount/discount/policy_supplement_info.html',
								data: obj.data,
								delta: {codeAddClick:true},
								sceneCode: "",//"refuseedit",//"approval", //"add"//"browse",
								callback: function(obj, callback) {
									me.onQuery();
									if (callback) {
										callback();
									}
								}
							};
							me.doPopupByPublic(config);
						},

						addData() {
							let me = this;

							var config = {
								totab: true, //true: 以Tab导航的方式打开
								width: "900px",
								height: "900px",
								icon: "icon-product",
								text: me.formData.plan_name + "新增",
								id: me.formData.plan_id || "",//totab: true时需设置,用于判断是否已打开此页面
								url: '../tradeDiscount/discount/policy_redflush_info.html',
								data: me.formData,
								delta: {},
								sceneCode: "add",//"refuseedit",//"approval", //"add"//"browse",
								callback: function(obj, callback) {
									me.onQuery();
									if (callback) {
										callback();
									}
								}
							};
							me.doPopupByPublic(config);
						},

                        onClickRowCard(row) {
							this.selectedrow = clone(row);
							this.$forceUpdate();
						},
					}
				});
			};
			
			initVue();
		</script>
		<style>
			/* 在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
			[v-cloak] {
				display: none !important;
			}

            .h_form_filter {
				padding-top: 1px;
			}

			/* .el-button--mini {
				color: #FFF;
				background-color: #2984e2;
				border-color: #409EFF;
			} */

			.state {
				text-decoration: underline;
				cursor: pointer;
			}
			.state:hover {
				cursor: pointer;
				font-weight: bolder;
			}
			.h_table_card:hover {
				cursor: pointer;
			}
			.h_select_card {
				border: 2px solid rgb(72, 172, 211);
			}

			/* .el-card__body {
				padding: 5px;
			}

			.button-card {
				width: 80px;
			} */

			.el-card {
				border-radius: 8px;
			}
		</style>
	</body>
</html>