<template>
  <div class="outline-list" >
    <div v-for="(page, pIndex) in pageList" :key="`outline_page_${pIndex}`" @click="toPage(pIndex)">
      <h3>{{$t('editor.selectPage', {'0': pIndex+1, '1': pageTitle(page)})}}</h3>
      <div class="item"  v-for="(question, qIndex) in page.elements" :class="[pageIndex===pIndex && questionIndex===qIndex && 'active']"
       @click.stop="clickItem(pIndex,qIndex)" :key="`qIndex_${pIndex}_${qIndex}`">
         <span class="icon"><i :class="`iconfont icon-${questionIcons[question.type]}`" /> </span> {{question.outlineTitle}}
      </div>
    </div>
  </div>
</template>


<script>
import { mapMutations, mapGetters } from 'vuex'
import { questionIcons } from './question-icons.js'
export default {
  name: 'Outline',
  computed: {
    ...mapGetters(['surveyData', 'pageIndex', 'questionIndex']),
    pageList(){
      let index = 0
      return this.surveyData.pages.map(page=>{
        page.elements = page.elements.map(question=>{
          index+=1
          question.outlineTitle = `${index}.${question.title || this.$t('question.htmlCont')}`
          return question
        })
        return page
      })
    },
  },
  components: {
  },
  data () {
    return {
      questionIcons
    }
  },
  methods: {
    ...mapMutations(['setPageIndex', 'setQuestionIndex']),
    clickItem(pageIndex, qIndex){
      this.setPageIndex(pageIndex)
      this.setQuestionIndex({index: qIndex})
      const qDom = document.getElementsByClassName(`quetion-item-${qIndex}`)[0]
      if(qDom){
        document.documentElement.scrollTop = qDom.offsetTop
      }
    },
    toPage(pageIndex){
        this.setPageIndex(pageIndex)
        this.setQuestionIndex({index: null})
    },
    // 获取页面title
    pageTitle (pageItem) {
      let title = (pageItem.title || '').trim()
      title = title.length < 5 ? title : `${title.substring(0, 4)}...`
      return title ? `: ${title}` : ''
    }
  },
  mounted () {
  },
  filters: {
  }
}
</script>
<style scoped lang="scss" >
.outline-list{
  padding-left: 10px;
  h3{
    font-size: 15px;
    margin: 15px 10px 5px;
    cursor: pointer;
  }
  .item{
    padding-left: 20px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 230px;
    font-size: 14px;
    color: #333;
    &.active{
      color: #48a736;
    }
  }
  .icon{
    width: 25px;
    display: inline-block;
    .iconfont{
      font-size: 13px;
    }
  }
}
</style>
