<template>
  <div class="financialBox">
	<el-form
	  v-loading="quillLoading"
	  :model="formData"
	  ref="formData"
	>
	<el-form-item label="" prop="fssj">
	  <quill-editor
	  style="height: calc(100vh - 218px - 160px);"
	    :disabled="btnAction == '详情'"
	    v-model="formData.mtext"
	    ref="myQuillEditor"
	    id="myQuillEditor"
	    :options="quillOption"
	  ></quill-editor>
	</el-form-item>
	   <el-row
	     class="saveCancel"
	     style="text-align: center; margin-top: 80px"
	   >
	     <el-col :span="24">
	       <div class="grid-content bg-purple">
	         <el-button
	           type="primary"
	           @click="saveBasic('1')"
	           v-if="btnAction == 'update'"
	         >
	           <i class="iconfont iconbaocun"></i>
	           保存
	         </el-button>
	         <el-button
	           type="primary"
	           @click="saveBasic('0')"
	           v-if="btnAction == 'update'"
	         >
	           <i class="iconfont icontijiao"></i>
	           提交
	         </el-button>
			 <el-button
			   type="primary"
			   @click="saveBasic('1')"
			   v-if="btnAction == 'cx'"
			 >
			   <i class="iconfont iconfanhui"></i>
			   退回
			 </el-button>
			<!-- <el-button
			   type="primary"
			   @click="handleExportWord()"
			   v-if="btnAction !== '导出'"
			 >
			   <i class="iconfont icondaochu11"></i>
			   导出
			 </el-button> -->
	         <el-button
	           type="primary"
	           class="iconfont iconfanhui"
	           @click="goBack"
	           >返回</el-button
	         >
	       </div>
	     </el-col>
	   </el-row>
	</el-form>
	
  </div>
</template>
<script>
	
	import {
		sysCwModelsSaveOrUpdate,
		sysCwModelsFindByParmary
	} from "@/api/budgetFilling/index";

import { quillEditor } from "vue-quill-editor";
import quillConfig from "@/utils/quill-config.js";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  data() {
    return {
		quillLoading:false,
		quillOption: quillConfig,
		btnAction:this.$route.query.btnAction,
		// name:'年度财政预算项目',
		formData:{
			dataStatus:'1',
			dataType:'2',
			deptName:sessionStorage.getItem("deptName"),
			depotCode:sessionStorage.getItem("deptId"),
			orgCode:sessionStorage.getItem("orgCode"),
			mtext:`
			 <h1 style="text-align:center">${this.dataName()}</h1>
		 
		  </br>
		   <h1>&nbsp;&nbsp;一、XX项目概况</h1>
		   </br>
		   <h2>&nbsp;&nbsp;按照《》文件要求，需建立......项目，经测算，共需项目资金XX元。</h2>
		   </br>
		   <h1>&nbsp;&nbsp;二、XX项目经费使用内容</h1>
		   </br>
		   <h2>&nbsp;&nbsp;例：（一）差旅费XX元，调研、参加培训等，按照差旅补助和市内环外出行补助进行核算</h2>
		   </br>
		   <h2>&nbsp;&nbsp;（二）印刷费XX元，按照数量、单价等明细进行核算。</h2>
		   </br>
		   <h1>&nbsp;&nbsp;三、资金使用计划</h1>
		   </br>
		   <h2>
		   &nbsp;&nbsp;XX项目经费共计XX元，第一季度预计使用XX元...第四季度预计使用XX元。
		   </h2>
		   </br>
		   </br>
		`},
    };
  },
  components: {
    quillEditor
  },
  created() {
	  if(this.$route.query.id){
		  this.GetFindByParmary()
	  }
	  // this.name='name'
  },
  methods: {

	GetFindByParmary(){
		var data={
			id:this.$route.query.id
		}
		sysCwModelsFindByParmary(data).then(res =>{
			if(res.infoCode == 200){
				this.formData=res.data
			}
		}).catch((e) => {});
	},
	
	//保存修改
	saveBasic(dataStatus) {
		this.quillLoading=true
		this.dateFormat()
		let operateName=sessionStorage.getItem("userName")
	  let params = JSON.parse(JSON.stringify(this.formData));
	  console.log(params,'ueeye=============')
	  var str=document.getElementsByClassName('ql-container')[0].innerText
	  let indexs = str.indexOf('\n')
	  params.tbnf=this.tbnf
	  params.mname=str.substring(0,indexs+1)
	  params.dataStatus=dataStatus
	  sysCwModelsSaveOrUpdate(params,operateName)
	    .then((response) => {
	      if (response.infoCode == 200) {
			  this.quillLoading=false
	        this.$router.push({
	          path: "xmjfsyfaIndex",
	        });
	        this.$message({
	          showClose: true,
	          message: "保存成功！",
	          type: "success",
	        });
	      }else if(response.infoCode == 900){
			  this.quillLoading=false
			 this.$message({
			   showClose: true,
			   message: response.msg,
			   type: "success",
			 }); 
		  }
	    })
	    .catch((e) => {
			this.quillLoading=false
		});
	},
	goBack(){
		this.$router.push({
		  path: "xmjfsyfaIndex",
		});
	},
	dataName(){
		this.name='XX项目经费使用方案'
		return 'XX项目经费使用方案'
	},
	// dataName1(){
	// 	this.name1='事前绩效评估报告'
	// 	return '事前绩效评估报告'
	// },
    dateFormat() {
      let date = new Date();
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
	  this.tbnf=year+1
	  return (year+1)
	   
      // return (year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds)
      // this.formData.fbrq = year + "-" + month + "-" + day;
    },
  },
};
</script>
<style lang="scss" scoped>
.seeCLa {
  color: #409eff;
  cursor: pointer;
}
.el-form-item {
  margin-bottom: 0px;
  .el-form-item__label {
    line-height: 30px;
    color: #333 !important;
  }
  .el-form-item__content {
    line-height: 30px;
  }
}
.financialBox{
	padding: 20px;
}
.financialBox /deep/.ql-editor {
  min-height: 220px;
}
.ql-toolbar.ql-snow {
  // display: none;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 1px solid #ccc !important;
}
.zdqyCl /deep/.el-cascader-menu__wrap {
  height: 222px !important;
}
.zdqyCl /deep/.el-cascader-menu__list {
  padding: 0px 0 18px 0 !important;
}
.tzdx /deep/ .el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 10px;
  left: 80px;
}
.ql-editor span{
	font-size: 32px!important;
}
</style>

<style>
.upload-plan {
  position: relative;
}
.upload-plan .el-upload-list {
  width: 75%;
}
.upload-plan .view-btn {
  position: absolute;
  right: 0;
  top: 40px;
}
</style>