<template>
  <div class="infobox">
    <el-form ref="basicInfoForm" label-position="top" :model="info" :rules="rules" >
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">建设时间</div>
          <!-- <el-button type="primary" plain>保存</el-button> -->
        </div>
        <div class="rowbox">
          <el-row  :gutter="22">
            <el-col :span="8">
              <el-form-item label="建设起止时间" prop="beginTime">
                <el-date-picker
				@change="nsewe"
				style="width: 100%;"
                      v-model="timete"
                      type="daterange"
					  value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="请选择开始时间"
                      end-placeholder="请选择结束时间">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="竣工时间" prop="jgTime">
                <el-date-picker
                      v-model="info.jgTime"
                      type="date"
					  value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入统时间" prop="rtTime">
                <el-date-picker
                      v-model="info.rtTime"
                      type="date"
					  value-format="yyyy-MM-dd"
                      placeholder="年 / 月 / 日">
                    </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">建设进度跟踪<span style="color: red; font-size: 12px;">(请先保存建设信息在填写上报项目建设进展情况)</span></div>
          <!-- <el-button type="primary" plain>保存</el-button> -->
        </div>
        <div class="ftab flexc">
          <div class="line"></div>上报项目建设进展情况
          <div class="flex1"></div>
          <el-button type="primary" v-hasPermi="['zhaoshangV3:jsxx:add']" @click="handleAdd"  plain class="upbox" plain >
            提交
          </el-button>
        </div>
       <div class="rowbox">
          <el-row :gutter="22">
            <el-col :span="24" style="margin-bottom: 12px;">
              <drag-file-upload v-model="form.jsPhoto" :datam="jyzhp"  :data="jyzhp"/>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建设进展情况" prop="jzqk">
                <el-input type="textarea" placeholder="输入项目进展情况…" v-model="form.jzqk"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="存在的问题" prop="czwt">
                <el-input type="textarea" placeholder="输入存在的问题…" v-model="form.czwt"></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="6">
              <el-form-item label="土地出让金总额(万元)" prop="tdcrzje">
                <el-input placeholder="请输入土地出让金总额" v-model="form.tdcrzje" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="厂房投入金额(万元)" prop="cftrje">
                <el-input placeholder="请输入厂房投入金额" v-model="form.cftrje" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备清单金额(万元)" prop="className">
                <el-input placeholder="请输入设备清单金额" v-model="form.sbqd" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票金额(万元)" prop="fpje">
                <el-input placeholder="请输入发票金额" v-model="form.fpje" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备合同金额(万元)" prop="htje">
                <el-input placeholder="请输入设备合同金额" v-model="form.htje" />
              </el-form-item>
            </el-col>
			<!-- <el-col :span="6">
			  <el-form-item label="实际到位资金(万元)" prop="tableName">
			    <el-input placeholder="实际到位资金(万元)" v-model="form.czwt" />
			  </el-form-item>
			</el-col> -->
          </el-row>
        </div>
        <div class="ftab flexc" style="padding-top: 7px;">
          <div class="line"></div>每月项目建设进展情况
        </div>
        <div class="rowbox" style="width: 100%;overflow: hidden;">
            <el-table :max-height="213"  :data="tableDataa" border style="width: 100%;margin-bottom: 15px;">
                <el-table-column align="center" prop="jzqk" label="建设进展情况"  > </el-table-column>
                <el-table-column align="center" prop="czwt" label="存在的问题" > </el-table-column>
				<el-table-column align="center" prop="shiji" label="实际到位资金"  > </el-table-column>
				<el-table-column align="center" prop="tdcrzje" label="土地出让金总额" > </el-table-column>
				<el-table-column align="center" prop="cftrje" label="厂房投入金额" > </el-table-column>
				<el-table-column align="center" prop="sbqd" label="设备清单金额"  > </el-table-column>
				<el-table-column align="center" prop="fpje" label="发票金额" > </el-table-column>
				<el-table-column align="center" prop="htje" label="设备合同金额" > </el-table-column>
                <el-table-column align="center" label="操作" :width="120">
                  <template slot-scope="scope">
                   <div class="flexcc">
                    <div v-hasPermi="['zhaoshangV3:jdqk:edit']"  class="btna  coa" style="padding: 0; margin-right: 3px;" @click="handleUpdate(scope.row)" >
                       <div class="imgs">
                       </div>修改
                     </div>
                     <div v-hasPermi="['zhaoshangV3:jdqk:remove']"  class="btna  cod" style="padding: 0; margin-left: 3px;" @click="handleDelete(scope.row)" >
                       <div class="imgs"  >
                       </div>删除
                     </div>
                   </div>
                  </template>
                </el-table-column>
              </el-table>
        </div>
      </div>

      <div class="fomebox">
        <div class="ftop flexc">
          <img class="timg flex0" src="@/assets/images/project/tabtit.png"/>
          <div class="flex1 tit">上传附件</div>
          <el-button type="primary" plain>保存</el-button>
        </div>
        <div class="rowbox">
            <el-table  :data="tableData" border style="width: 100%;margin-bottom: 15px;">
            	<el-table-column align="center" prop="index" label="序号" width="10%"></el-table-column>
                <el-table-column align="center" prop="fjlx" label="附件类型"  width="30%"> </el-table-column>
                <el-table-column align="center" label="操作" width="30%">
                  <template slot-scope="scope">
                   <div class="flexcc" v-if="issfe">
                     <div class="btna flexc coa">
            		    <!-- <fileUploadt  v-model="info.jylist" :datam="jyzhp"  :data="jyzhp"  v-if="scope.row.index == 0"/> -->
            			 <fileUploadt  v-model="xshtlist" :datam="xsht" :data="xsht"  v-if="(scope.row.index  == 1 )" />
            			  <fileUploadt  v-model="xsfqlist" :datam="xsfp"  :data="xsfp" v-if="(scope.row.index  == 2 )" />
            			   <fileUploadt  v-model="cwbblist" :datam="cwbb"  :data="cwbb" v-if="(scope.row.index  == 3 )" />
            			    <fileUploadt  v-model="tjbblist" :datam="tjbb"  :data="tjbb" v-if="(scope.row.index  == 4 )" />
                     </div>
                   </div>
                  </template>
                </el-table-column>
              </el-table>
        </div>
      </div>
    </el-form>
    <div class="flexcc pt7">
        <!-- <el-button type="primary" plain>暂存</el-button> -->
         <el-button type="primary" v-hasPermi="['zhaoshangV3:jsxx:edit']"    style="margin-left: 26px;" @click="submitForm">提交</el-button>
    </div>
	
 
  </div>

</template>

<script>
import { listJdqk, getJdqk, delJdqk, addJdqk, updateJdqk } from "@/api/zhaoshang/jdqk"
import { listJsxx, getJsxx, delJsxx, addJsxx, updateJsxx } from "@/api/zhaoshang/jsxx"
export default {
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      value:'',
      value1:'',
      options: [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }],
	tableDataa:[],
      tableData: [
      {
                fjlx: '设备清单',
                index:1,
                time: '2025-06-16 16:57',
      },
      {
                fjlx: '设备发票',
                index:2,
                time: '2025-06-16 16:57',
      },
      {
                fjlx: '设备合同',
                index:3,
                time: '2025-06-16 16:57',
      },
      {
                fjlx: '入统资料',
                index:4,
                time: '2025-06-16 16:57',
      }
      ],
      form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
              },
              formLabelWidth: '120px',
              dialogFormVisible:false,
              input:'',
      rules: {
        // jzqk: [
        //   { required: true, message: "请输入", trigger: "blur" }
        // ],
        
        
      },
	  jyzhp:{
	  		  fileName:'项目每月建设照片',
	  },
	  xsht:{
	  			  fileName:'设备清单',
	  		  bigType:'c',
	  		  type:15
	  },
	  xsfp:{
	  		  bigType:'c',
	  			  fileName:'设备发票',
	  		  type:16
	  },
	  cwbb:{
	  		  bigType:'c',
	  			  fileName:'设备合同',
	  		  type:17
	  },
	  tjbb:{
	  			  fileName:'入统资料',
	  		  bigType:'c',
	  		  type:18
	  },
	  issfe:true,
	  jylist:[],
	  xshtlist:[],
	  xsfqlist:[],
	  cwbblist:[],
	  tjbblist:[],
	  timete:null
    }
  },
  watch: {
	  secondChange(){
	         this.gethusie()
	        }
    
  },
  computed:{
        secondChange(){
          return this.info.xmbh
        }
      },
  created() {
	   this.gethusie()
  },
  methods:{
	  // 回显
	  gethusie(){
		console.log(this.info)
		this.jylist = []
		this.xshtlist = []
		this.xsfqlist = []
		this.cwbblist = []
		this.tjbblist = []
		let that = this
		that.issfe = false
		setTimeout(function()  {
		 let sngsenhgt = that.info.xmbh
		 that.jyzhp.xmbh = sngsenhgt
		 that.xsht.xmbh = sngsenhgt
		 that.xsfp.xmbh = sngsenhgt
		 that.cwbb.xmbh = sngsenhgt
		 that.tjbb.xmbh = sngsenhgt
		 
		 if(that.info.id == -1){
		 		  // 新增
				  console.log(2)
		 		// this.getList()
		 }else{
			 console.log(3)
		 		  // 修改
		 		  that.getList()
				  if(that.info.beginTime != null){
				  	if(that.info.endTime != null){
				  		let sgse = that.info.beginTime + ',' +  that.info.endTime
				  		that.timete = sgse.split(',')
				  	}
				  }else{
				  	that.timete = null
				  }
		 				  if(that.info.zsyzFjList.length !=0){
		 				  	that.info.zsyzFjList.filter(rou=>{
		 				  		if(rou.bigType == 'c' ){
		 				  			if(rou.type == 15){
		 				  				// 设备清单
										console.log(this.info)
		 				  				that.xshtlist.push(rou)
		 				  			}
		 				  			if(rou.type == 16){
		 				  				// 设备清单
										console.log(that.info)
		 				  				that.xsfqlist.push(rou)
		 				  			}
		 				  			if(rou.type == 17){
		 				  				// 设备清单
		 				  				that.cwbblist.push(rou)
		 				  			}
		 				  			if(rou.type == 18){
		 				  				// 设备清单
		 				  				that.tjbblist.push(rou)
		 				  			}
		 				  		}
		 				  	})
		 				  }
			
		 }
		 
		   }, 1000);  
		that.issfe = true
	  },
	  nsewe(val){
		console.log(val)  
		this.info.beginTime = val[0]
		this.info.endTime = val[1]
	  },
	  getList() {
	  	let sgnsegse={xmbh:this.info.xmbh}
	    listJdqk(sgnsegse).then(response => {
	      this.tableDataa = response.rows
	     this.tableDataa.filter(rou=>{
			 if(rou.tdcrzje == null || rou.tdcrzje ==''){
				 rou.tdcrzjes = 0
			 }else{
				 rou.tdcrzjes = rou.tdcrzje
			 }
			 if(rou.cftrje == null || rou.cftrje ==''){
			 	rou.cftrjes = 0
			 }else{
				 rou.cftrjes = rou.cftrje
			 }
			 if(rou.sbqd == null || rou.sbqd ==''){
			 	rou.sbqds = 0
			 }else{
				 rou.sbqds = rou.sbqd
			 }
			 if(rou.fpje == null || rou.fpje ==''){
			 	rou.fpjes = 0
			 }else{
				 rou.fpjes = rou.fpje
			 }
			 if(rou.htje == null || rou.htje ==''){
			 	rou.htjes = 0
			 }else{
				 rou.htjes = rou.htje
			 }
			 rou.shiji = (rou.tdcrzjes - 0) +  (rou.cftrjes - 0) +(rou.sbqds - 0)+(rou.fpjes - 0)+(rou.htjes - 0)
		 })
	    })
	  },
	  
	  // 每月更新提交
	  handleAdd(){
	  	 if(this.form.jzqk == null){
	  		this.$message.error('请填写信息'); 
	  		return
	  	 }
	  	 this.form.xmbh = this.info.xmbh
		 this.form.jsxxId = this.info.jsxxId
		 if(this.form.jdqkId != null && this.form.jdqkId != undefined){
			 updateJdqk(this.form).then(response => {
			   this.$modal.msgSuccess("修改成功")
			   this.open = false
			   this.getList()
			 }) 
		 }else{
			 
			addJdqk(this.form).then(response => {
			  this.$modal.msgSuccess("新增成功")
			  this.open = false
			  this.getList()
			}) 
		 }
	  	 
	  },
	  // 表单重置
	  reset() {
	    this.form = {
	                    jdqkMonth: null,
	                    jzqk: null,
	                    czwt: null,
	                    jjjy: null,
	                    gzjh: null,
	                    tdcrzje: null,
	                    cftrje: null,
	                    sbqd: null,
	                    fpje: null,
	                    htje: null,
	                    upTime: null,
	                    jsPhoto: null,
	                    createBy: null,
	                    createTime: null,
	                    updateBy: null,
	                    updateTime: null,
	                    remark: null
	          }
	    this.resetForm("form")
	  },
	  /** 修改按钮操作 */
	  handleUpdate(row) {
	    this.reset()
	    const tzfkId = row.jdqkId 
	    getJdqk(tzfkId).then(response => {
	      this.form = response.data
	      this.open = true
	      this.title = "修改信息"
	    })
	  },
	  /** 删除按钮操作 */
	  handleDelete(row) {
	    const tzfkIds = row.jdqkId  
	    delJdqk(tzfkIds).then(response => {
	      this.$modal.msgSuccess("删除成功")
	      this.getList()
	    })
	  },
	  /** 提交按钮 */
	  submitForm: function() {
	    this.$refs["basicInfoForm"].validate(valid => {
	      if (valid) {
	  		 this.info.zsyzFjList = []
	  		 if(this.jylist.length !=0){
	  			 this.info.zsyzFjList = this.info.zsyzFjList.concat(this.jylist )  
	  		 }
	  		 if(this.xshtlist.length !=0){
	  			 this.info.zsyzFjList = this.info.zsyzFjList.concat(this.xshtlist )
	  		 }
	  		 if(this.xsfqlist.length !=0){
	  		 	 this.info.zsyzFjList = this.info.zsyzFjList.concat(this.xsfqlist )		 
	  		 }
	  		 if(this.cwbblist.length !=0){
	  		 	 this.info.zsyzFjList = this.info.zsyzFjList.concat(this.cwbblist )		 
	  		 }
	  		 if(this.tjbblist.length !=0){
	  		 	 this.info.zsyzFjList = this.info.zsyzFjList.concat(this.tjbblist )		 
	  		 }
	  		 console.log(this.info.zsyzFjList,this.info,6)
	  		 // return
	        if (this.info.id != -1) {
	          updateJsxx(this.info).then(response => {
	            this.$modal.msgSuccess("修改成功")
	            this.open = false
				// this.$router.go(-1)
	          })
	        } else {
	          addJsxx(this.info).then(response => {
	            this.$modal.msgSuccess("新增成功")
	  		   this.form.jsxxId =  response.data
			   this.info.jsxxId = response.data
	            // this.open = false
	  		   // this.$router.go(-1)
	            // this.getList()
	          })
	        }
	      }
	    })
	  },
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .fomebox{
    .el-button--primary{font-size: 14px;padding: 8px 14px;}
    .el-form-item__label{padding-bottom: 0;line-height: 38px;}
    .el-form-item{margin-bottom: 15px;}
    .el-input__inner{height: 40px;line-height: 40px;}
    .el-date-editor.el-input{width: 100%;}
    .el-select{width: 100%;}
    table{width: 100% !important;}
    .upbox{padding:8px 12px;
      img{width: 12px;height: 12px;margin-right: 2px;}
      // color: #00A854;
    }
    .el-table .el-table__header-wrapper th{background: #F6FAFD;}
   }
   .infobox{
     .el-dialog__header{border-bottom: 1px solid #E6E6E6;padding: 0;}
   }
   .el-dialog__header{border-bottom: 1px solid #E6E6E6;padding: 0;}
}
.fomebox{background: #FFFFFF;margin-bottom: 15px;border-radius: 4px;

  .rowbox{padding: 10px 15px 9px;}
  .ftab{font-weight: bold;font-size: 14px;color: #2777D0;padding: 7px 16px 0px;
    .line{width: 6px;margin-right: 9px;height: 20px;background: #2777D0;}
  }
  .txt{font-weight: 500;padding-right: 34px;
font-size: 14px;
color: #666666;}
  .btna{font-weight: 500;font-size: 14px;padding: 0 13px;
    .imgs{width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;margin-right: 7px;
      .imga{width: 13px;height: 14px;}
      .imgb{width: 14px;height: 14px;}
      .imgc{width: 15px;height: 15px;}
      .imgd{width: 13px;height: 14px;}
    }
    &.coa{color: #1890FF;}
    &.cob{color: #FE7F0E;}
    &.coc{color: #00A854;}
    &.cod{color: #F25858;}
  }
}
.ftop{padding: 10px 17px 10px 16px;border-bottom: 1px solid #E6E6E6;
    .timg{width: 20px;height: 20px;margin-right: 13px;}
    .tit{font-weight: bold;font-size: 16px;color: #222838;}
    &.diaboxt{padding: 16px;border-bottom: none;}
}

</style>
