<template>
  <div class="tool-box" >
    <el-tabs v-model="activeTabName"  :before-leave="beforeTabLeave" tab-position="left">
       <el-tab-pane name="designer"  >
            <el-tooltip slot="label"  class="item" effect="dark" :content="$t('editor.design')" placement="right-start"
             popper-class="operate-prompt-tooltip" >
              <span class="tab-icon-item" @click="changeCurrentEditor('questionEditor')"><i class="iconfont icon-design" /></span>
            </el-tooltip>
          <slot name="designer">
            <DesignerBox />
          </slot>
       </el-tab-pane>
       <el-tab-pane name="option">
           <el-tooltip slot="label"  class="item" effect="dark" :content="$t('editor.appearance')" placement="right-start"
             popper-class="operate-prompt-tooltip" >
                 <span  class="tab-icon-item"><i class="iconfont icon-palette" /></span>
          </el-tooltip>
          <slot name="option"></slot>
          <!-- 问卷首页 -->
          <div class="customize-option">
            <div class="customize-option-main">
              <span class="customize-option-label">
                {{ $t('editor.showPaperHome') }}
                <el-tooltip effect="light" placement="right-start" popper-class="operate-prompt-tooltip" :content="$t('editor.option02')"><i class="iconfont icon-help"></i></el-tooltip>
              </span>
              <el-switch v-model="otherSetting.showHome" @change="(status)=>togglePaperShow(status, 'homePage')" class="customize-option-switch"></el-switch>
            </div>
            <div v-show="otherSetting.showHome" @click="changeCurrentEditor('homePage')" :class="['customize-option-sub', 'home-page', {'active': currentEditor === 'homePage'}]">{{ $t('editor.option03') }}</div>
          </div>
          <!-- 问卷尾页 -->
          <div class="customize-option">
            <div class="customize-option-main">
              <span class="customize-option-label">
                {{ $t('editor.showPaperEnd') }}
                <el-tooltip effect="light" placement="right-start" popper-class="operate-prompt-tooltip" :content="$t('editor.option02')"><i class="iconfont icon-help"></i></el-tooltip>
              </span>
              <el-switch v-model="otherSetting.showEnd"  @change="(status)=>togglePaperShow(status, 'endPage')"  class="customize-option-switch"></el-switch>
            </div>
            <div v-show="otherSetting.showEnd" @click="changeCurrentEditor('endPage')" :class="['customize-option-sub', 'end-page', {'active': currentEditor === 'endPage'}]">{{ $t('editor.option04') }}</div>
          </div>
            <!-- 问卷题目编号 -->
          <!-- <div class="customize-option">
            <div class="customize-option-main">
              <span class="customize-option-label">
                {{ $t('editor.showQuestionNumbers') }}
              </span>
              <el-switch active-value="on" inactive-value="off" v-model="surveyData.showQuestionNumbers"  @change="(status)=>toggleQuestionNumbers(status)"  class="customize-option-switch"></el-switch>
            </div>
          </div> -->
       </el-tab-pane>
      <el-tab-pane name="closeSetup">
         <el-tooltip slot="label"  class="item" effect="dark" :content="$t('editor.options')" placement="right-start"
             popper-class="operate-prompt-tooltip" >
              <span class="tab-icon-item"><i class="iconfont icon-setting" /></span>
          </el-tooltip>
        <slot name="closeSetup"></slot>
      </el-tab-pane>
      <el-tab-pane name="outlineList"  >
           <el-tooltip slot="label"  class="item" effect="dark" :content="$t('editor.outline')" placement="right-start"
             popper-class="operate-prompt-tooltip" >
              <span class="tab-icon-item"><i class="iconfont icon-list" /></span>
          </el-tooltip>
          <slot name="outline" >
            <Outline />
          </slot>
       </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import DesignerBox from '../DesignerBox'
import Outline from '../Outline'
export default {
  name: 'ToolBox',
  props: ['surveyConfig', 'disabled'],
  watch: {
    disabled (flag) {
      if (flag) this.activeTabName = 'closeSetup'
    }
  },
  created(){
    if(this.disabled){
      this.activeTabName = 'closeSetup'
    }
  },
  computed: {
    ...mapGetters(['otherSetting', 'surveyData'])
  },
  components: {
    DesignerBox,
    Outline
  },
  data () {
    return {
      showPaperHome: false,
      showPaperEnd: false,
      activeTabName: 'designer',
      activeName: ['col-chosen'],
      designerVisible: true,
      currentEditor: ''
    }
  },
  methods: {
    ...mapMutations(['setCurrentEditor', 'setShowQuestionNumbers']),
    // 切换 问题编号显示隐藏
    toggleQuestionNumbers(status){
      this.setShowQuestionNumbers(status)
    },
    changeCurrentEditor (current) {
      this.setCurrentEditor(current)
    },
    togglePaperShow (status, type) {
      if(status){
        this.changeCurrentEditor(type)
      }else{
         this.changeCurrentEditor('questionEditor')
      }
    },
    beforeTabLeave (activeName) {
      if (activeName !== 'closeSetup' && this.disabled) {
        this.$message({
          message: this.$t('editor.msgNotDraft'),
          type: 'warning'
        })
        return false
      }
      return true
    }
  },
  mounted () {
  }
}
</script>
<style  scoped>
@import "./style.css";
</style>
