<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>
    <test-dialog ref="testDialog" @handleRefresh="handleRefresh"></test-dialog>
    <place-order-dialog ref="placeOrderDialog" @handleRefresh="handleRefresh"></place-order-dialog>
    <member-info-dialog ref="memberInfoDialog" @handleRefresh="handleRefresh"></member-info-dialog>
    <gas-cylinder-archives-dialog ref="gascylinderarchivesdialog"></gas-cylinder-archives-dialog>
  </div>


</template>

<script>
import testDialog from '@/components/dialog/testDialog.vue'
import placeOrderDialog from "../dialog/placeOrderDialog";
import MemberInfoDialog from "../dialog/memberInfoDialog";
import GasCylinderArchivesDialog from "../dialog/gasCylinderArchivesDialog";
export default {
  name: 'TemplatePreview',
  components: {
    GasCylinderArchivesDialog,
    MemberInfoDialog,
    testDialog,
    placeOrderDialog
  },
  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 ''
    },
    showDialog(row) {
      console.log("应用",row,this.$refs.testDialog)
      this.$refs.testDialog.open()
    },
    showGasCylinderArchivesDialog(type,row){
      this.$refs.gascylinderarchivesdialog.open(type,row);
    },
    showMemberInfoDialog(row){
      console.log('打印row', row);
      this.$refs.memberInfoDialog.open(row);
    },
    showPlaceOrderDialog(row){
      this.$refs.placeOrderDialog.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>