<template>
  <section class="questionnaire">
    <Banner class="questionnaire__banner" :scroll-top="scrollTop">
    </Banner>
    <div class="questionnaire__main">
      <Scroll class="questionnaire__scroll" @onScroll="onScroll">
        <div class="questionnaire__scroll-wrap" :style="{'padding-bottom': isShowContent ? '160px' : '0'}">
          <div class="introduction">
            <van-collapse v-model="activeName" class="introduction__collapse" :border="false" accordion>
              <van-collapse-item class="introduction__collapse-item" title="介绍" name="1">
                <div class="ql-editor introduction__content" v-html="info.intro"></div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <div ref="progressWrap" class="questionnaire__sticky-wrap" :style="stickyPlaceholder">
            <div :class="{ 'questionnaire__progress--sticky': isProgressSticky }">
              <div class="progress">
                <div class="progress__text">共1道题，当前进度：1/1</div>
              </div>
            </div>
          </div>
          <QuestionForm :info="info" />
        </div>
      </Scroll>
    </div>
  </section>
</template>

<script>
/* 组件 */
import Banner from './Banner'
// import Loading from '@/components/Loading'
import Scroll from '@/components/Common/Scroll'
import debounce from 'lodash/debounce'
import Bus from '@/utils/Bus'
import QuestionForm from './QuestionForm'
// import { ENV_CONFIG } from '@/config'

export default {
  name: 'QuestionWarp',
  components: {
    Banner,
    // FinishedNotice,
    // Loading,
    Scroll,
    QuestionForm,
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeName: '1',
      scrollTop: 0,
      stickyPlaceholder: {},
      isProgressSticky: false,
      isShowResult: false,
      isIframe: false,
      loginInstance: null,
    }
  },
  computed: {
    isShowContent() {
      return this.info.isAnswer ? this.info.isAnswer : true
    },
    pageLoading: {
      get() {
        return this.isPageLoading
      },
      set(nVal) {
        this.updateIsPageLoading(nVal)
      },
    },
  },
  mounted() {
    this.eventBusInit()
    setTimeout(() => {
      this.isIframe = !(window.self === window.top)
    },2000)
    Bus.$on('showLogin', this.toggleLogin)
  },
  destroyed() {
    Bus.$off('onFinished')
    Bus.$off('showLogin')
  },
  methods: {
    eventBusInit() {
      Bus.$on('onFinished', () => {
        this.loadData()
      })
    },
    onScroll({ vertical }) {
      this.scrollTop = vertical?.scrollTop || 0
      this.stickyListener()
    },
    /* eslint-disable no-invalid-this */
    stickyListener: debounce(
      function () {
        const targetDom = this.$refs?.progressWrap
        if (targetDom) {
          const domRect = targetDom.getBoundingClientRect()
          if (domRect.top <= 65) {
            this.isProgressSticky = true
            this.stickyPlaceholder = { height: `${domRect.height}px` }
          } else {
            this.isProgressSticky = false
            this.stickyPlaceholder = {}
          }
        }
      },
      100,
      { maxWait: 100 }
    ),
  },
}
</script>

<style lang="less" scoped>
@bannerHeight: 150px; // 上半部分高度
.questionnaire {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  &__main {
    // position: absolute;
    // left: 0;
    // top: 0;
    width: 100%;
    height: calc(100% - 60px);
    background-color: #fff;
  }
  &__scroll {
    // padding: 80px 16px 0px !important;
    .__panel {
      // in order to hide system scrollbar
      &::-webkit-scrollbar {
        display: none;
      }
      // border-radius: 11px;
    }
    .__view {
      // min-height: unset !important;
      height: calc(100% - 170px);
    }
  }
  &__scroll-wrap {
    // box-shadow: 0px 2px 4px 0px rgba(189, 189, 189, 0.5);
    // FIXME Comput margin-top: 98px;
    // margin-top: 30%;
    min-height: 100%;
    padding: 0 10px;
    background-color: #fff;
    // border-radius: 11px;
    overflow: hidden;
  .progress {
    width: 100%;
    height: 14px;
    padding: 14px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    background-color: #fff;
    // border-radius: 11px;
    &__text {
      font-size: 12px;
      color: #666;
      transform: scale(9/12);
      position: relative;
      &::before {
        content: '';
        width: 47px;
        height: 1px;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        left: -55px;
        background: linear-gradient(to left, #d5d5d5, #ececec);
      }
      &::after {
        content: '';
        width: 47px;
        height: 1px;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: -55px;
          background: linear-gradient(to right, #d5d5d5, #ececec);
        }
      }
    }
  }
  &__progress {
    &--sticky {
      position: fixed;
      top: 62px;
      z-index: 99;
      left: 0;
      right: 0;
      // padding: 0 14px;
      // max-width: @--body-max-width;
      margin: 0 auto;
    }
  }
  &__user-info {
    margin: 20px 0;
  }
  // &__form {
  //   margin-bottom: 100px;
  // }
}
.introduction {
  width: 100%;
  font-size: 14px;
  line-height: 18px;
  color: #333;
  padding: 6px 4px;
  &__collapse-item {
    ::v-deep .van-collapse-item__title--expanded::after {
      display: none !important;
    }
    ::v-deep .van-cell {
      &:after {
        display: none !important;
      }
    }
    ::v-deep .van-collapse-item__content {
      padding-top: 0;
      padding-bottom: 0;
      font-size: 12px;
      color: #666;
    }
    ::v-deep .van-collapse-item__title--expanded::after {
      display: none !important;
    }
    ::v-deep .van-cell {
      .van-cell__title {
        span {
          font-size: 14px;
          font-weight: 500;
          color: #333;
        }
      }
    }
  }
  &__content {
    padding: 0;
    ::v-deep img {
      max-width: 100%;
    }
  }
}
</style>
