<template>
  <ht-template-form
    :template-key="templateKey"
    :action="action"
    :is-share="isShare"
    :open-type="openType"
    :data-param="params"
    :showButton="showButton"
    isMobile
    class="template-form--detail"
  ></ht-template-form>
</template>

<script>
  export default {
    name: 'TemplateFormDetail',
    data() {
      return {
        templateKey: null,
        action: null,
        isShare: false,
        openType: null,
        params: null,
        showButton:true,
      }
    },
    created() {
      const { templateKey, action, isShare, openType, data } = this.$route.params
      const { showButton } =  this.$route.meta
      this.showButton = showButton
      this.templateKey = templateKey
      this.action = action
      this.isShare = isShare
      this.openType = openType
      if (this.$route.query.showModifyRecord) {
        let showModifyRecordId =this.$route.params.data
        this.$requestConfig.boDataModifyRecordById(showModifyRecordId).then((resp) => {
         this.params = Base64.encode(resp.data) 
        }) 
      } else if (this.$route.query.data) {
        this.params = this.$route.query.data
      } else {
        this.params = data
      }
    },
  }
</script>

<style lang="scss" scoped>
  .template-form--detail {
    ::v-deep {
      .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-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>
