<template>
  <div class="form-list">
    <PlacedTop classNodeId="form-list--content"></PlacedTop>
    <nav-bar
      :title="formListName"
      :is-custom="true"
      @go-back="handleGoBack"
    ></nav-bar>
    <ht-template-preview
      ref="templatePreview"
      :template-key="key"
      :single="single"
      :task-type="taskType"
      :def-key="defKey"
      :data-view="dataView"
      :is-join-flow="isJoinFlow"
      :parameterq-querys="querys"
      :key="key"
    />
  </div>
</template>

<script>
  const PlacedTop = () => import('@/components/PlacedTop.vue')
  export default {
    name: 'FormList',
    components: {
      PlacedTop,
    },
    props: {
      templateKey: {
        type: String,
        default: '',
      },
      parameterqQuerys: {
        type: String,
        default: '',
      },
      single: {
        type: String,
        default: '',
      },
      taskType: {
        type: String,
        default: '',
      },
      defKey: {
        type: String,
        default: '',
      },
      dataView: {
        type: Object,
        default: function () {
          return null
        },
      },
      isJoinFlow: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        key: this.templateKey,
        querys: this.parameterqQuerys,
        curScrollTop: 0,
        isFromTemplateDetail: false,
      }
    },
    watch: {
      '$route.query.alias'(newValue) {
        this.key = newValue ? newValue : ''
      },
    },
    activated() {
      if (!this.key && this.$route.query.alias) {
        this.key = this.$route.query.alias
      }
      if (!this.parameterqQuerys && this.$route.params.parameterqQuerys) {
        this.querys = this.$route.params.parameterqQuerys
      }
      const formListContent =
        document.getElementsByClassName('form-list--content')[0]
      if (this.curScrollTop && formListContent) {
        setTimeout(() => {
          formListContent.scrollTop = this.curScrollTop
        }, 1000)
      }
      this.$nextTick(() => {
        if (
          !this.isFromTemplateDetail &&
          this.$refs.templatePreview.$refs &&
          this.$refs.templatePreview.$refs.dataViewTemplate
        ) {
          this.$refs.templatePreview.$refs.dataViewTemplate.resetMobileSearchQuery()
          this.$refs.templatePreview.$refs.dataViewTemplate.handleUpdateList()
        }
      })
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        if (from.name === 'templateFormDetail') {
          vm.isFromTemplateDetail = true
        }
      })
    },
    beforeRouteLeave(to, from, next) {
      this.curScrollTop =
        (document.getElementsByClassName('form-list--content')[0] &&
          document.getElementsByClassName('form-list--content')[0].scrollTop) ||
        0
      next()
    },
    computed: {
      formListName() {
        return this.$route.query.name
      },
    },
    methods: {
      handleGoBack() {
        this.$router.go(-1)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
