<template>
  <div>
    <ht-template-preview
      ref="httemplate"
      :template-key="key"
      :single="single"
      :task-type="taskType"
      :def-key="defKey"
      :data-view="dataView"
      :is-join-flow="isJoinFlow"
      :table-height="tableHeight"
      :parameterq-querys="querys"
    ></ht-template-preview>
    <project-submission-dialog ref="projectSubmissionDialog" @handleRefresh="handleRefresh" ></project-submission-dialog>
    <processing-record-dialog  ref="processingRecordDialog" ></processing-record-dialog>
  </div>
</template>

<script>
  import ProjectSubmissionDialog from "../dialog/projectSubmissionDialog";
  import ProcessingRecordDialog from "../dialog/processingRecordDialog";
  export default {
    name: 'TemplatePreview',
    components: {ProcessingRecordDialog, ProjectSubmissionDialog},
    props: {
      templateKey: {
        type: String,
        default: '',
      },
      parameterqQuerys: {
        type: String,
        default: '',
      },
      single: {
        type: String,
        default: '',
      },
      taskType: {
        type: String,
        default: '',
      },
      defKey: {
        type: String,
        default: '',
      },
      dataView: {
        type: Object,
        default: function () {
          return null
        },
      },
      isJoinFlow: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        key: this.templateKey,
        querys: this.parameterqQuerys,
      }
    },
    computed: {
      tableHeight() {
        let iframeURL =
          parent.document.getElementById('template-iframe-dialog_iframe') &&
          parent.document.getElementById('template-iframe-dialog_iframe')
            .contentWindow.location.href
        let isDialog = false
        if (iframeURL) {
          isDialog = this.getparameterFromURL(iframeURL, 'isDialog')[1] || false
        }
        return this.$baseTableHeight(30,isDialog)
      },
    },
    created() {
      if (!this.key && this.$route.meta.templateKey) {
        this.key = this.$route.meta.templateKey
      }
      if (!this.parameterqQuerys && this.$route.params.parameterqQuerys) {
        this.querys = this.$route.params.parameterqQuerys
      }
    },
    methods: {
      getparameterFromURL(url, para) {
        var reg = new RegExp('[?&]' + para + '=([^&]+)', 'g')
        var matcher = reg.exec(url)
        if (matcher != null) {
          return matcher
        }
        return ''
      },
      showProjectSubmissionDialog(type,row){
        this.$refs.projectSubmissionDialog.open(type,row);
      },
      showProcessingRecordDialog(row){
        this.$refs.processingRecordDialog.open(row);
      },
      handleRefresh() {
        console.log("this.$refs.httemplate",this.$refs.httemplate)
        this.$refs.httemplate.init()
      }
    },
  }
</script>
<style lang="scss">
  .summary-table {
    padding: 10px 24px 24px 24px;
    .project-column {
      .cell {
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
    }
    .summary-num {
      .summary-table-field {
        font-size: 18px;
        color: #4ba232;
        font-weight: bold;
      }
    }
  }
  .custom-summary {
    padding: 10px 24px 24px 24px;
  }
  .data_view {
    .table-main {
      flex: unset;
      // height: 100%;
    }
    .top_btn_col {
      .data-form-list__top-btn {
        margin-left: 10px;
        margin-bottom: 10px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  .import-log-dialog {
    .ht-table-panel {
      padding: 0 48px 13px 48px;
    }
  }
  .failure-reason-dialog {
    .el-dialog__body {
      padding: 32px 48px 48px 48px;
      .error-info {
        padding: 16px;
        color: #e55555;
        background: rgba(249, 249, 249, 0.39);
      }
    }
  }
  .template-preview {
    .top_btn_col > .el-button {
      &:first-child {
        border: var(--themeColor);
        background-color: var(--themeColor);
        color: #fff;
      }
    }
  }
  @media print {
    body {
      height: auto !important;
    }

    .notprint {
      display: none;
    }
    .el-table__fixed {
      display: none;
    }
    .el-table_1_column_1 {
      display: none;
    }
    .el-table__body-wrapper {
      overflow: hidden;
      position: relative;
      max-height: fit-content !important;
      height: auto;
      width: 100% !important;
    }

    .ht-table-panel {
      width: 100%;
      max-height: fit-content !important;
      height: auto !important;
    }
    // .el-table__cell {
    //   border: 2px solid #ebeef5 !important;
    // }

    .ht-table-panel {
      padding: 0;
      height: auto;
      overflow: hidden;
    }
    .top_btn_col {
      display: flex;
      align-items: center;
      .el-button {
        margin-right: 10px;
      }
    }

    tr {
      page-break-inside: avoid !important;
    }

    .el-table .cell {
      white-space: pre-wrap !important;
      text-overflow: unset !important;
      width: 100% !important;
    }

    // .el-table {
    //   max-height: fit-content !important;
    //   height: auto !important;
    //   width: 100%;
    //   .el-table__header-wrapper table,
    //   .el-table__body-wrapper table {
    //     width: 100% !important;
    //     table-layout: auto !important;
    //   }
    //   .el-table__body,
    //   .el-table__footer,
    //   .el-table__header {
    //     table-layout: auto !important;
    //   }
    // }
    // @page {
    //   /* 纵向展示（高度展示内容更多） */ /* size: portrait;*/ /* 横向（宽度展示内容更大） */
    //   size: landscape; /* 打印的边距 上右下左 */
    //   margin: 1cm 2cm 1cm 2cm;
    // }
    .el-table thead.is-group th {
      text-align: center;
    }
    // tbody {
    //   text-align: center;
    //   border: 1px solid #000;
    // }
    // // tr,
    // th {
    //   border: 1px solid #000;
    // }
    // .el-table th.el-table__cell.is-leaf,
    // .el-table td.el-table__cell,
    // .el-table td.el-table__cell,
    // td {
    //   border: 1px solid #000;
    // }
    tbody > tr > th,
    tbody > tr > td,
    tfoot > tr > td,
    thead > tr > th {
      border: 1px solid rgb(238, 235, 235) !important;
    }
    .el-table__header {
      border: 1px solid rgb(238, 235, 235) !important;
    }
    .el-table__header > tbody > tr > th,
    .el-table__header > tbody > tr > td,
    .el-table__header > tfoot > tr > td,
    .el-table__header > thead > tr > th {
      border: 1px solid rgb(238, 235, 235) !important;
    }
    .el-table__body > tbody > tr > th,
    .el-table__body > tbody > tr > td,
    .el-table__body > tfoot > tr > td,
    .el-table__body > thead > tr > th {
      border: 1px solid rgb(238, 235, 235) !important;
    }

    /*减小单元格间距*/
    .el-table th,
    .el-table td {
      padding: 0 0;
    }
    /*显示底部边框 估计打印时伪元素把border覆盖了 height设为0隐藏伪元素*/
    .el-table::before {
      height: 0;
    }

    /*显示右边框*/
    .el-table--group::after,
    .el-table--border::after {
      width: 0;
    }
    table,
    tbody,
    thead {
      width: 100% !important;
    }

    colgroup {
      position: absolute;
      width: 100% !important;
    }
    table {
      width: 100% !important;
    }
    .cell > span {
      white-space: pre-wrap !important;
    }
    .el-table {
      height: 100% !important;
      max-height: fit-content !important;
      width: 100% !important;
    }
    .el-table__body-wrapper {
      height: 100% !important;
      max-height: fit-content !important;
      width: 100% !important;
    }
    .table_layout_wrap {
      margin: 0 !important;
    }
    // .el-table__fixed,
    // .el-table__fixed-right,
    // .el-table__fixed-right-patch
    // {
    //   display: none !important;
    // }
    .dropdown-upload__btn {
      .el-button-group {
        .el-button {
          &:first-child {
            height: 28px !important;
            line-height: 28px;
            span {
              display: flex;
              align-items: center;
              margin-top: -8px;
            }
          }
        }
      }
    }
  }
</style>