<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="8">
                    <span>{{ $t('editor.etab09') }}</span>
                </el-col>
                <el-col class="col-header" :span="12">
                    <span>{{ $t('editor.etab10') }}</span>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="24">
            <el-row>
                <el-col :span="8">
                    <el-select 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-model="targetPageIndex" class="element-select" :placeholder="$t('editor.etab02')" size="small">
                        <el-option v-for="(item, index) in pages" :label="getTitle(item, index)" :key="item.name" :value="index"></el-option>
                    </el-select>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'MoveCopyTab',
  props: ['type'],
  data: function () {
    return {
      targetPageIndex: null,
      tabType: this.type == null ? 'move' : this.type,
      moveAction: 'after'
    }
  },
  computed: {
    ...mapGetters(['pageIndex']),
    pages: function () {
      return this.$store.state.survey.model.pages
    }
  },
  methods: {
    ...mapMutations(['copyPage']),
    ...mapActions(['movePage']),
    getTitle: function (pageItem, pIndex) {
      return this.$t('editor.selectPage', {'0': pIndex+1, '1': this.pageTitle(pageItem)})
      // return (element.title === null) || (element.title === '') ? element.name : element.title
    },
      // 获取页面title
    pageTitle (pageItem) {
      let title = (pageItem.title || '').trim()
      title = title.length < 10 ? title : `${title.substring(0, 9)}...`
      return title ? `: ${title}` : ''
    },
    submit: function () {
      if (this.type === 'move') {
        let targetPageIndex = this.targetPageIndex
        if (this.moveAction === 'after') {
          targetPageIndex += 1
        }
        this.movePage({ targetPageIndex: targetPageIndex, sourcePageIndex: this.pageIndex })
      } else if (this.type === 'copy') {
        let targetPageIndex = this.targetPageIndex
        if (this.moveAction === 'after') {
          targetPageIndex += 1
        }
        this.copyPage({ targetPageIndex: targetPageIndex, sourcePageIndex: this.pageIndex })
      }
    }
  },
  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>
