<!--
  @description:使用工具制作变更公告
  @Modifier: haoFx
  @routerPath: /bidding/projectDrive/changeBulletin/toolMakeChangeBulletin
  @date: 2020/1/19-14:30
-->

<template>
  <section>
    <div>
      <div class="wrap">
        <img src="@assets/img/common/loudspeaker.png">
        <h2>暂无{{ bulletinTitle }}!</h2>
        <p>请使用工具端制作{{ bulletinTitle }}</p>
        <el-button type="primary" @click="openToolsUrl">
          使用工具制作{{ bulletinTitle }}
        </el-button>
      </div>
      <!--保存按钮-->
      <div class="but_footer">
        <div class="but_footer-h" />
        <div class="but_footer-but">
          <el-button @click="prevStep">
            上一步
          </el-button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* api*/
import { getOpenToolsUrl } from '@/api/bidding/changeBulletin'
import { getChangeBulletinInfo } from '@/api/bidding/changeBulletin' // 查询变更公告状态
/* 混合开发方法-参数字段*/
import { changeBulletinCommon } from './mixins/changeBulletinCommon' // 公用方法字段信息
export default {
  name: 'ToolMakeClarification',
  mixins: [changeBulletinCommon],
  data() {
    return {
      bulletinTitle: '变更公告',
      bulletinInterval: '' // 定时器-公告预览
    }
  },
  created() {
    this.previewInterval() // 定时器-公告预览
    this.bulletinContentData.bizId = this.changeBulletinId // 变更公告id
  },
  destroyed() {
    clearInterval(this.bulletinInterval) // 清除定时器
  },
  methods: {
    // 使用工具端制作公告
    openToolsUrl() {
      getOpenToolsUrl(this.changeBulletinId).then((res) => {
        window.open(`${res.data}`, '_self') // 调用工具使用
      })
    },
    // 上一步
    prevStep() {
      this.$router.push({
        path: this.changeBulletinPath.changeBulletinAddPath, // 新增路由
        query: {
          ...this.$route.query
        }
      })
    },
    // 定时器-公告预览
    previewInterval() {
      this.initChangeBulletinStatus()
      this.bulletinInterval = setInterval(() => {
        this.initChangeBulletinStatus()
      }, 2000)
    },

    // 查看变更公告状态
    initChangeBulletinStatus() {
      getChangeBulletinInfo(this.changeBulletinId)
        .then((res) => {
          const { auditStatus } = res.data
          // 审核状态
          if (auditStatus === '00' || auditStatus === '01') {
            // 00审核中,01通过
            // 携带参数
            const query = {
              ...this.$route.query
            }
            this.$router.push({
              path: this.changeBulletinPath.pdfDetailPath, // 预览pdfUrl
              query: query
            })
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="less">
.wrap {
  width: 250px;
  margin: 10px auto;
  text-align: center;
  h2 {
    margin: 30px 0 16px;
  }
  p {
    font-size: 16px;
    color: #999999;
    margin-bottom: 30px;
  }
  img {
    width: 165px;
    height: 165px;
  }
}
</style>
