<!--
  @description: 开标大厅-开标后-查看开标结果界面弹框
  @Modifier: haoFx
  @routerPath:
  @date: 2020/4/10-15:08
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      :fullscreen="true"
      :title="dialogTitle"
    >
      <div class="mt10 mr10" style="text-align:right">
        <el-button type="primary" @click="lookMargin">
          查看保证金缴纳情况
        </el-button>
      </div>

      <pdf :pdf-url="pdfUrl" style="height: 100%" />
    <!--<el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
            <el-col :span="4">
        &lt;!&ndash;标段tab&ndash;&gt;
        <bid-announcement-tabs class="fl"/>
      </el-col>
      <el-col :span="24">
        &lt;!&ndash;开标一览表pdf查看&ndash;&gt;
        <pdf :pdf-url="pdfUrl"/>
      </el-col>
      <el-col :span="4">
        &lt;!&ndash;     <el-button type="danger" style="width: 100%" @click="exit">
          退出
        </el-button>&ndash;&gt;
        <ul class="sing_operation p16-0">
          <li class="sing_btn active pointer">
            <div class="is-circle">
              <i class="iconfont icon-049caozuo_yinliang"/>
            </div>
            <p>语音唱标</p>
          </li>
          <li class="sing_btn pointer">
            <div class="is-circle">
              <i class="iconfont icon-jingyin"/>
            </div>
            <p>停止语音</p>
          </li>
          <li class="sing_btn pointer">
            <div class="is-circle">
              <i class="iconfont icon-yigouxuan"/>
            </div>
            <p>结束唱标</p>
          </li>
        </ul>
        <el-button type="primary" style="width: 100%">
          发起投标人签字
        </el-button>
      </el-col>
    </el-row>-->
    </el-dialog>
    <tenderDeliveryDialog :dialog-data="dialogData" />
  </div>
</template>

<script>
import { readImageRoot, getOpeningFileByStageId } from '@api/bidding/bidOpening'
/* 组件*/
import { bidOpeningMixin } from '../mixins/bidOpeningMixin'
import pdf from '@comp/common/pdf/pdf'
import tenderDeliveryDialog from './tenderDelivery-dialog' // 查看保证金
export default {
  name: 'BidAnnouncement',
  components: {
    pdf,
    tenderDeliveryDialog
  },
  mixins: [bidOpeningMixin],
  data() {
    return {
      dialogTableVisible: false, // 弹框是否打开
      readImageUrl: readImageRoot, // 预览图片
      pdfUrl: '',
      dialogTitle: '', // 弹框标题
      dialogData: {
        dialogVisible: false
      }
    }
  },
  created() {
  },
  methods: {
    // 打开弹框 获取开标一览表pdf
    // data.type 00 开标大厅查看唱标结果 01 开标结果查看确认文件
    openBidAnnouncement(data) {
      this.dialogTableVisible = true
      if (data.type === '00') {
        this.dialogTitle = `查看${this.bidAnnouncementText}结果`
      } else {
        this.dialogTitle = '查看确认文件'
      }
      const params = {
        stageId: data.stageId,
        openStageType: data.openStageType
      }
      getOpeningFileByStageId(params).then(response => {
        if (response.data) {
          const url = this.readImageUrl + response.data.path
          this.pdfUrl = encodeURIComponent(url)
          this.$emit('handelBidAnnouncement')
        }
      }).catch(() => {
        this.$emit('handelBidAnnouncement')
      })
    },
    // 查看保证金缴纳情况
    lookMargin() {
      this.dialogData.dialogVisible = true
    },
    // 退出
    exit() {
      /*      this.$router.push({
        path: '/bidOpeningHall/bidAnnouncement',
        query: {
          ... this.$route.query
        }
      })*/
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
  @import '~@assets/style/common/public.less';
  /deep/.el-dialog__body{
    padding: 0;
    height: calc(100vh - 38px);
    iframe{
      height: 100%;
    }
  }
  .tab_right{
    /*width:calc(100% - 420px);*/
  }
  .sing_operation{
    /*width: 210px;*/
    display: flex;
    justify-content: space-between;
    .sing_btn{
      flex: 1;
      text-align: center;
      .is-circle{
        padding: 10px;
        border-radius: 50%;
        border: 1px solid #909399;
        line-height:1;
        display: inline-block;
        i.iconfont{
          font-size: 20px;
        }
      }
      &.active{
        .is-circle{
          border:1px solid @hyacinthine;
        }
        color: @hyacinthine;
      }
    }
  }
</style>
