<template>
    <div class="editor">
        <div class="editor-main">
            <el-tabs v-model="questionActiveName">
                <slot></slot>
                <el-tab-pane :label="$t('general.btnLogic')" name="logic">
                    <el-collapse v-model="collapseName" accordion>
                        <el-collapse-item name="visible" >
                          <template slot="title">
                            {{ $t('editor.logicVisible') }}
                            <el-tooltip effect="light" placement="right-start" popper-class="operate-prompt-tooltip" :content="$t('editor.logicVisibleDesc')">
                              <i class="operate-prompt el-icon-question"></i>
                            </el-tooltip>
                          </template>
                          <ExpressieCreator :element="question" type="advancedVisibleIf"/>
                        </el-collapse-item>
                        <el-collapse-item name="enable" >
                          <template slot="title">
                            {{ $t('editor.logicEnable') }}
                            <el-tooltip effect="light" placement="right-start" popper-class="operate-prompt-tooltip" :content="$t('editor.logicEnableDesc')">
                              <i class="operate-prompt el-icon-question"></i>
                            </el-tooltip>
                          </template>
                            <ExpressieCreator :element="question" type="enableIf"/>
                        </el-collapse-item>
                        <el-collapse-item name="goto" v-if="hasAuth('paper.design.edit.jump')?(question.type !== 'html'&&question.type !== 'file'):false">
                          <template slot="title">
                            {{ $t('editor.logicGoto') }}
                            <el-tooltip effect="light" placement="right-start" popper-class="operate-prompt-tooltip" :content="$t('editor.logicGotoDesc')">
                              <i class="operate-prompt el-icon-question"></i>
                            </el-tooltip>
                          </template>
                          <GotoCreator :question="question" />
                        </el-collapse-item>
                        <!-- <el-collapse-item name="relation" v-if="hasAuth('paper.design.edit.relevance')">
                          <template slot="title">
                            {{ $t('editor.logicRelation') }}
                            <el-tooltip effect="light" placement="right-start" popper-class="operate-prompt-tooltip" :content="$t('editor.logicRelationDesc')">
                              <i class="operate-prompt el-icon-question"></i>
                            </el-tooltip>
                          </template>
                          <RelationCreator :question="question" />
                        </el-collapse-item> -->
                    </el-collapse>
                </el-tab-pane>
                <el-tab-pane :label="$t('general.btnMove')" name="move">
                    <MoveCopyTab ref="move" :type="'move'"/>
                </el-tab-pane>
                <el-tab-pane :label="$t('general.btnCopy')" name="copy">
                    <MoveCopyTab ref="copy" :type="'copy'"/>
                </el-tab-pane>
                <el-tab-pane :label="$t('general.btnTest')" name="test" v-if='testFlag'>
                    <!-- <el-input type="textarea" v-model='questionValue'></el-input> -->
                    <JsonEditor v-if="questionActiveName == 'test'" :value="question" @changed="paperDataChanged"/>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="editor-control">
            <el-button @click.native="cancelEdit()" size="small" type="success">{{ $t('general.btnCancel') }}</el-button>
            <el-button @click.native="commitMove()" v-if="questionActiveName == 'move'" size="small" type="success">{{ $t('general.btnMoveQuest') }}</el-button>
            <el-button @click.native="commitCopy()" v-else-if="questionActiveName == 'copy'" size="small" type="success">{{ $t('general.btnCopyQuest') }}
            </el-button>
            <el-button @click.native="saveChange()" v-else size="small" type="success">{{ $t('general.btnSave') }}</el-button>
        </div>
    </div>
</template>

<script>
import MoveCopyTab from './tabs/MoveCopyTab'
import ExpressieCreator from './tabs/ExpressieCreator'
import GotoCreator from './tabs/GotoCreator'
import { setGotos } from '../../utils/utils'
// import RelationCreator from './tabs/RelationCreator'
import JsonEditor from './JsonEditor'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    MoveCopyTab,
    ExpressieCreator,
    GotoCreator,
    // RelationCreator,
    JsonEditor
  },
  name: 'basicEditor',
  props: ['question'],
  data: function () {
    return {
      collapseName: ''
    }
  },
  methods: {
    ...mapMutations(['setQuestionIndex', 'setQuestion', 'setQuestionActiveName']),
    commitMove: function () {
      this.$refs.move.submit()
    },
    commitCopy: function () {
      this.$refs.copy.submit()
    },
    cancelEdit: function () {
      this.setQuestionIndex({ index: null })
      this.setScrollTop()
    },
    saveChange: function () {
      setGotos(this.question, this)
      this.setScrollTop()
      this.setQuestion(this.question)
      this.setQuestionIndex({ index: null })
      this.$parent.save()
    },
    setScrollTop: function () {
      const rightPosition = this.$store.state.survey.rightPosition
      if (rightPosition) {
        if (this.$store.state.survey.scrollPrentNodeId) {
          document.getElementById(this.$store.state.survey.scrollPrentNodeId).scrollTop = rightPosition
        } else {
          document.documentElement.scrollTop = document.body.scrollTop = rightPosition
        }
      }
    },
    paperDataChanged (val) {
      let newQuestion = null
      try {
        newQuestion = JSON.parse(val)
      } catch (e) {

      }
      if (newQuestion) {
        Object.assign(this.question, newQuestion)
      }
    }
  },
  beforeMount: function () {
  },
  computed: {
    ...mapGetters(['questionIndex', 'activeName']),
    questionActiveName: {
      get: function () {
        return this.activeName
      },
      set: function (val) {
        this.setQuestionActiveName(val)
      }
    },
    // 是否有权限访问
    hasAuth () {
      return function (authName) {
        return true
      }
    },
    relevanceFlag () {
      return true
    },
    enableFlag () {
      return true
    },
    gotoFlag () {
      return true
    },
    testFlag () {
      return true
    }
  }
}
</script>

<style scoped>
    .editor {
        background-color: #fcfcfc;
        border: solid 2px #48A736;
    }

    .editor .editor-main /deep/ .el-tabs__nav-wrap {
        background: #dce0de;
    }

    .editor .editor-main /deep/ .el-tabs__nav-wrap::after {
        background-color: transparent;
    }

    .editor .editor-main /deep/ .el-tabs__nav-wrap .el-tabs__active-bar {
        display: none;
    }

    .editor .editor-main /deep/ .el-tabs__nav-wrap .el-tabs__item {
        padding: 0 20px;
    }

    .editor .editor-main /deep/ .el-tabs__nav-wrap .el-tabs__item.is-active {
        background: #fcfcfc;
        color: #333333;
    }

    .editor .editor-main /deep/ .el-tabs__content {
        padding: 0 20px;
        overflow: visible;
    }

    .editor .editor-control {
        text-align: right;
        padding: 20px;
        border-top: 1px solid #ebeef5;
        margin-top: 20px;
    }

    .editor .editor-control .el-button--success {
        background: #48A736;
        border-radius: 2px;
        min-width: 80px;
    }
</style>
