<template>
    <el-row class="edit-tab-body">
        <el-col class="edit-hit" :span="24">
            {{tabType==='move' ? $t('editor.etab12') : $t('editor.etab11') }}
        </el-col>
        <el-col :span="24">
            <el-row>
                <el-col class="col-header" :span="4">{{ $t('editor.etab10') }}</el-col>
                <el-col class="col-header" :span="8">
                    <span  v-if="showQuestionSelect">{{ $t('editor.etab09') }}</span>
                </el-col>
                <el-col class="col-header" :span="12">
                    <span  v-if="showQuestionSelect">{{ $t('editor.etab15') }}</span>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="24">
            <el-row>
                <el-col :span="4">
                    <el-select v-model="pIndex" class="element-select" size="small">
                        <el-option v-for="(item, index) in pages" :label="formatterPageLabel(item, index)" :key="item.name" :value="index"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-select  v-if="showQuestionSelect" v-model="moveAction" class="element-select" size="small">
                        <el-option  :label="$t('editor.etab13')" value="before" ></el-option>
                        <el-option  :label="$t('editor.etab14')" value="after" ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-select v-if="showQuestionSelect" v-model="qIndex" class="element-select" style="width: 80%" size="small">
                        <template v-for="(item, index) in elements">
                            <el-option  :label="formatterQuestionLabel(item)" :key="item.name" :value="index"></el-option>
                        </template>
                    </el-select>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MoveCopyTab',
  props: ['type'],
  data: function () {
    return {
      types: {
        copy: {
          title: this.$t('editor.etab18')
        },
        move: {
          title: this.$t('editor.etab19')
        }
      },
      pIndex: 0,
      qIndex: 0,
      tabType: this.type == null ? 'move' : this.type,
      moveActions: [
        { key: 'before', title: this.$t('editor.etab13') },
        { key: 'after', title: this.$t('editor.etab14') }
      ],
      moveAction: 'after'
    }
  },
  computed: {
    ...mapGetters(['surveyData', 'questionIndex', 'pageIndex']),
    elements: function () {
      const elements = this.pages[this.pIndex].elements || []
      elements.filter((item, index) => {
        if (this.type === 'move' && this.questionIndex === index) {
          return false
        }
        return true
      })
      return elements
    },
    pages: function () {
      return this.surveyData.pages
    },
    selectedPage: function () {
      return this.pages[this.pIndex]
    },
    currentPage: function () {
      return this.pages[this.pageIndex]
    },
    currentQuestion: function () {
      return this.currentPage.elements[this.questionIndex]
    },
    showQuestionSelect: function () {
      // let questionCount = 0;
      // if( this.selectedPage && this.selectedPage.elements.length > 0 ) {
      //     if(this.type == 'move') {
      //         questionCount = this.selectedPage.elements.filter((item)=>{
      //             return item.name != this.currentQuestion.name
      //         }).length;
      //     } else {
      //         questionCount = this.selectedPage.elements.length
      //     }
      // }
      // return questionCount > 0;
      return true
    },
    scrollPrentNodeId () {
      return this.$store.state.survey.scrollPrentNodeId
    }
  },
  methods: {
        /**
     * 格式化page label
     */
    formatterPageLabel (page, pageIndex) {
      const idx = page.name.split('page')[1]
      let title = page.title || ''
      title = title.substring(0, 10)
      title = this.$t('editor.selectPage', {'0': pageIndex+1, '1': title})
      return title
    },
     /**
     * 格式化question label
     */
    formatterQuestionLabel (question) {
      const idx = question.name.split('question')[1]
      let title = question.title || question.name
      title = title.substring(0, 10)
      return `q${idx}-${title}`
    },
    getTitle: function (element) {
       return (element.title == null) || (element.title === '') ? element.name : element.title
    },
    submit: function () {
      if (this.pIndex == null) {
        this.$message.error(this.$t('editor.etab20'))
        return
      }
      if (this.qIndex == null) {
        this.$message.error(this.$t('editor.etab21'))
        return
      }
      const scrollPrentNodeId = this.scrollPrentNodeId
      if (this.type === 'move') {
        let qIndex = this.qIndex
        const questionName = this.currentQuestion.name
        if (this.moveAction === 'after') {
          qIndex++
        }
        this.$store.dispatch('moveQuestion',
          { targetPageIndex: this.pIndex, targetQuestionIndex: qIndex }
        )
        this.showMessage(this.$t('editor.etab22'), questionName, scrollPrentNodeId)
      } else if (this.type === 'copy') {
        let qIndex = this.qIndex
        if (this.moveAction === 'after') {
          qIndex++
        }
        this.$store.dispatch('copyQuestion',
          { targetPageIndex: this.pIndex, targetQuestionIndex: qIndex }
        )
        this.$message.success(this.$t('editor.etab23'))
      }
    },
    moveQuestion: function (mode) {
      const pageIndex = this.pageIndex
      let qIndex = 0
      const questionName = this.currentQuestion.name
      const scrollPrentNodeId = this.scrollPrentNodeId
      if (mode === 'after') {
        qIndex = this.currentPage.elements.length
      }
      this.$store.dispatch('moveQuestion',
        { targetPageIndex: pageIndex, targetQuestionIndex: qIndex }
      )
      this.showMessage(this.$t('editor.etab22'), questionName, scrollPrentNodeId)
    },
    goAnchor (questionName, scrollPrentNodeId) {
      setTimeout(function () {
        const relativeEle = (document.getElementById(scrollPrentNodeId)) || document.documentElement || document.body
        const ele = document.getElementById('anchor-' + questionName)
        if (ele) {
          const offset = ele.getBoundingClientRect().top - relativeEle.offsetTop - 130
          relativeEle.scrollBy(0, offset)
        }
      }, 10)
    },
    showMessage (message, questionName, scrollPrentNodeId) {
      this.$alert(message, '', {
        confirmButtonText: '确定',
        center: true,
        customClass: 'move-cope-msg',
        callback: () => {
          this.goAnchor(questionName, scrollPrentNodeId)
        }
      })
    }
  },
  mounted: function () {
  }
}
</script>

<style scoped>
.edit-tab-body {
    text-align: left;
}

.edit-tab-body .el-col {
    padding: 5px 5px 0px 0px;
}

.edit-tab-body .col-header {
    font-size: 13px;
    color: #6B787F;
    padding-bottom: 0px;
}

.edit-hit {
    font-size: 13px;
    font-weight: 500;
}

.element-select {
    width: 100%;

}

</style>

<style>
.move-cope-msg {
    width: 300px;
}

.move-cope-msg .el-message-box__content {
    padding: 30px 15px;
}

.move-cope-msg .el-message-box__btns .el-button--small {
    padding: 9px 40px;
    background-color: #48A736;
}
</style>
