<!--
  @description:使用工具制作公告/资审公告/邀请函
  @Modifier: haoFx
  @routerPath:
  @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 :key="uploadKey" class="toolCenterOne">
        <!-- 文件上传一 -->
        <div>
          <el-upload
            v-show="principalList.length===0"
            ref="upload"
            :on-success="onSuccess"
            accept=".pdf"
            :action="upLoadFileUrl"
            :limit="1"
            :data="upLoadData"
            :show-file-list="false"
            :headers="importHeaders"
            multiple
          >
            <el-button @click="uploadBefore($event)">
              (请上传已盖章公告pdf文件,不要超过500M)
            </el-button>
          </el-upload>
        </div>
        <div>
          <downloadFile v-show="false" ref="downloadFile" :data="upLoadData" :file-list="principalList" />
        </div>
        <div>
          <!-- 只显示文件 -->
          <upload
            ref="upload"
            :data="upLoadData"
            :auto-delete="true"
            :auto-upload="false"
            file-ref="fileRef"
            title=""
            :is-upload="false"
            @onFileDelete="refresh"
          />
        </div>
      </div>
      <div v-show="principalList.length" :key="uploadKeyOther" class="toolCenter">
        <div class="uploadBut">
          <div>
            <el-upload
              ref="upload"
              style="position: absolute;"
              accept=".doc, .docx, .pdf, .png, .jpg, .zip;.jpeg;.txt;.xlsx;. xls;.ppt;.pptx;.rar"
              :action="upLoadFileUrl"
              :data="upLoadDatOther"
              :show-file-list="false"
              :headers="importHeaders"
              multiple
              :on-success="onSuccess"
            >
              <el-button @click="uploadBefore($event)">
                请上传附件：(大小不要超过500M)
              </el-button>
            </el-upload>
          </div>
          <!-- <div>
            <el-button style="position: absolute;" type="primary" @click="uploadSubmit">
              提交附件
            </el-button>
          </div> -->
        </div>
        <div class="toolCenterOther" style=" width:100%;  position: relative">
          <!-- 只显示文件 -->
          <upload
            ref="upload"
            :data="upLoadDatOther"
            :auto-delete="true"
            :auto-upload="false"
            file-ref="fileRef"
            title=""
            :is-upload="false"
          />
        </div>
      </div>
      <!--保存按钮-->
      <div class="but_footer">
        <div class="but_footer-h" />
        <div class="but_footer-but">
          <el-button @click="prevStep">
            上一步
          </el-button>
          <el-button v-show="principalList.length" type="primary" @click="uploadSubmit">
            提交
          </el-button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* api*/
import { queryBaseTenderBulletinInfo, webConfirmBulletinComplete
} from '@/api/bidding/bidBulletin'// 查询是否公告提交
import { getOpenToolsUrl } from '@/api/bidding/bidBulletin'
import submitTenderingBulletin from './submitTenderingBulletin' // 公告预览提交页面
/* 混合开发方法-参数字段*/
import { tenderBulletinInitGroupMixin } from './../mixins/tenderBulletinInitGroupMixin'// 字典信息
import { tenderBulletinMixin } from './../mixins/tenderBulletinMixin'// 公用方法字段信息
import { tenderStageTimeRule } from './../mixins/tenderStageTimeRule'// 招标公告时间规则
import { toolMakeMixins } from '@/views/bidding/mixins/toolMakeMixins'// 上传文件公共
export default {
  name: 'ToolMakeBulletin',
  components: {
    submitTenderingBulletin
  },
  mixins: [tenderBulletinInitGroupMixin, tenderBulletinMixin, tenderStageTimeRule, toolMakeMixins],
  data() {
    return {
      // 文件一
      upLoadData: {
        bizId: this.$route.query.bulletinId, // 业务主键Id
        fileType: 'bulletin_template_pdf_base'// 文件类型
      },
      // 文件二
      upLoadDatOther: {
        bizId: this.$route.query.bulletinId, // 业务主键Id
        fileType: 'attachment'// 文件类型
      },
      tenderId: this.$store.getters.tenderBase.tenderId, // 项目信息
      tenderMethod: this.$store.getters.tenderBase.tenderMethod, // 方式
      bulletinId: this.$route.query.bulletinId, // 公告Id
      bulletinInterval: '', // 定时器-公告预览
      toggle: true // 现在页面是否可以制作公告
    }
  },
  watch: {
    'uploadKey'(val) {
      // 打开弹框加载数据
      if (val) {
        this.getMakeFile(this.bulletinId, 'bulletin_template_pdf_base')
      }
    }
  },
  created() {
    this.previewInterval()// 定时器-公告预览
  },
  destroyed() {
    clearInterval(this.bulletinInterval)// 清除定时器
  },
  methods: {
    onSuccess(val) {
      this.refresh()
    },
    // 上传事件
    uploadSubmit() {
      console.log(this.firstAttachment[0].fileId)
      const data = {
        bulletinId: this.bulletinId, // 公告Id
        fileId: this.firstAttachment[0].fileId// 文件id
      }
      webConfirmBulletinComplete(data).then((res) => {

      })
    },
    // 使用工具端制作公告
    openToolsUrl() {
      // 招标规则限制时间
      if (this.tenderMethod === '00') {
        // 时间规则校验成功执行 then
        this.tenderStageTimeRule().then(() => {
          getOpenToolsUrl(this.bulletinId).then(res => {
            window.open(`${res.data}`, '_self') // 调用工具使用
            this.toggle = false
          })
        })
      } else {
        getOpenToolsUrl(this.bulletinId).then(res => {
          window.open(`${res.data}`, '_self') // 调用工具使用
          this.toggle = false
        })
      }
    },
    // 上一步
    prevStep() {
      // router携带参数
      const pathData = {
        ...this.$route.query
      }
      this.$emit('stepPage', 'prev', pathData)// 步骤条切换方法 prev 上一步
    },
    // 定时器-公告预览
    previewInterval() {
      this.queryBulletinStatus()
      this.bulletinInterval = setInterval(() => {
        this.queryBulletinStatus()
      }, 2000)
    },
    // 查询公告是否提交
    queryBulletinStatus() {
      const data = {
        tenderId: this.tenderId, // 项目Id
        bulletinId: this.bulletinId// 公告Id
      }
      queryBaseTenderBulletinInfo(data).then((res) => {
        const { auditStatus } = res.data
        // 审核状态
        if (auditStatus === '00' || auditStatus === '01') { // 00审核中,01通过
          // 携带参数
          const query = {
            ...this.$route.query
          }
          this.$router.push({ path: '/bidding/projectDrive/bulletin/makeTenderingBulletinPdf', query: query })
        }
      })
    }
  }
}
</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;
    }
  }
  .toolCenter{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    }
    .toolCenterOther{
          display: flex;
            top:50px;
    justify-content: center;
    align-items: center;
    }

.uploadBut{
  top:1px;
  position: absolute;
  width:250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toolCenterOne{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;

}
</style>
