<!--
  @description:使用工具制作合同
  @Modifier: zyy
  @routerPath:
  @date: 2021-6-21
-->

<template>
  <section>
    <div>
      <div class="wrap">
        <img src="@assets/img/common/loudspeaker.png">
        <h2>暂无合同附件!</h2>
        <p>请使用工具端制作合同附件</p>
        <el-button type="primary" @click="openToolsUrl">
          使用工具制作合同附件
        </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/contractManagement/index'
import { getBidtCalibrationTenderContractData } from '@/api/contractManagement/index' // 查看详情
/* 混合开发方法-参数字段*/
export default {
  name: 'ToolMake',
  data() {
    return {
      contractSource: '', // 合同来源00采购01招标
      id: '', // 合同id
      bulletinInterval: '', // 定时器-合同预览
      toggle: true // 现在页面是否可以制作公告
    }
  },
  created() {
    this.id = this.$route.query.id // 合同id
    this.previewInterval() // 定时器-合同预览
  },
  destroyed() {
    clearInterval(this.bulletinInterval) // 清除定时器
  },
  methods: {
    // 使用工具端制作合同
    openToolsUrl() {
      getOpenToolsUrl(this.id).then((res) => {
        window.open(`${res.data}`, '_self') // 调用工具使用
        this.toggle = false
      })
    },
    // 上一步
    prevStep() {
      this.$router.push({
        name: 'PurchaseAgreement', // 新增路由
        params: {
          id: this.id
        }
      })
    },
    // 定时器-预览
    previewInterval() {
      this.queryClarificationStatus()
      this.bulletinInterval = setInterval(() => {
        this.queryClarificationStatus()
      }, 2000)
    },
    // 查询审核状态
    queryClarificationStatus() {
      const data = {
        id: this.id
      }
      getBidtCalibrationTenderContractData(data).then((res) => {
        const { auditStatus } = res.data
        // 审核状态
        if (auditStatus === '00' || auditStatus === '01') {
          this.$router.push({
            path: '/contractManagement/purchaseAgreement-list'
          })
        }
      })
    }
  }
}
</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>
