<template>
    <div id="makerActivityWordDetail" v-loading="loading">
        <div class="projectApplication1">
            <div class="vfpHeader">
                <div class="titleOne">活动详细</div>
                <el-button @click="back()" type="primary" size="mini">返回</el-button>
            </div>
            <hr>
        </div>
        <markeractivityWord v-if="wordData['type']==0 && wordData['state']==0" :wordData="wordData" :total="total"/>
        <NomMarkerWord v-if="wordData['type']==1 && wordData['state']==0" :wordData="wordData" :total="total"/>
        <markeractivityWordShow v-if="wordData['state']!=0" :wordData="wordData" :total="total"/>
        <div>
            <el-button type="primary" v-if="wordData['state']==0" @click="test">立即修改</el-button>
            <el-button type="primary" @click="getActivityWord">下载表单</el-button>
        </div>
        <el-dialog
          title="提示"
          :visible.sync="submitHint"
          width="600px"
          class="pageSubmitData">
          <div class="addDialogLogo">LOGO</div>
          <div class="deleteContent">确定修改“{{wordData['activityName']}}”活动？</div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="changeActivity" class="AllDialogBtn">确认提交</el-button>
            <el-button @click="submitHint=false" class="AllDialogBtn">取消</el-button>
          </span>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import markeractivityWord from './components/markeractivityWord.vue'
  import NomMarkerWord from './components/NomMarkerWord.vue'
  import markeractivityWordShow from './components/markeractivityWordShow.vue'
  import {makerActivityWord} from '@/components/tool/getWord'
      export default {
        components:{markeractivityWord,NomMarkerWord,markeractivityWordShow},
        data() {
              return {
                loading:false,
                submitHint:false,
                wordData:{
                  acId:"",//活动ID
                  applicationDate:'',//申请日期
                  associatedProjects:"",//关联项目
                  ProjectName:"",//关联项目名称
                  activityName:'',//活动名称
                  pro_leader:"",//活动负责人
                  college: '',//所在学院ID
                  collegeName:"",//所在学院名称
                  tel:'',//联系电话
                  activityTime:"",//活动时间
                  student:0,//参与学生人数
                  member:[
                    {name:"",collage:"",work:""},
                    {name:"",collage:"",work:""},
                    {name:"",collage:"",work:""},
                    {name:"",collage:"",work:""},
                    {name:"",collage:"",work:""},
                  ],
                  activityPlan:"",//活动计划
                  expectations:"",//预期目标
                  eventAudience:"",//活动受众面
                  fundingPlan:"",//经费支出计划
                  expenditureMothPlan:['','','','','','','','','','','',''],
                  fund:{
                    device:"",
                    Material:"",
                    processing:"",
                    Collaboration:"",
                    APPRAISAL:"",
                    entery:"",
                    activities:"",
                    Transaction:"",
                  },//预算经费
                  type:0,//0 创客活动 1 个人创客
                  state:1,//项目状态 0未审核 1待报销 2 已审核 3 已报销
                }
              }
          },
          methods:{
              back(){
                  this.$router.push('/makerActvity')
              },
              getData(){
                this.loading = true;
                let pram = {
                    uid:this.$store.state.userInfo.userid,
                    acid:this.$route.query['Id']
                }
                this.ajax.get(this.$store.state.api+"/getActivityWordData",pram).then(result=>{
                    let data = result['data'][0][0]
                    this.wordData['applicationDate'] = data['applicationDate'];
                    this.wordData['associatedProjects'] = data['pid'];
                    this.wordData['activityName'] = data['title'];
                    this.wordData['pro_leader'] = data['pro_leader'];
                    this.wordData['college'] = data['classid'];
                    this.wordData['tel'] = data['phone']
                    this.wordData['activityTime'] = JSON.parse(data['begin_at']);
                    this.wordData['student'] = data['students'];
                    this.wordData['member'] = JSON.parse(data['course_teacher']);
                    this.wordData['expenditureMothPlan'] = JSON.parse(data['MothPlan']);
                    this.wordData['fund'] = JSON.parse(data['fund']);
                    this.wordData['type'] = data['type'];
                    this.wordData['ProjectName'] = data['PName'];
                    this.wordData['collegeName'] = data['CName'];
                    this.wordData['acId'] = data['acId']
                    this.wordData['state'] = data['state']
                    this.wordData = {...this.wordData,...JSON.parse(data['chapters'])}
                    this.loading = false;
                }).catch(err=>{
                    console.log(err)
                })
              },
              test(){
                const cEmpty = /^\s*$/g;
                const checkPhone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/; //获取正则表达式 存放到verify变量中
                for(let i in this.wordData){
                  switch(i){
                    case "associatedProjects":
                      if(cEmpty.test(this.wordData[i]) && this.wordData['type']==0){
                        this.$message.error("请选择关联项目")
                        document.querySelector('#one').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                    case "activityName":
                      if(cEmpty.test(this.wordData[i])){
                        this.$message.error("请输入活动名称")
                        document.querySelector('#two').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                    case "pro_leader":
                      if(cEmpty.test(this.wordData[i])){
                        this.$message.error("请输入活动负责人")
                        document.querySelector('#three').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                    case "college":
                      if(cEmpty.test(this.wordData[i])){
                        this.$message.error("请选择所在学院")
                        document.querySelector('#three').scrollIntoView({ behavior: "smooth" });
                        return false;;
                      }
                      break;
                    case "tel":
                      if(cEmpty.test(this.wordData[i])){
                        this.$message.error("请输入联系电话")
                        document.querySelector('#three').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }else if(!checkPhone.test(this.wordData[i])){
                        this.$message.error("请输入正确的手机号");
                        document.querySelector('#three').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                    case "activityTime":
                      if(cEmpty.test(this.wordData[i][0])){
                        this.$message.error("请选择活动时间")
                        document.querySelector('#four').scrollIntoView({ behavior: "smooth" });
                        return false;;
                      }
                      break;
                    case "member":
                        let num = 0;
                        this.wordData[i].forEach(item=>{
                          for(let j in item){
                            if(cEmpty.test(item[j])){
                              num++;
                            }
                          }
                        
                        })
                        if(num>0){
                          this.$message.error("请填完指导老师信息");
                          document.querySelector('#five').scrollIntoView({ behavior: "smooth" });
                          return false;
                        }
                      break;
                    case "activityPlan":
                      if(cEmpty.test(this.wordData[i][0])){
                        this.$message.error("请输入活动计划");
                        document.querySelector('#six').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                    case "expectations":
                      if(cEmpty.test(this.wordData[i][0])){
                        this.$message.error("预期目标");
                        document.querySelector('#seven').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                    case "eventAudience":
                      if(cEmpty.test(this.wordData[i][0])){
                        this.$message.error("活动受众面")
                        document.querySelector('#nine').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                    case "fundingPlan":
                      if(cEmpty.test(this.wordData[i][0])){
                        this.$message.error("经费支出计划")
                        document.querySelector('#ten').scrollIntoView({ behavior: "smooth" });
                        return false;
                      }
                      break;
                  }
                }
                this.submitHint = true;
            },
            changeActivity(){
              let pram = {
                uid:this.$store.state.userInfo.userid,//用户ID
                aid:this.wordData['acId'],
                tit:this.wordData['activityName'],//活动名称
                courseId:this.wordData['associatedProjects'],//关联项目ID
                pLeader:this.wordData['pro_leader'],//活动负责人
                mon:this.total,//预算经费
                st:this.wordData['student'],//参与学生人数
                ct:JSON.stringify(this.wordData['member']),//活动指导老师
                chp:JSON.stringify({
                  activityPlan:this.wordData['activityPlan'],//活动计划
                  expectations:this.wordData['expectations'],//预期目标
                  eventAudience:this.wordData['eventAudience'],//活动受众面
                  fundingPlan:this.wordData['fundingPlan'],//经费支出计划
                }),//活动信息
                cid:this.wordData['college'],//学院ID,
                ph:this.wordData['tel'],//联系电话
                beg:JSON.stringify(this.wordData['activityTime']),//活动时间
                f:JSON.stringify(this.wordData['fund']),//预算经费明细
                appltTime:this.wordData['applicationDate'],//申请日期
                mp:JSON.stringify(this.wordData['expenditureMothPlan']),//月支出计划
              }
              this.ajax.post(this.$store.state.api+"/UpdateActivityWordData",pram).then(result=>{
                if(result['data']==1){
                  this.$message.success("活动修改成功");
                  this.submitHint = false;
                }else{
                  this.$message.error("活动修改失败")
                }
                this.getData();
              }).catch(err=>{
                console.log(err)
              })
            },
            getActivityWord(){
              // if(this.wordData['type']==0){
                // this.$message.info("正在下载创客活动表单");
                makerActivityWord(this.wordData,this.total)
              // }else if(this.wordData['type']==1){
                // this.$message.info("正在下载个人创客表单")
              // }
            }
          },
          computed:{
            total() {
              let num = 0;
              for(let i in this.wordData['fund'])num += Number(this.wordData['fund'][i]);
              return num;
              // return (this.wordData.fund.facility*1 + this.wordData.fund.materials*1+this.wordData.fund.process*1+ this.input*1+this.wordData.fund.authenticate*1+ this.wordData.fund.match*1+this.wordData.fund.activity*1+this.wordData.fund.affair*1)/10000
            }
          },
          mounted(){
            this.getData();
          }
      }
  </script>
  
  <style lang="less">
  #makerActivityWordDetail{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .projectApplication1{
        width: 100%;
    }
  }
  </style>