<template>
  <div ref="ht-online-form" name="online-form">
    <el-skeleton v-if="loadStatus == 0" :rows="6" animated />
    <component
      :is="currentComponent"
      v-else-if="loadStatus > 0"
      :name="formName"
      :data="data"
      :permission="permission"
      :is-view="isView"
      :is-print="isPrint"
      :mobile-mode="mobileMode"
      :form-key="formKey"
      class="online-form-wrap form-table__wrap"
      :init-fill-data="initFillData"
      :extend-prop="extendProp"
      :is-support-mobile="isSupportMobile"
      :inst-id="instId"
      :def-id="defId"
      :is-preview="isPreview"
      @load-fail="handleLoadFail"
      @load-success="handleLoadSuccess"
    />
    <div v-else class="loaded-fail__div">
      表单加载失败,可能是表单配置发生了变化,请联系管理员...
    </div>
  </div>
</template>
<script>
  import _ from 'lodash'
  import utils from '@/utils.js'
  import onlineHottable from '@/mixins/onlineHottable.js'
  import onlineSubtable from '@/mixins/onlineSubtable.js'
  import regionValidator from '@/mixins/regionValidator.js'
  import emitter from '@/mixins/emitter.js'
  import CustomQuery from '@/services/CustomQuery.js'
  import elementResizeDetectorMaker from 'element-resize-detector'
  import Vue from 'vue'
  export default {
    name: 'HtOnlineForm',
    componentName: 'HtOnlineForm',

    mixins: [regionValidator, emitter],
    provide() {
      return {
        instId: this.instId,
        headerData: {},
        nodeId: '',
        data: this.data,
        registerAdvOptChild: (callback) => {
          this.childrenAdvSearch.push(callback)
          // 返回注销函数
          return () => {
            this.childrenAdvSearch = this.childrenAdvSearch.filter(
              (fn) => fn !== callback
            )
          }
        },
      }
    },
    props: {
      html: String,
      data: Object,
      permission: Object,
      initFillData: {
        type: Boolean,
        default: false,
      },
      isView: {
        type: Boolean,
        default: false,
      },
      isPrint: {
        type: Boolean,
        default: false,
      },
      isLook: {
        type: Boolean,
        default: false,
      },
      mobileMode: {
        type: Boolean,
        default: false,
      },
      flowKey: String,
      formId: String,
      formKey: String,
      extendProp: {
        type: Object,
        default: () => {
          return {}
        },
      },
      isSupportMobile: {
        type: Boolean,
        default: false,
      },
      instId: [String, Number],
      defId: [String, Number],
      isPreview: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        erd: null, //监听器
        currentComponent: '',
        formName: `onlineForm_${utils.getName()}`,
        loadStatus: 0,
        subBackfill: new Map(),
        hotTableFillback: String,
        scopeName: `form-${utils.getName()}`,
        getDataPromiseResolve: null,
        getDataPromiseReject: null,
        isFormulasDisabled: false, // 公式联动控制是否联动
        childrenAdvSearch: [], // 存储后代方法引用
      }
    },
    watch: {
      html: {
        handler: function (newVal) {
          if (newVal) {
            this.init()
          }
        },
        immediate: true,
      },
      isFormulasDisabled: {
        handler: function (newVal) {
          this.$emit('setButtonDisabled', newVal)
        },
        immediate: true,
      },
    },
    created() {
      CustomQuery.caches = {}
      let _me = this
      this.$nextTick(() => {
        _me.$emit('page-load-complete')
      })
      this.$on('global-validate-result', (result) => {
        if (result) {
          this.getDataPromiseResolve(this.data)
        } else {
          this.getDataPromiseReject()
        }
      })
      window.addEventListener('beforeunload', (e) => this.beforeunloadFn(e))
      // 清除关联查询缓存
    },
    mounted() {
      //监听dom尺寸变换去响应控件尺寸
      this.erd = elementResizeDetectorMaker()
      this.$nextTick(() => {
        this.erd.listenTo(this.$refs['ht-online-form'], (ele) => {
          _.debounce(() => {
            this.$root.$emit('online-form-resize')
          }, 1000)
        })
      })
    },
    beforeDestroy() {
      this.beforeunloadFn()
      this.erd.uninstall(this.$refs['ht-online-form'])
      window.removeEventListener('beforeunload', (e) => this.beforeunloadFn(e))
    },
    methods: {
      beforeunloadFn(e) {
        sessionStorage.getItem('Cancel_The_Calculation')
          ? sessionStorage.removeItem('Cancel_The_Calculation')
          : ''
      },
      handleLoadSuccess(res) {
        this.loadStatus = 1
        this.$emit('load-success', res)
      },
      handleLoadFail() {
        this.loadStatus = -1
      },
      collapseAllChildren() {
        this.childrenAdvSearch.forEach((cb) =>
          cb({
            timestamp: Date.now(),
            command: 'COLLAPSE_ADV_SEARCH',
          })
        )
      },
      getData(validate) {
        return new Promise((resolve, reject) => {
          this.getDataPromiseResolve = resolve
          this.getDataPromiseReject = reject
          if (!validate) {
            resolve(this.data)
          } else {
            this.collapseAllChildren()
            this.$nextTick(() => {
              // 执行校验逻辑
              this.validateRegion(`[name='${this.formName}']`).then(
                (errorItems) => {
                  if (errorItems.length > 0) {
                    reject(errorItems)
                  } else {
                    this.broadcast('HtGlobalValidate', 'global-validate')
                  }
                }
              )
            })
          }
        })
      },
      init() {
        this.currentComponent = 'runtimeTemplate_' + this.scopeName
        this.loadStatus = 1
        Vue.component(this.currentComponent, {
          componentName: this.currentComponent,
          mixins: [onlineHottable, onlineSubtable],
          props: {
            html: String,
            data: Object,
            permission: Object,
            initFillData: {
              type: Boolean,
              default: false,
            },
            isView: {
              type: Boolean,
              default: false,
            },
            isPrint: {
              type: Boolean,
              default: false,
            },
            formKey: String,
            mobileMode: {
              type: Boolean,
              default: false,
            },
            extendProp: {
              type: Object,
              default: () => {
                return {}
              },
            },
            isSupportMobile: {
              type: Boolean,
              default: false,
            },
            instId: [String, Number],
            defId: [String, Number],
            isPreview: {
              type: Boolean,
              default: false,
            },
          },
          template: this.html,
        })
      },
    },
  }
</script>
<style lang="scss">
  .el-tooltip__popper.ht-tooltip_question {
    max-height: 300px;
    overflow-y: auto;
  }
  .ht-form-item-top-label {
    .el-form-item__label {
      text-align: left !important;
      width: 100% !important;
      line-height: 24px !important;
      margin-top: 12px !important;
    }
    .el-form-item__content {
      margin-left: 0 !important;
      width: 100%;
      .field-tail {
        text-align: left;
        display: inline-block;
        justify-content: flex-start !important;
        line-height: 24px;
      }
      .field-tail__wrap {
        .mobile-readonly {
          text-align: left;
          line-height: 24px;
          padding: 8px 0;
        }
      }
      .mobile-upload {
        position: absolute;
        top: 2px;
        right: 0;
        width: 150px;
      }
    }
  }
  .transition {
    outline: 1px dotted #85a5ff;
    outline-width: 2px;
    outline-offset: -1px;
  }
  .el-tabs--border-card {
    border: 1px solid #ebeef5;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .tabcheck_btn {
    text-align: right;
    padding-top: 20px;
  }
  .loaded-fail__div {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #f56c6c;
  }
  .main-table {
    border-collapse: separate;
    margin-bottom: 20px;
    tr > td {
      &:empty {
        // border: none !important;
      }
    }
  }
  @media print {
    .printHide {
      display: none;
    }
    .main-field {
      line-height: 1.5 !important;
    }
    .el-main {
      padding: 0px !important;
    }
    .sub-table-header ::v-deep th {
      min-width: 110px !important;
    }
    .el-table__header {
      width: 100% !important;
    }
    .el-table__body {
      width: 100% !important;
    }
    .gutter {
      display: none !important;
    }
    .form-table {
      border: 1px solid rgb(238, 235, 235) !important;
    }
    .form-table > tbody > tr > th,
    .form-table > tbody > tr > td,
    .form-table > tfoot > tr > td,
    .form-table > 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.is-leaf,
    .el-table td {
      border-bottom: 1px solid rgb(238, 235, 235) !important;
    }
  }
  .main-title {
    word-break: break-all;
    text-align: right;
    font-weight: 100;
    color: #545252;
    font-size: 14px;
    padding: 0px 10px !important;
    font-weight: bold;
    line-height: 28px;
  }
  .main-field {
    padding: 15px;
    line-height: 0;
    .unit {
      display: inline-block;
    }
  }
  .online-form-wrap {
    [name='online-form'] .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
    .el-input {
      width: 100% !important;
    }
    .el-pagination__editor.el-input {
      width: 50px !important;
    }
    .el-pagination .el-select .el-input {
      width: 100px !important;
    }

    .amap-page-container {
      .amap-toolbar,
      .amap-geolocation-con,
      .amap-scalecontrol,
      .amap-logo,
      .amap-copyright {
        z-index: 1 !important;
      }
    }
  }
  .el-tooltip__popper {
    p {
      width: 300px;
    }
  }
  .xh_table tfoot td:empty {
    padding: 0 !important;
    border: none !important;
  }
  .online-form-wrap {
    .table_layout_wrap,
    .grandson_table_wrap {
      overflow: auto;
      .form-table {
        width: 100%;
        //孙表table的斑马纹
        tr:nth-child(2n) {
          background: #fafafa;
        }
        .sub-table-header > th {
          text-align: center;
          background: #fafafa;
          border-bottom: 1px solid var(--borderColor, #f2f2f2);
          border-right: 1px solid var(--borderColor, #f2f2f2);
        }
      }
    }
    .grandson_table_wrap table {
      border-left: 1px solid var(--borderColor, #f2f2f2);
    }
    .table_layout_wrap {
      td {
        .inputs {
          position: relative;
        }
      }
    }

    .form-table__container,
    .ht-data-lists,
    .ht-data-view,
    .sub-div-pc {
      margin-bottom: 24px;
    }
  }
  .inputs {
    .file-list__wrap {
      padding-left: 0;
      .file-item {
        .file-icon,
        .file-close__icon {
          padding-top: 11px;
        }
      }
    }
  }
  .form-table__wrap {
    .form-table > thead > tr > th:last-child {
      min-width: 100px !important;
    }
  }
  .inputs {
    .edui-default .edui-editor {
      border: none;
    }
  }
  td.is-required:before {
    content: '*';
    color: #f56c6c;
    margin-right: 0;
  }
  // div子表孙表移动和pc样式
  // pc样式
  .sub-div-pc_header,
  .sun-div-pc_header {
    height: 30px;
    line-height: 30px;
    background: #fafafa;
    font-weight: bold;
    font-size: 14px;
  }
  .sun-div-container {
    .el-collapse-item__header {
      background: var(--headerBgColor) !important;
      border-bottom-color: var(--borderColor) !important;
    }
  }
  .xh_table,
  .formT_box {
    .sub-collapse-item-title {
      display: flex;
      flex: 1;
      justify-content: space-between;
      //padding-right: 4px;
    }
    .sun-collapse-item-title {
      display: flex;
      flex: 1;
      justify-content: space-between;
      //padding-right: 4px;
    }
    .sub-collapse,
    .sun-collapse {
      border: 1px solid var(--borderColor) !important;
      border-radius: 0 0 8px 8px;
      & > .el-collapse-item {
        margin-bottom: 0;
      }
    }
  }
  // 移动样式
  .sub-div-mobile {
    .sub-div-header {
      .el-icon-delete {
        font-size: 18px;
        color: #8c8c8c;
      }
    }
    .formT_box {
      overflow-y: hidden;
      .el-collapse-item__content > table {
        width: 100%;
      }

      .sub-collapse {
        border-radius: 8px;
        border: none;

        .sub-collapse-item {
          background: #fff;

          .el-collapse-item__header {
            .sub-collapse-item-title {
              display: flex;
              flex: 1;
              justify-content: space-between;
              height: 44px;
              line-height: 44px;

              > span {
                font-weight: bold;
                font-size: 15px;
                color: #222;
              }

              .el-icon-copy-document,
              .el-icon-delete {
                display: inline-block;
                font-size: 18px;
                color: #8c8c8c;
              }
              .el-button + .el-button {
                margin-left: 5px;
              }
            }

            .el-icon-arrow-right:before {
              content: '';
              color: #666;
            }
          }
          .el-collapse-item__wrap {
            border: none;
            .el-collapse-item__content {
              padding-bottom: 0;
            }
          }
        }
      }

      .add-sub-btn {
        width: 100%;
        color: #409eff;
        font-size: 14px;
        height: 48px;
        margin: 0 !important;

        i {
          font-weight: 600;
          font-size: 16px;
        }
      }
      .add-sub-btn.is-disabled {
        color: #c0c4cc;
      }

      .sun-div-container {
        padding: 0 16px 24px 16px;
        border: none;
        border-bottom: 0.01333rem solid #eee;
        .el-header {
          height: 48px !important;
          line-height: 48px !important;
          background: #fff !important;
          .el-icon-delete {
            font-size: 18px;
            color: #8c8c8c;
          }
        }

        .sun-collapse {
          border-radius: 8px;
          margin-top: 8px;
          border: none;

          .sun-collapse-item {
            background: #f9f9f9;
            border-radius: 8px;
            margin-top: 8px;

            .el-collapse-item__header {
              background: none;
              border: none;

              .sun-collapse-item-title {
                display: flex;
                flex: 1;
                justify-content: space-between;
                padding-right: 16px;
                height: 40px;
                line-height: 40px;

                > span {
                  font-weight: bold;
                  font-size: 14px;
                  color: #333;

                  &::before {
                    display: inline-block;
                    content: '';
                    width: 3px;
                    height: 16px;
                    background: #409eff;
                    vertical-align: sub;
                    margin-right: 9px;
                  }
                }

                .el-icon-copy-document,
                .el-icon-delete {
                  display: inline-block;
                  border: 1px solid #409eff;
                  border-radius: 50%;
                  padding: 3px;
                  color: #409eff;
                  background: #fff;
                }
              }
            }

            .el-collapse-item__wrap {
              background: #fff;
              border: 1px solid #e6e6e6;
              padding: 0;
            }
          }
        }

        .add-sun-btn {
          width: 100%;
          border-radius: 4px;
          color: #409eff;
          font-size: 14px;
          border: 1px solid #e6e6e6;
          height: 44px;
          margin-top: 8px;

          i {
            font-weight: 600;
            font-size: 16px;
          }
        }

        .add-sun-btn.is-disabled {
          color: #c0c4cc;
        }
      }
    }
  }

  ::v-deep .el-table__header {
    width: 100% !important;
    table-layout: fixed;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
</style>
<style lang="scss" scoped>
  $--padding: 16px;
  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 16px;
  }
  ::v-deep .el-date-editor {
    .el-input__prefix {
      position: absolute;
      left: calc(100% - 28px);
      top: 0;
    }
    input {
      padding-left: 15px;
    }
    .el-input__suffix {
      right: 13px;
      .el-icon-circle-close {
        margin-right: 8px;
      }
    }
  }
  ::v-deep {
    .form-table {
      width: 100%;
    }
    .gridMargin {
      margin-bottom: 24px;
      border-radius: 8px;
      .ht-form-item.el-form-item {
        padding-top: $--padding;
        padding-bottom: $--padding;
        margin-bottom: 0;
      }
    }
    .gridMargin + .gridMargin {
      margin-top: -24px;
    }
    //div子孙
    .xh_table,
    .formT_box {
      .gridMargin {
        margin-bottom: $--padding;
      }
      .gridMargin + .gridMargin {
        margin-top: -$--padding;
      }
    }
    .ht-el-col-bottom {
      display: flex;
      flex-direction: column;

      justify-content: flex-end;
    }
    .ht-el-col-middle {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  ::v-deep {
    .ht-sun-table-container {
      margin-bottom: 24px;
    }
    .el-form-item--small.el-form-item:not(:first-child) {
      margin-bottom: 24px;
    }

    //模板的 折叠面板
    .template-ht-collapse {
      margin-bottom: 24px;
      .el-collapse-item__wrap {
        margin: 0 16px;
      }
      .el-collapse-item__content {
        .gridMargin {
          margin-bottom: 16px;
        }
      }
    }
    .el-form-item--small.el-form-item.el-form-item-no-margin-bottom {
      margin-bottom: 0;
    }
    .el-divider--horizontal {
      margin: 16px 0 32px;
    }
  }
  ::v-deep .el-range__icon {
    position: absolute;
    right: 0;
    top: 2px;
  }
  ::v-deep .el-row--flex {
    margin-left: 0 !important;
    margin-right: 0 !important;
    // margin-bottom: 32px;
    .el-col[style*='border'] {
      .el-form-item {
        margin: 24px 24px 22px;
      }
    }
  }
  .xh_table {
    ::v-deep {
      //孙表table的斑马纹
      tr:nth-child(2n) {
        background: #fafafa;
      }
    }
  }
  ::v-deep {
    .wbkxnone,
    .wkxnone,
    .wkxsolid1px,
    .wkxsolid2px,
    .wkxsolid3px,
    .wkxsolid5px,
    .wkxdashed1px,
    .sykxnone,
    .skxnone,
    .xkxnone,
    .zkxnone,
    .ykxnone,
    .nbkxnone {
      border: none;
    }

    $number: 1, 2, 3, 5;
    @each $num in $number {
      .sykxsolid#{$num}px {
        & > .el-col {
          border: #{$num}px solid;

          // border-right: 1px;
          border-color: inherit;
          &:last-child {
            border-right: #{$num}px solid;
            border-color: inherit;
          }
        }
      }

      .wbkxsolid#{$num}px {
        & > .el-col + .el-col {
          border-left: #{$num}px;
          border-right: #{$num}px;
        }
        & > .el-col {
          border: #{$num}px solid;
          border-color: inherit;
          &:first-child {
            border-right: #{$num}px;
          }
          &:last-child {
            border-right: #{$num}px solid;
            border-color: inherit;
          }
        }
      }

      .skxsolid#{$num}px {
        & > .el-col {
          border-top: #{$num}px solid;
          border-color: inherit;
        }
      }

      .xkxsolid#{$num}px {
        & > .el-col {
          border-bottom: #{$num}px solid;
          border-color: inherit;
        }
      }

      .ykxsolid#{$num}px {
        & > .el-col {
          border-right: #{$num}px solid;
          border-color: inherit;
        }
      }

      .zkxsolid#{$num}px {
        & > .el-col:first-child {
          border-left: #{$num}px solid;
          border-color: inherit;
        }
      }

      .nbkxsolid#{$num}px {
        & > .el-col {
          border-color: inherit;
          &:first-child {
            border-right: #{$num}px solid;
            border-color: inherit;
            border-color: inherit;
          }
        }
        & > .el-col + .el-col {
          border-left: #{$num}px solid;
          border-color: inherit;
          margin-left: -#{$num}px;
        }
      }
    }

    .sykxdashed1px {
      & > .el-col {
        border: 1px dashed;

        // border-right: 1px;
        border-color: inherit;
        &:last-child {
          border-right: 1px dashed;
          border-color: inherit;
        }
      }
    }

    .wbkxdashed1px {
      & > .el-col + .el-col {
        border-left: 1px;
        border-right: 1px;
      }

      & > .el-col {
        border: 1px dashed;
        border-color: inherit;
        &:first-child {
          border-right: 1px;
        }
        &:last-child {
          border-right: 1px dashed;
          border-color: inherit;
        }
      }
    }

    .skxdashed1px {
      & > .el-col {
        border-top: 1px dashed;
        border-color: inherit;
      }
    }

    .xkxdashed1px {
      & > .el-col {
        border-bottom: 1px dashed;
        border-color: inherit;
      }
    }

    .ykxdashed1px {
      & > .el-col {
        border-right: 1px dashed;
        border-color: inherit;
      }
    }

    .zkxdashed1px {
      & > .el-col:first-child {
        border-left: 1px dashed;
        border-color: inherit;
      }
    }
    .nbkxdashed1px {
      & > .el-col {
        border-color: inherit;
        &:first-child {
          border-right: 1px dashed;
          border-color: inherit;
          border-color: inherit;
        }
      }
      & > .el-col + .el-col {
        border-left: 1px dashed;
        border-color: inherit;
        margin-left: -1px;
      }
    }
  }

  ::v-deep {
    .is-hasgridDescBorderBottom {
      border: none !important;
    }
    // .el-collapse-item__content,
    // .el-tab-pane,
    // .el-form {
    //   .gridDesc:not(:first-child) {
    //     margin-top: 20px;
    //   }
    // }
    .gridDesc {
      height: 40px;
      line-height: 40px;

      font-size: 16px;
      font-weight: 500;

      padding: 0 16px;
    }
    .form-table_rows {
      .el-main {
        padding: 0;
      }
    }
    .form-table_rows + .form-table_rows {
      .el-main {
        padding-top: 0 !important;
        margin-top: -20px !important;
      }
      tr:first-child {
        .main-title,
        .main-field {
          border-top: 0px !important;
        }
      }
    }
    // .gridMargin:first-child {
    //   margin-top: 12px !important;
    // }
    //有边框
    .gridMargin + .gridMargin {
      .ht-form-item.el-form-item {
        padding-top: $--padding;
        padding-bottom: $--padding;
      }
    }

    [linestyle^='sykx'] + [linestyle^='skx'],
    [linestyle^='sykx'] + [linestyle^='wbkx'],
    [linestyle^='sykx'] + [linestyle^='sykx'],
    [linestyle^='wbkx'] + [linestyle^='sykx'],
    [linestyle^='wbkx'] + [linestyle^='skx'],
    [linestyle^='wbkx'] + [linestyle^='wbkx'] {
      & > .el-col {
        border-top: none;
      }
    }

    //没有边框
    // .wbkxnone,
    // .wkxnone,
    // .wkxsolid1px,
    // .wkxsolid2px,
    // .wkxsolid3px,
    // .wkxsolid5px,
    // .wkxdashed1px,
    // .sykxnone,
    // .skxnone,
    // .xkxnone,
    // .zkxnone,
    // .ykxnone,
    // .nbkxnone
    .is-noGridBorderission + .is-noGridBorderission {
      .ht-form-item.el-form-item {
        margin-top: 0px !important;
      }
    }
    //有边框的没边框
    .is-hasGridBorderission + .is-noGridBorderission {
      .ht-form-item.el-form-item {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
      }
    }
    .is-noGridBorderission {
      & > div:first-child.el-col {
        padding-left: 0 !important;
        label {
          span {
            margin-left: 0 !important;
          }
        }
      }

      & > div:last-child.el-col {
        padding-right: 0 !important;
        margin-right: 0 !important;
      }
    }
    //栅格布局列数为24
    .is-columns-span-all {
      & > .el-col {
        &:has(+ .el-col) {
          border-right: none !important ;
        }
      }
    }
  }

  ::v-deep .el-row--flex .el-input-number {
    width: 100%;
  }
  ::v-deep .el-collapse {
    border-top: none;
    border-bottom: none;
    // margin-bottom: 40px;
    .el-collapse-item__header {
      margin-bottom: 16px;
      height: 40px;
      line-height: 40px;
    }
    .el-collapse-item__header.is-active {
      border-bottom-color: #ebeef5;
    }
    .el-collapse-item__wrap {
      border-bottom: none;
      border-radius: 0 0 8px 8px;
      .el-collapse-item__content {
        padding-bottom: 0;
      }
    }
  }
  //模板的折叠面板
  ::v-deep .template-ht-collapse.el-collapse {
    .el-collapse-item .el-collapse-item__header {
      border-bottom-color: var(--borderColor, '#EBEBEB');
      background-color: var(--headerBgColor, '#F9F9F9');
    }

    .el-collapse-item {
      &:first-child {
        border-radius: 8px 8px 0 0;
        .el-collapse-item__header {
          border-radius: 8px 8px 0 0;
        }
      }
      &:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  //模板的hot-table
  ::v-deep .template-hot-table-layout {
    .ht_clone_left tbody th:first-child {
      border-bottom-left-radius: 8px;
    }
    .ht_master tbody td {
      &:first-child {
        border-bottom-left-radius: 8px;
      }
      &:last-child {
        border-bottom-right-radius: 8px;
      }
    }
  }
  ::v-deep .file-list__wrap .file-item {
    width: inherit;
    &:first-child {
      margin-top: 0px;
    }
  }

  ::v-deep .is-vertical {
    //border: 1px solid #f5f5f5;
    .el-header {
      height: 40px !important;
      line-height: 40px !important;
      background: #f2f2f2 !important;
      font-size: 16px;
      color: #222222;
      font-weight: bold;
    }
    .el-main {
      padding: 0 0 1px 0;
      margin-top: 0;

      .el-collapse-item__header {
        background: #f9f9f9;
        padding: 0 20px;
        margin-bottom: 0;
        color: #222;
        font-weight: bold;
        .sun-collapse-item-title {
          display: flex;
          flex: 1;
          justify-content: space-between;
        }
      }
      .el-collapse-item__wrap {
        padding: 16px 16px 0;
      }
      .el-collapse {
        margin-bottom: 0;
      }
    }
    .el-footer {
      width: calc(100% - 40px);
      margin-top: 16px;
    }
  }
  ::v-deep .sub-div-pc {
    .el-collapse-item__header {
      background: var(--headerBgColor) !important;
      border-color: var(--borderColor) !important;
    }
    .el-collapse-item:not(:first-child) {
      .el-collapse-item__header {
        border-top: 1px solid;
      }
    }
  }
  ::v-deep .formT_box {
    .el-collapse-item__arrow {
      display: none;
    }
    .el-collapse-item__content {
      overflow-x: auto;
    }
  }
  .preview-form__moblie {
    .preview-form__content {
      ::v-deep.form-content {
        padding: 20px 0 !important;
      }
      .form-table__wrap {
        ::v-deep .el-collapse .el-collapse-item__header {
          margin-bottom: 0;
        }
      }
    }
  }

  ::v-deep {
    .el-table__fixed-footer-wrapper tbody td.el-table__cell {
      background: #f9f9f9;
    }
    //子表之间间隔
    .form-table__container + .form-table__container {
      padding-top: 4px;
    }
    //合计列换行
    .el-table__fixed-footer-wrapper,
    .el-table__footer-wrapper {
      .cell {
        white-space: pre-line !important;
      }
    }

    .el-col-12 {
      margin-right: 0px !important;
    }

    //同步以前的模式 align=top 时
    .el-row--flex.is-align-top {
      -webkit-box-align: unset;
      -ms-flex-align: unset;
      align-items: unset;
    }
  }
  // 样式调整
  .online-form-wrap .table_layout_wrap {
    margin: 0 -20px;
  }
  ::v-deep .ht-tabs .el-tabs.el-tabs--top {
    .el-tabs__header {
      margin: 0 0 8px;
    }
    .el-tabs__content {
      padding: 0 2px;
    }
    .el-tabs__item.is-top:nth-child(2) {
      // padding-left: 0px;
    }
  }
  ::v-deep .ht-data-view {
    .template-view_change > .el-tabs__content {
      padding: 8px 0 0 0;
      height: calc(100% - 46px);
    }
  }

  //子表 读写分离的样式
  ::v-deep .sub-table-cell-readonly {
    width: 100%;
    min-height: 32px;
    cursor: pointer;
    background: #f5f7fb;
    text-align: center;
    span {
      line-height: 32px;
      display: inline-block;
      vertical-align: middle;
    }
    //选择器的tag
    .tag-wrap {
      span {
        padding: 0 3px;
        height: 24px;
        line-height: 24px;
      }
    }
  }
</style>
