<template>
    <div class="cl">
        <header-nav :index_num="index_num"></header-nav>
        <div id="excute_box">
            <!--内容-->
            <div class="excute_con">
                <h3>一、项目申报书</h3>
                <p><a href="#">示例文字.DOC</a> <a href="#">预览</a> </p>
                <h3>二、立项批复文件</h3>
                <p><a href="#">示例文字.DOC</a> <a href="#">预览</a> </p>
                <h3>三、实施方案</h3>
                <p><a href="#">示例文字.DOC</a> <a href="#">预览</a> </p>
                <h3>四、项目合同</h3>
                <p><a href="#">示例文字.DOC</a> <a href="#">预览</a> </p>
                <h3>五、服务承诺书</h3>
                <p><a href="#">示例文字.DOC</a> <a href="#">预览</a> </p>
                <div class="mid_box">
                    <h3>六、街道（地区办事处）关于2019年社会建设资金购买社会组织服务结项材料的说明</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>七、项目实施各阶段情况报告</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="excute_tab">
            <div class="caption">
               <span @click="num=0" :class="{active:num==0}">月工作报表统计</span>
               <div class="speed_box">
                <a href="#" v-show="num==0">+月工作报表</a>
                <a href="#" v-show="num==1">+新闻稿</a>
              </div>
            </div>
            
            <div class="excute_text">
              <div class="statistics" v-show="num==0">
                <table>
                  <tr>
                    <th>月份</th>
                    <th>提交情况</th>
                    <th>月报文件</th>
                    <th>提交时间</th>
                    <th> </th>
                  </tr>
                  <tr v-for="(names,index) in convers" :key="index" :class="{on:index%2==0,off:index%2!=0}">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </table>
              </div>
            </div>
          </div><!--tab切换-->
                <div class="mid_box">
                    <h3>八、中期评估报告</h3>
                    <h3>8.1中期评估报告</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>8.2中期整改材料</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <h3>九、结项报告</h3>
                <h3>1、基本信息</h3>
                <aside>
                    <div>
                        <label>项目名称:</label>
                        <input type="text" name="name" value v-model="name" required class="division"/>
                    </div>
                    <div>
                        <label>机构名称:</label>
                        <input type="text"  name="company" v-model="company" value disabled  required class="division"/>
                    </div>
                    <div>
                    <label>申请日期:</label>
                    <input type="date" name="aterm" v-model="aterm" value required />
                    <span> 至 </span>
                    <input type="date" name="fterm" v-model="fterm" value required />
                    </div>
                    <div>
                        <label>项目执行团队人员构成及分工:</label>
                        <input type="text" name="share" value v-model="share" required  class="division"/>
                    </div>
                    
                </aside>
                <div class="mid_box">
                    <h3>2、项目发展性状况</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>3、项目实施情况</h3>
                    <h3>3.1项目目标</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>3.2项目活动</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>3.3项目中期完成目标与活动对照表</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>4、项目取得的成效</h3>
                    <h3>4.1项目活动</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>4.2项目产生的其他重要影响</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>4.3媒体报道</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>5、项目实施至今的情况总结</h3>
                    <div class="rich">
                        <sub-mid @subMid="subMid"  :subMidVal="subMidVal"></sub-mid>
                    </div>
                </div>
                <div class="mid_box">
                    <h3>6、项目财务报告（按实际支出列出明细，上传文件）</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>7、中期电子报告上传</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>十、项目调整申请及批复</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>十一、会议活动的相关资料（通知、议程、参加人员名单及签到表、现场照片或视频、会议纪要、活动总结报告、媒体报道、满意度测评表及报告等）</h3>
                    <span>活动一:</span><input type="text" name="activity" value v-model="activity" required  class="midsion"/>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>十二、反映项目实施效果的相关材料（媒体报道、获奖情况、文字成果、案例等）</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>十三、财务管理制度</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <div class="mid_box">
                    <h3>十四、项目经费表</h3>
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload><!--文件上传-->
                </div>
                <!-- <div class="ll">
                    <button type="button" @click="submit(0)">保存</button>
                    <button type="submit" @click="submit(1)">提交</button>
                 </div> -->
                 <div class="ll">
                 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item>
                    <button type="button" @click="submitForm('numberValidateForm')">保存</button>
                    <button type="submit" @click="resetForm('numberValidateForm')">提交</button>
                  </el-form-item>
                </el-form>
                </div>
            </div>
        </div>
        <footer-nav class="footer"></footer-nav>
    </div>
</template>
<script>
const path = require('path')
const files = require.context('@/components', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
var preD = function (e) {
  e.preventDefault()
}
export default {
  components: modules,
  props: {},
  data () {
    return {
    convers:['1','2','3','4','5','6'],
    index_num: 2,
    sub: 0,
     subMidText: '',
     subMidVal: '',
     name:'',
     imageUrl: '',
     num: 0,
     share:'',
     company:'',
     activity:'',
     numberValidateForm:'',
    }
  },
  computed: {},
  
  watch: {
    popupStatus (val) {
      if (val) {
        document.body.style.overflow = 'hidden'
        document.addEventListener('touchmove', preD, {
          passive: false
        }) /** 禁止页面滑动 */
      } else {
        document.body.style.overflow = '' /** 出现滚动条 */
        document.removeEventListener('touchmove', preD, { passive: false })
      }
    }
  },
model:{
        
        },
  methods: {
    subMid (data) {
      this.subMidText = data
    },
    aterm(){

    },
    fterm(){

    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      submitForm(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     alert('submit!');
        //   } else {
        //     console.log('error submit!!');
        //     return false;
        //   }
        // });
        alert('保存成功')
      },
      resetForm(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     alert('submit!');
        //   } else {
        //     console.log('error submit!!');
        //     return false;
        //   }
        // });
        alert('提交成功')
      },
      
  }
  
}
</script>
<style lang="scss" scoped>
.rich{
    z-index: 10;
  width: 100%;
  margin: 30px auto 0px;
  height: 320px;
}
#excute_box{
    width: 100%;
    .excute_con{
        width: 1200px;
         margin: 0 auto;
         padding: 80px 30px;
    h3{
        line-height: 260%;
        font-size: 20px;
    }
    p a{
        line-height: 10%;
        color:#7471EF;
        font-size: 14px;
        margin-right: 10px;
    }
    label {
            margin-left: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            letter-spacing: 0px;
            color: #333333;
            text-align: right;
            display: inline-block;
            width: 200px;
     }
     input {
          box-sizing: border-box;
          width: 33.8%;
          height: 35px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 35px;
          margin-bottom: 15px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
          margin-right: 35px;
    }
    .division{
        width: 76%;
    }
    .midsion{
        width: 80%;
        margin-left: 3px;
    }
    span{
        font-size: 18px;
    }
    span a{
        color: #7471EF

    }
    p{
        font-size: 17px;
        color: #666;
        line-height: 30px;
    }
    .download{
        color: #7471EF;
        padding-left: 30px;
        font-size: 14px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1.5px dashed #666;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .mid_box span{
      font-size: 14px;

  }
  .ll {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        button[type="button"] {
          margin-right: 152px;
          width: 197px;
          height: 63px;
          background-color: #ff9800;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 63px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: 0;
        }
        button[type="submit"] {
          width: 197px;
          height: 63px;
          background-color: #e60012;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 63px;
          text-align: center;
          letter-spacing: 0px;
          color: #ffffff;
          outline: none;
          border: 0;
        }
}
.excute_tab{
  clear: both;
  width: 90%;
  margin: 0 auto;
  padding-top: 40px;
  // border: 1px solid green;
  }
  .caption {
        width: 100%;
        height: 38px;
        border-bottom: 1px solid #dedede;
        margin-top: 76px;
        margin-bottom: 30px;
        padding-left: 30px;
        box-sizing: border-box;
        position: relative;
        span {
          display: inline-block;
          height: 38px;
          text-align: center;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-right: 49px;
        }
        span.active{
         border-bottom: 2px solid #7471EF;
        }
        .speed_box{
          position: absolute;
          right: 10px;
          top: 10px;
        }
        .speed_box a{
          color: #7471EF;
          font-size: 16px;
          padding-left: 20px;
        }
        
      }
      .statistics{
          td{
           border:none !important;
          }
        }
        th {
          line-height: 40px;
          text-align: center;
          height: 40px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #666666;
          background-color: rgba(247,247,247,1);
          box-sizing: border-box;

          &:nth-of-type(1) {
            width: 200px;
          }
          &:nth-of-type(2) {
            width: 250px;
          }
          &:nth-of-type(3) {
            width: 200px;
          }
          &:nth-of-type(4) {
            width: 200px;
          }
          &:nth-of-type(5) {
            width: 180px;
          }
        }
        .on{
        background-color: #fff;
      }
        .off{
        background-color: #F7F7F7;
      } 
}


</style>