<template>
  <div class="preview-form__content" style="height: 100%">
    <div class="form-container-header">
      <span>审批内容</span>
    </div>
    <div class="form-content">
      <ht-online-form
        v-if="html"
        class="custom-form"
        :html="html"
        :data="data"
        :permission="permission"
        :is-view="isView"
        :mobile-mode="true"
        :extend-prop="extendProp"
      />
    </div>
  </div>
</template>
<script>
  import form from '@/api/formContent.js'

  export default {
    name: 'FormDetail',
    props: ['formId'],
    data() {
      return {
        dataInstId: '',
        html: null,
        data: null,
        permission: null,
        isView: false,
        extendProp: {
          initFillData: true, // 子表默认预览时初始化
        },
      }
    },
    created() {
      var $ = require('jquery')
      let _me = this
      let handlerJs = function (rep) {
        const currentUser = _me.$store.state.login.currentUser

        let data = _me.data
        eval(rep.diyJs)
      }

      let handler = function (rep) {
        console.log(rep)
        if (rep.bpmForm.id) {
          form.preview(rep.bpmForm.id, handlerJs)
        }
        _me.data = rep.data
        if (rep.permission) {
          _me.permission = rep.permission
        }
        _me.html = rep.bpmForm.formHtml
      }
      if (this.formId) {
        if (this.formId.indexOf('_') > 0) {
          //临时预览
          form.previewDesignTemp(this.formId, handler)
        } else {
          //id预览
          form.previewDesignVue(this.formId, handler)
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .preview-form__moblie {
    -webkit-overflow-scrolling: touch;
  }
  .form-container {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 8px;
  }
  .form-container-header {
    display: flex;
    align-items: center;
    padding: 8px 0 8px 5px;
  }

  .form-container-header > span {
    border-left: 3px solid #2761ff;
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    color: #666;
  }

  .form-content {
    padding: 20px 10px;
    background-color: #fff;
    width: 100vw;
    overflow: auto;
    height: calc(100% - 80px);
    ::v-deep {
      .el-row {
        padding-right: 10px;
        .ht-charts {
          padding: 12px 16px;
        }
      }
      .formT_box {
        .add-sub-btn {
          margin: 8px 2px 2px 0;
        }
      }
      .mobile-ht-form-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        border-bottom: 1px solid #ebeef5;
        .el-form-item__label {
          width: 120px;
        }
        .el-form-item__content {
          flex: 1;
          margin-left: 0 !important;
          .mobile-number-location {
            align-items: center;
          }
        }
      }
      .mobile-ht-form-item.ht-form-item-top-label {
        .el-form-item__label {
          margin-top: 0 !important;
        }
        flex-direction: column;
      }
      .mobile-map-form-item,
      .mobile-relevant-flow__form-item,
      .mobile-qrcode-form-item,
      .mobile-opinion-form-item,
      .mobile-textarea-form-item {
        display: block;
      }
      .mobile-map-form-item {
        .el-form-item__content {
          margin-left: 120px !important;
        }
      }
    }
  }
</style>
