<template>
  <div :class="{ 'ht-amis-page': aliasName }">
    <ht-template-preview
      v-if="!aliasName"
      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>
    <amis v-else :alias="aliasName" :locals="{ meta: $route.meta }" />
    <el-dialog
      v-if="amisDialogVisible"
      :visible.sync="amisDialogVisible"
      v-bind="amisDialogParams"
      append-to-body
    >
      <amis
        v-if="amisDialogVisible"
        :alias="amisDialogAlias"
        :locals="amisData"
      />
      <span slot="footer">
        <el-button @click="amisDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="amisDialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <stock-audit-dialog
      ref="stockAuditDialog"
      @handleRefresh="handleRefresh"
    ></stock-audit-dialog>
    <!-- 分配补货员dialog -->
    <distributionDialog
      ref="distributionDialog"
      @handleRefresh="handleRefresh"
    />
    <!-- 绑定货柜dialog -->
    <bindingContainersDialog
      ref="bindingContainersDialog"
      @handleRefresh="handleRefresh"
    />
    <!-- 商品库存-查看货物流水明细 -->
    <streamDialog ref="streamDialog"></streamDialog>
    <!-- 项目招标 -->
    <bidPageDialog
      ref="bidPageDialog"
      @handleRefresh="handleRefreshSupplier"
    ></bidPageDialog>
    <supplierTableDilog
      ref="supplierTableDilog"
      @handleRefresh="handleRefreshSupplier"
    ></supplierTableDilog>
    <initSupplierTableDilog
      ref="initSupplierTableDilog"
      @handleRefresh="handleRefreshSupplier"
    ></initSupplierTableDilog>
    <selectSupplierDilog
      ref="selectSupplierDilog"
      @handleRefresh="handleRefreshSupplier"
    ></selectSupplierDilog>
    <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 placeOrderDialog from "@/components/dialog/placeOrderDialog";
  import MemberInfoDialog from "@/components/dialog/memberInfoDialog";
  import GasCylinderArchivesDialog from "@/components/dialog/gasCylinderArchivesDialog";
  var _that = this
  export default {
    name: 'TemplatePreview',
    components: {
      // StockAuditDialog,
      // distributionDialog,
      // streamDialog,
      // bindingContainersDialog,
      // bidPageDialog,
      // supplierTableDilog,
      // initSupplierTableDilog,
      // selectSupplierDilog,
      placeOrderDialog,
      MemberInfoDialog,
      GasCylinderArchivesDialog
    },
    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,
        amisDialogVisible: false,
        amisDialogParams: {
          title: 'AMIS弹框',
          width: '50%',
        },
        amisDialogPage: {},
        amisData: {},
        aliasName: '',
        amisDialogAlias: '',
      }
    },
    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
      }
      this.init()
    },
    methods: {
      init() {
        this.aliasName = this.$route.meta.pageType === 'amis' ? this.key : ''
      },
      //商品入库审核对话框
      handleAudit(_this, row) {
        this.$refs.stockAuditDialog.showDialog(row)
      },
      showBidPage(row, action, _this) {
        _that = _this
        this.$refs.bidPageDialog.show(row, action)
      },
      handleRefreshSupplier() {
        _that.search()
      },
      //刷新列表页
      handleRefresh() {
        setTimeout(() => {
          this.$refs.httemplate.init()
        }, 300)
        this.$forceUpdate()
      },
      showSelectSupplier(row, action, _this) {
        _that = _this
        this.$refs.selectSupplierDilog.show(row, action)
      },
      showDistributionDialog(row) {
        this.$refs.distributionDialog.open(row)
      },
      showBindingContainersDialog(row) {
        this.$refs.bindingContainersDialog.open(row)
      },
      showSupplierList(row, _this) {
        _that = _this
        this.$refs.initSupplierTableDilog.show(row)
      },
      showBidPagePool(row, _this) {
        _that = _this
        this.$refs.supplierTableDilog.show(row, _this)
      },
      getparameterFromURL(url, para) {
        var reg = new RegExp('[?&]' + para + '=([^&]+)', 'g')
        var matcher = reg.exec(url)
        if (matcher != null) {
          return matcher
        }
        return ''
      },
      // 展示商品库存-流水明细弹窗
      showDialog(row) {
        this.$refs.streamDialog.open(row.id_)
      },
      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);
      },
      // 显示amis页面
      async showAMIS(aliasName, type, data, dialogParams) {
        if (data) {
          this.amisData = data
        }
        if (aliasName) {
          this.amisDialogAlias = aliasName
          // 传给弹框amis页面的参数
          this.amisData = {}
          this.amisDialogVisible = type === 'dialog'
          dialogParams && Object.assign(this.amisDialogParams, dialogParams)
          if (type === 'page') {
            // 如果是页面则aliasName传对应页面的路径
            this.$router.push(aliasName)
          }
        }
      },
    },
  }
</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;
            }
          }
        }
      }
    }
  }
  // 高级搜索字体高度不满问题
  .search-field-label {
    line-height: normal !important;
  }

  .ht-table-panel {
    .search-panel {
      background-color: #fff !important;
      position: relative;
      padding: 0 0 16px !important;
      &:after {
        content: '';
        position: absolute;
        left: -20px;
        right: -20px;
        height: 16px;
        bottom: -16px;
        background-color: var(--containerBgColor);
      }
      .el-form {
        display: flex;
        .search-panel__container {
          flex: 1;
          flex-shrink: 0;
          .search-panel__row {
            min-width: inherit;
          }
        }
      }
      .search-field__container {
        display: flex;
        height: 36px;
        margin-bottom: 0;
        .field-label-panel {
          flex-shrink: 0;
          position: relative;
          top: 2px;
        }
        .field-input-panel {
          flex: 1;
          width: inherit !important;
        }
        &:nth-of-type(n + 4) {
          margin-top: 16px;
        }
      }
      .search-btn__wrap {
        display: inline-flex;
        gap: 8px;
        flex-flow: row-reverse;
        height: 36px;
      }
      .el-input__inner {
        height: 36px !important ;
        line-height: 36px !important;
        border-radius: 4px !important;
      }
      .el-range-editor--mini {
        .el-range-input {
          position: relative;
          top: 2px;
        }
        .el-range__icon,
        .el-range__close-icon,
        .el-range-separator {
          line-height: 32px;
        }
      }
    }
  }

  .data_view {
    .button-container [plain] {
      color: var(--themeColor) !important;
    }
    .el-dropdown-menu__item[name='删除'] {
      color: red !important;
    }
    .el-button {
      border-radius: 4px;
    }
    .table-main {
      padding: 0;
      .toolbar-container {
        padding-top: 16px;
      }
      .ht-table-panel {
        padding: 16px;
      }
    }
    .top_btn_col {
      .el-button {
        background-color: var(--themeColor);
        border-color: var(--themeColor);
        color: #fff !important;
        height: 36px;
        &:hover {
          background-color: var(--themeColor) !important;
          border-color: var(--themeColor) !important;
        }
      }
    }
    .el-pagination {
      .el-pager li,
      .btn-prev,
      .btn-next {
        background-color: transparent;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
      }
      .el-input__inner {
        border-color: #d9d9d9;
        border-radius: 4px;
      }
    }
    .data-preview-wrap {
      gap: 16px;
      background-color: transparent;
      .el-aside {
        border-right-color: transparent !important;
        background-color: #fff;
      }
      .el-scrollbar,
      .el-container {
        height: $base-app-main-height;
      }
    }
    .el-tree-node__expand-icon {
      font-size: 16px;
    }
  }
  .base-main {
    .form-container {
      padding-top: 16px;
    }
  }
  .ht-amis-page {
    .cxd-Page-body {
      padding: 0;
    }
  }
</style>