<template>
  <div class="preview">
    <ht-column :column-alias="alias"></ht-column>
  </div>
</template>

<script>
  import HtColumn from '@/components/HtColumn.vue'
  export default {
    name: 'PreviewColumn',
    components: {
      HtColumn,
    },
    computed: {
      alias() {
        return this.$route.query.alias
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .ht-data-sheets {
      .no-tabs {
        padding: 16px 12px !important;
      }
      .form-list--header {
        display: none;
      }
      .template-preview-container {
        .template-content {
          display: block;
        }
        .field-wrap {
          padding: 12px;
        }
        .footer-wrap,
        .form-list--footer {
          display: none !important;
        }
        .van-cell__value {
          background: #f9f9f9;
          border-radius: 8px 8px 8px 8px;
        }
        .field-item--title,
        .field-content {
          padding: 0 !important;
        }

        .field-item--title {
          width: 100% !important;
        }
        .form-list--content {
          height: 100% !important;
          min-height: 150px;
          scrollbar-width: 0;
          &::-webkit-scrollbar {
            width: 0;
          }
          -ms-overflow-style: none; /*这将影响IE10+*/
          scrollbar-width: none; /*这将影响Firefox*/
        }
        .van-cell {
          padding: 0 !important;
        }
        .van-list > div:nth-last-of-type(2) {
          margin-bottom: 0 !important;
        }

        .van-cell:nth-last-of-type(1) {
        }
      }

      .van-pull-refresh__track {
        overflow-y: auto;
        height: 92vh;
      }
    }
  }
</style>
