<template>
  <div class="common-page-container">
    <div class="main" v-loading="loading">
      <div class="container_notice">
        <h1>{{ data.noticeTitle }}</h1>
        <el-divider></el-divider>
        <div class="notice_p">
          <p v-html="data.establishmentName"></p>
        </div>
        <div class="purtime">报名结束时间：{{ data.responseTimeDeadline }}</div>
        <div class="purtime">投标开始时间：{{ data.biddingStartTime }}</div>
        <div class="purtime">投标结束时间：{{ data.biddingEndTime }}</div>
        <div class="purtime">发布时间：{{ data.noticeReleaseTime }}</div>
        <div class="btn">
          <el-button
            type="primary"
            :loading="joining"
            plain
            v-if="(data.joinStatus == 0 || data.joinStatus == 5)"
            @click="handleJoin"
          >
            立即参与
          </el-button>
          <!-- <el-button type="danger" v-if="new Date(data.responseTimeDeadline)<new Date() " :loading="joining" plain  disabled>
            已结束
          </el-button> -->
          <el-button type="primary" :loading="joining" plain v-else disabled>
            已参与
          </el-button>
          
          <el-button type="primary" plain @click="back"> 返回首页 </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import api from '@/api/basicData.js'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'NoticeDetils',
  data() {
    return {
      joinStatus: '',
      data: {},
      currentUser: {},
      loading: false,
      joining: false,
      url: '',
    }
  },
  created() {},
  mounted() {
    console.log(this.$route.query)
    if (this.$route.query.noticeType == 3||this.$route.query.noticeType == 4) {
      this.url = '/projectApproval/v1/getInfoByIdAndUserId'
    } else {
      this.url = '/matApproval/v1/getInfoByIdAndUserId'
    }
    this.getById(this.$route.query.id)
    this.currentUser = JSON.parse(sessionStorage.getItem('currentUser'))
    console.log(this.currentUser, 'this.currentUser')
  },
  methods: {
    getById(ids) {
      this.currentUser = JSON.parse(sessionStorage.getItem('currentUser'))
      this.loading = true
      this.$http
        .post(
          '${portal}' +
            this.url +
            '?id=' +
            ids +
            '&userId=' +
            this.$route.query.userId
        )
        .then((res) => {
          this.loading = false
          if (res.data.state) {
            this.data = res.data.value
          }
        })
    },
    handleJoin() {
      this.joining = true
      let form = {
        noticeId: this.data.id,
        noticeTitle: this.data.noticeTitle,
        noticeType: this.data.noticeType,
        status: '',
        noticeCode: this.data.projectNumber,
        price: this.data.bond,
      }
      if (this.data.hasBond == 1) {
        form.status = 3
      }
      if (this.data.hasBond == 0) {
        form.status = 1
      }
      if (this.data.joinStatus == 0) {
        this.$http
          .post('${portal}/userParticipation/v1/participate', form)
          .then((res) => {
            console.log(res, 'data')
            if (res.data.state) {
              this.$confirm('参与成功！', '提示', {
                confirmButtonText: '确 定',
                type: 'success',
                showCancelButton: false,
              }).then(() => {
                if (this.data.noticeType == 1) {
                  this.$router.push({
                    name: 'participateRegistration',
                    path: '/platLayout/participateRegistration',
                    hash: '#participateMaterial',
                  })
                } else {
                  this.$router.push({
                    name: 'participateRegistration',
                    path: '/platLayout/participateRegistration',
                    hash: '#projectParticipate',
                  })
                }
              })
            }else{
              this.$message.error('请登录后参与！')
            }
            this.joining = false
          })
      }
    },
    back() {
      window.close()
    },
  },
}
</script>
  
  <style lang="scss" scoped>
h1 {
  margin: 0;
  padding: 0;
}
.common-page-container {
  background-color: #f6f6f6;
  height: 100%;
  overflow: auto;
}
.main {
  width: 1200px;
  margin: 0px auto;
}
.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.bbsl-pagination {
  bottom: 0px;
  position: relative;
  display: inline-block;
  padding: 30px 0 10px;
  overflow: hidden;
}

.container_notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
  background: #f6f6f6;
  h1 {
    font-size: 20px;
  }
  p {
    text-indent: 28pt;
    line-height: 27pt;
    p {
      font-size: 14pt;
      font-family: 楷体;
    }
  }
  .purtime {
    font-size: 16px;
    margin-top: 50px;
  }
  .btn {
    margin-top: 30px;
    text-align: center;
  }
}
/deep/ .el-button {
  padding: 15px 60px;
  span {
    font-size: 20px;
  }
}

.text {
  width: 100%;
  p {
    font-size: 16px;
  }
}
</style>
  <style>
.el-message-box .el-message-box__header .el-message-box__title span {
  font-size: 18px;
}
.notice_p * {
  font-size: 14pt;
  font-family: '楷体';
}
</style>
  