<template>
  <div
    v-if="permission != 'n'"
    class="fullWidth ht-data-view"
    :class="{ 'mobile-data-view': isMobile || mobileMode }"
  >
    <ht-template-preview
      :template-key="templateKey"
      single="true"
      :mobile-mode="mobileMode"
      :data-view="dataView"
      is-control
      :is-show-summary="false"
      :autofocus="autofocus"
      :is-show-header="isMobile || mobileMode ? false : true"
      :show-title="dataView.showTitle"
      :table-max-height="dataView.tableMaxHeight"
    ></ht-template-preview>
  </div>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import mobileMode from '@/mixins/mobileMode.js'
  export default {
    name: 'HtDataView',
    mixins: [permission, mobileMode],
    props: {
      templateKey: {
        type: String,
        required: true,
      },
      options: {
        type: String,
        required: false,
      },
      mobileMode: {
        type: Boolean,
        default: false,
      },
      // 在表单中的控件不自动聚焦
      autofocus: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        dataView: {},
      }
    },
    mounted() {
      //数据视图
      if (this.options) {
        this.dataView = JSON.parse(this.options)
      }
    },
    created() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .fullWidth {
    width: 100%;
  }
  ::v-deep {
    .el-table th.gutter {
      display: table-cell !important;
    }
  }
  .mobile-data-view {
    ::v-deep {
      .form-list {
        padding: 0 16px;

        .form-list--content {
          height: 100%;
          overflow-y: unset;
        }
        .van-cell {
          padding-top: 0;
          border: 1px solid #e6e6e6;
          border-radius: 8px;
          .field-item--title {
            padding-top: 8px;
            padding-bottom: 0;
            .title,
            .status {
              padding-top: 16px;
              &:empty {
                display: none;
              }
            }
          }
          .field-content {
            padding: 0 0 16px 12px;
            .field-items {
              .field-item-value__wrap {
                line-height: 17px;
                font-size: 12px;
              }
            }

            .field-items-wrap {
              .field-item-value__wrap {
                width: 100%;
                .file-list__wrap.mobile-file-list {
                  width: 100%;
                }
              }
            }
          }
        }
        .form-list--footer {
          padding: 0;
          .footer-btn--del {
            display: none;
          }
        }
      }
    }
  }
</style>
