<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>
                <h3>1、基本信息</h3>
                <aside>
                    <div>
                        <label>项目名称:</label>
                        <input type="text"  name="company" v-model="company" value disabled  required/>
                    </div>
                    <div>
                        <label>机构名称:</label>
                        <input type="text" name="name" value v-model="name" 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>1、基本信息</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>八、中期PTT文件上传</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="buttonForm('numberValidateForm')">保存</button>
                    <button type="submit" @click="submmitForm('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 {
    index_num: 2,
    sub: 0,
     subMidText: '',
     subMidVal: '',
     name:'',
     imageUrl: '',
     company:'',
     share:'',
     activity:'',
    numberValidateForm:'',
    uploadForm: new FormData(),

    }
  },
  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 })
      }
    }
  },
  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;
      },
      buttonForm(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     alert('submit!');
        //   } else {
        //     console.log('error submit!!');
        //     return false;
        //   }
        // });
        alert('保存成功')
      },
      submmitForm(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;
        }
      }
}


</style>