<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <!-- 导航 -->
      <div class="top">
        <div class="span">
          <span @click="btn(0)" :class="sub == 0 ? 'style' : ''">项目进度</span>
          <span @click="btn(1)" :class="sub == 1 ? 'style' : ''">项目信息</span>
        </div>
        <div class="daochu" v-if="sub == 1" @click="download()">项目导出</div>
      </div>
      <!-- 进度 -->
      <!-- <div class="img" v-if="sub == 0">
        <img :src="imgUrl.tg" v-if="state == 0" />
        <img :src="imgUrl.btg" v-if="state == 1" />
        <img :src="imgUrl.shz" v-if="state == 2" />
        <img :src="imgUrl.zxz" v-if="state == 3" />
      </div>-->
      <!-- 项目流程 -->
      <div class="bobb" v-if="sub == 0">
        <div class="left">
          <div class="time">
            <template v-for="(time,index) in zDate.date">
              <span v-if="index < 5" :key="index">{{time}}</span>
            </template>
          </div>
          <div class="jdt">
            <!-- 已申报 -->
            <img class="sx0" :src="imgUrl.sx0" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type != 0" />
            <img class="d1" :src="imgUrl.d1" v-if="zDate.type == 0" />
            <!-- 审核中 -->
            <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type != 1" />
            <img class="d1" :src="imgUrl.d1" v-if="zDate.type == 1" />
            <!-- 审核通过 -->
            <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type != 5" />
            <img class="d1" :src="imgUrl.d1" v-if="zDate.type == 5" />
            <!-- 评审中 -->
            <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type != 6" />
            <img class="d1" :src="imgUrl.d1" v-if="zDate.type == 6" />
            <!-- 评审通过 -->
            <img class="sx1" :src="imgUrl.sx1" alt />
            <img class="d0" :src="imgUrl.d0" v-if="zDate.type != 10" />
            <img class="d1" :src="imgUrl.d1" v-if="zDate.type == 10" />
            <!-- end -->
            <img class="sx1" :src="imgUrl.sx1" alt />
          </div>
          <div class="bb">
            <div class="o">
              <span>项目已申报</span>
              <img class="oo" :src="imgUrl.d0" alt />
            </div>
            <div>
              <span>初筛审核中</span>
              <img class="oo" :src="imgUrl.d0" alt />
            </div>
            <div class="div-v">
              <span>初筛审核通过</span>
              <img class="oo" :src="imgUrl.d0" alt />
              <section v-if="zDate.type === 5">
                <span style="color:#e60012;font-size:20px;">总分: {{zDate.score}}分</span>
                <span style="color:#999;font-size:16px;">（及格分数: 70）</span>
              </section>
            </div>
            <div>
              <span>立项评审中</span>
              <img class="oo" :src="imgUrl.d0" alt />
            </div>
            <div>
              <span>立项评审通过</span>
              <img class="oo" :src="imgUrl.d0" alt />
              <section v-if="zDate.type === 10">
                <span style="color:#e60012;font-size:20px;">总分: {{zDate.score}}分</span>
                <span style="color:#999;font-size:16px;">（及格分数: 70）</span>
              </section>
            </div>
          </div>
        </div>
        <div class="right">
          <p>项目流程说明</p>
          <ul>
            <li v-for="(list,index) in text" :key="index">{{list}}</li>
          </ul>
        </div>
      </div>
      <!-- 项目信息 -->
      <div class="boxx" v-if="sub == 1" :class="popupStatus == true ? 'fliter' : ''" id="pdfDom">
        <h3>一、基本信息</h3>
        <div class="one-o">
          <ul>
            <li>项目名称：{{zData.name}}</li>
            <li>项目申报单位：{{zData.company}}</li>
            <li>项目类型：{{zData.tid}}</li>
            <li>项目落地区域：{{zData.rid}}</li>
            <li>一级项目方向：{{zData.first_level}}</li>
            <li>二级项目方向：{{zData.secondary}}</li>
            <li>项目服务领域：{{zData.fieldeara}}</li>
            <li>项目有效期: {{zData.aterm + '至' + zData.fterm}}</li>
            <li>申报单位属性：{{zData.attribute}}</li>
            <li>通讯地址：{{zData.postaladdress}}</li>
            <li>电子信箱：{{zData.pmail}}</li>
            <li>传真电话：{{zData.fax_tel}}</li>
            <li>邮政编码：{{zData.postalcode}}</li>
          </ul>
          <ul>
            <li>法定代表人：{{zData.plegal}}</li>
            <li>法人代码：{{zData.plcode}}</li>
            <li>负责人姓名：{{zData.pname}}</li>
            <li>职务：{{zData.poster}}</li>
            <li>办公电话：{{zData.poffice_tel}}</li>
            <li>手机：{{zData.aphone}}</li>
            <li>联系人姓名：{{zData.cname}}</li>
            <li>职务：{{zData.cpost}}</li>
            <li>办公电话：{{zData.coffice_tel}}</li>
            <li>手机：{{zData.cphone}}</li>
          </ul>
          <ul>
            <li>项目主责单位：{{zData.prespo}}</li>
            <li>通讯地址：{{zData.respoadd}}</li>
            <li>邮政编码：{{zData.respopcode}}</li>
            <li>传真电话：{{zData.respophone}}</li>
            <li>电子信箱：{{zData.respomail}}</li>
            <li>负责人姓名：{{zData.respopname}}</li>
            <li>职务：{{zData.respopost}}</li>
            <li>手机：{{zData.respoptel}}</li>
            <li>办公电话：{{zData.respoophone}}</li>
            <li>负责人姓名：{{zData.respocname}}</li>
            <li>职务：{{zData.respocpost}}</li>
            <li>办公电话：{{zData.respocophone}}</li>
            <li>手机：{{zData.respoctel}}</li>
          </ul>
        </div>
        <h3>二、申报单位简介:</h3>
        <div class="one-e">
          <p v-html="zData.decldes">{{zData.decldes}}</p>
        </div>
        <h3>三、项目简介</h3>
        <div class="one-e">
          <p v-html="zData.prodes">{{zData.prodes}}</p>
        </div>
        <h3>四、项目论证</h3>
        <h4>(一) 项目实施的必要性、可行性</h4>
        <div class="one-e">
          <p v-html="zData.prodemo">{{zData.prodemo}}</p>
        </div>
        <h4>(二) 项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间</h4>
        <h5>1.项目实施的已有基础</h5>
        <div class="one-e">
          <p v-html="zData.prodemojc">{{zData.prodemojc}}</p>
        </div>
        <h5>2.具体方法和途径</h5>
        <div class="one-e">
          <p v-html="zData.prodemotj">{{zData.prodemotj}}</p>
        </div>
        <h5>3.进度安排</h5>
        <div class="one-e">
          <p v-html="zData.prodemojd">{{zData.prodemojd}}</p>
        </div>
        <h5>4.预期效果</h5>
        <div class="one-e">
          <p v-html="zData.prodemoxg">{{zData.prodemoxg}}</p>
        </div>
        <h5>5.项目团队及分工</h5>
        <div class="one-e">
          <p v-html="zData.prodemofg">{{zData.prodemofg}}</p>
        </div>
        <h4>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h4>
        <div class="one-e">
          <p v-html="zData.prodemotwo">{{zData.prodemotwo}}</p>
        </div>
        <h3>五、经费预算:</h3>
        <div id="one_e" v-html="zData.funds">{{zData.funds}}</div>
        <h3>六、申报单位承诺:</h3>
        <div class="one-e">
          <p>{{msg}}</p>
        </div>
        <h3>七、项目主责单位意见 :</h3>
        <div class="one-e">
          <p>
            <span>
              <a :href="dataFile[0].url" :download="dataFile[0].name">
                <span>下载</span>
              </a>
              <!-- <a
                 @click="downloadTxt(zData.proimages,'fileName')"
              >
                <span>下载</span>
              </a>
              &nbsp;|&nbsp;
              <span @click="preview()">预览</span>-->
            </span>
          </p>
        </div>
      </div>
      <section id="preview" v-if="popupStatus">
        <div class="tc" @click="preview()"></div>
        <section class="tc-text">
          <a
            v-for="(list,index) in dataFile"
            :key="index"
            :href="list.url"
            target="_blank"
          >{{list.url}}</a>
        </section>
        <!-- <img class="tc-text" :src="zData.proimages" /> -->
      </section>
    </div>
    <footer-nav class="footer" :class="popupStatus == true ? 'fliter' : ''"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from '../../components/HeaderNav'
import FooterNav from '../../components/FooterNav'
var preD = function (e) {
  e.preventDefault()
}
export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data () {
    return {
      index_num: 2,
      sub: 0,
      imgUrl: {
        tg: require('../../../static/img/tg.png'),
        btg: require('../../../static/img/btg.png'),
        shz: require('../../../static/img/shz.png'),
        zxz: require('../../../static/img/zxz.png'),
        sx0: require('../../../static/img/sx0.png'),
        sx1: require('../../../static/img/sx1.png'),
        d0: require('../../../static/img/d0.png'),
        d1: require('../../../static/img/d1.png')
      },
      msg: '我们确认项目申报内容的真实性,并愿意承担相应的责任',
      state: 0,
      zt: 2,
      popupStatus: false,
      text: [
        '第一步：填写并提交项目申报书',
        '第二步：线上初筛审核',
        '第三步：项目初筛结果查询',
        '第四步：线下立项评审',
        '第五步：立项结果查询'
      ],
      zData: [],
      zDate: [],
      dataFile: null,
      id: Number,
      fileName: null
    }
  },
  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: {
    // downloadTxt(content, filename) {
    //   var eleLink = document.createElement('a');
    //   eleLink.download = filename;
    //   eleLink.style.display = 'none';
    //   // 字符内容转变成blob地址
    //   var blob = new Blob([content]);
    //   eleLink.href = URL.createObjectURL(blob);
    //   // 触发点击
    //   document.body.appendChild(eleLink);
    //   eleLink.click();
    //   // 然后移除
    //   document.body.removeChild(eleLink);
    // window.location.href = o; // 本窗口打开下载
    // window.open(centent, '_blank'); // 新开窗口下载
    // },
    download () {
      this.getPdf('pdfDom', '项目申请书')
    },
    preview () {
      this.popupStatus = !this.popupStatus
    },
    btn (index) {
      let s = this.sub
      s = index
      this.sub = s
    },
    getData () {
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/project/details',
        data: {
          id: _this.id
        }
      }).then(res => {
        if (res.data.data.code === 200) {
          _this.zData = res.data.data.data.ProjectDetails
          _this.zDate = res.data.data.data.ProjectReview
          let arr = JSON.parse(_this.zData.proimages)
          let newArr = arr.map(element => {
            return ({ name: element.name, url: element.url })
          })
          _this.dataFile = newArr
          // console.log(_this.dataFile)
          // let index = _this.zData.proimages.lastIndexOf("\/")
          // _this.fileName = _this.zData.proimages.substring(index+1,_this.zData.proimages.length)
        } else {
          alert('请求失败！')
        }
      })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {
    this.id = this.$route.params.id
    this.getData()
  },
  mounted () { }
}
</script>

<style lang='scss' scoped>
#one_e {
  width: 100%;
  margin-top: 27px;
  margin-bottom: 60px;
  padding-top: 27px;
}

#preview {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 999;

  .tc {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000, $alpha: 0.58);
    position: fixed;
    top: 0%;
    left: 0%;
  }

  .tc-text {
    // width: 350px;
    // width:100%;
    padding: 30px;
    box-sizing: border-box;
    height: auto;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    a {
      display: inline-block;
      margin-top: 10px;
      cursor: pointer;
    }
  }
}

.fliter {
  -webkit-filter: blur(10px);
  -o-filter: blur(10px);
  -moz-filter: blur(10px);
  filter: blur(10px);
}

.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  #box {
    margin: 40px auto 0;
    width: 1200px;
    background-color: #ffffff;
    padding: 35px 30px 100px;
    box-sizing: border-box;
    position: relative;

    .boxx {
      margin-top: 68px;
      width: 100%;
      box-sizing: border-box;

      .one-e {
        width: 100%;
        margin-top: 27px;
        margin-bottom: 60px;

        p {
          font-family: 'MicrosoftYaHei';
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #666666;
        }

        span {
          font-family: 'MicrosoftYaHei';
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #7471ef;
        }
      }

      .one-o {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        margin-bottom: 60px;

        ul {
          width: 350px;
          height: 674px;
          box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
          border-radius: 5px;
          padding: 30px 0 0 20px;
          box-sizing: border-box;

          li {
            font-family: 'MicrosoftYaHei';
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            margin-bottom: 28px;
            color: #333333;
          }
        }
      }
      h3 {
        font-family: 'MicrosoftYaHei';
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
      h4 {
        margin-top: 38px;
        font-family: 'MicrosoftYaHei';
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
      h5 {
        margin-top: 38px;
        font-family: 'MicrosoftYaHei';
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }

    .bobb {
      margin-top: 110px;
      width: 100%;
      height: 974px;
      padding: 0 40px 0 11px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        width: 419px;
        height: 974px;
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;

        .time {
          width: 120px;
          height: 734px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 72px;

          .span {
            display: inline-block;
            width: 119px;
            height: 18px;
            font-family: 'MicrosoftYaHei';
            font-size: 22px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }
        }

        .jdt {
          width: 32px;
          height: 974px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;

          .sx0 {
            width: 3px;
            height: 79px;
          }

          .sx1 {
            width: 3px;
            height: 153px;
          }

          .wzx {
            width: 20px;
            height: 21px;
          }

          .zx {
            width: 20px;
            height: 21px;
          }
        }

        .bb {
          margin-top: 70px;
          width: 180px;
          height: 750px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: flex-start;

          .o {
            padding-left: 5px;
            box-sizing: border-box;
            width: 170px;
            height: 36px;
            position: relative;
            border-bottom: 2px solid #b0c3cd;

            img {
              width: 10px;
              height: 10px;
              position: absolute;
              right: 0%;
              bottom: -16%;
            }
          }

          div {
            padding-left: 5px;
            box-sizing: border-box;
            width: 100%;
            height: 36px;
            position: relative;
            border-bottom: 2px solid #b0c3cd;

            img {
              width: 10px;
              height: 10px;
              position: absolute;
              right: 0%;
              bottom: -16%;
            }

            section {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              width: 132%;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              font-family: 'MicrosoftYaHei';
              position: absolute;
              left: -8%;
              bottom: -100%;
              white-space: nowrap;
            }
          }

          span {
            display: inline-block;
            width: 135px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            font-family: 'MicrosoftYaHei';
            font-size: 22px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
          }
        }
      }

      .right {
        padding: 35px 30px;
        box-sizing: border-box;
        width: 535px;
        height: 698px;
        box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
        border-radius: 10px;

        ul {
          margin-top: 48px;

          li {
            font-family: 'MicrosoftYaHei';
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 48px;
            letter-spacing: 0px;
            color: #666666;
          }
        }

        p {
          text-align: center;
          width: 100%;
          font-family: 'MicrosoftYaHei';
          font-size: 24px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 31px;
          letter-spacing: 0px;
          color: #333333;
        }
      }
    }

    .img {
      width: 119px;
      height: 95px;
      position: absolute;
      right: 0%;
      top: 1%;
      img {
        width: 119px;
        height: 95px;
      }
    }

    .top {
      width: 1140px;
      height: 38px;
      border-bottom: 1px solid #ccc;
      padding-left: 12px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .daochu {
        width: 96px;
        height: 32px;
        background-image: linear-gradient(
            69deg,
            #cc263f 0%,
            #f42b47 100%,
            #ed162d 100%,
            #e60012 100%
          ),
          linear-gradient(#e60012, #e60012);
        background-blend-mode: normal, normal;
        border-radius: 4px;
        font-family: 'MicrosoftYaHei';
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 32px;
        text-align: center;
        letter-spacing: 0px;
        color: #ffffff;
      }

      .span {
        span {
          margin-right: 40px;
          display: inline-block;
          width: 120px;
          height: 38px;
          text-align: center;
          font-family: 'MicrosoftYaHei';
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        .style {
          color: #e60012;
          position: relative;
          &::after {
            content: '';
            width: 120px;
            height: 2px;
            background-color: #e60012;
            position: absolute;
            bottom: 0%;
            left: 0%;
          }
        }
      }
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
