<template>
  <div class="home">
    <div class="opts">
      <el-switch
        v-model="isEdit"
        @change="editChange"
        inactive-text="编辑"
        style="margin-right:20px">
      </el-switch>
       <el-switch
        v-model="showQNumbers"
        @change="changeQuestionNumber"
        inactive-text="题号"
        active-value="on"
        inactive-value="off"
        style="margin-right:20px">
      </el-switch>
      <el-radio-group v-model="tab">
        <el-radio-button label="edit">编辑</el-radio-button>
        <el-radio-button label="preview">预览</el-radio-button>
        <el-radio-button label="code">Code</el-radio-button>
      </el-radio-group>
      <!-- <el-button class="margin10" @click="doSave">保存本地</el-button> -->
      <!-- <el-button class="margin10" @click="doClear">清空</el-button> -->
      <el-select class="lang margin10" v-model="lang" placeholder="请选择" @change="changeLang">
        <el-option v-for="item in language" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
    </div>
    <Creater v-if="tab==='edit'" :surveyData="testData"></Creater>
    <Preview v-if="tab==='preview'" :surveyData="surveyData"></Preview>
    <JsonEditor v-if="tab==='code'" :value="surveyData" @changed="paperDataChanged"></JsonEditor>
  </div>
</template>

<script>
import Creater from './Creater'
import Preview from './Preview'
import JsonEditor from '../components/editor/JsonEditor'
import { mapMutations, mapGetters } from 'vuex'
import { testData } from './data'
export default {
  name: 'Home',
  components: {
    Creater,
    Preview,  
    JsonEditor
  },
  computed: {
    ...mapGetters(['surveyData', 'showQuestionNumbers'])
  },
  data () {
    return {
      isEdit: true,
      showQNumbers: 'on',
      tab: 'edit',
      lang: 'zh_cn',
      language: ['zh_cn', 'en_us'],
      testData: {}
    }
  },
  methods: {
    ...mapMutations(['setSurvey', 'setSurveyEdit', 'setShowQuestionNumbers']),
    doSave () {

    },
    doClear () {

    },
    changeQuestionNumber(){
      this.setShowQuestionNumbers(this.showQNumbers)
    },
    paperDataChanged (val) {
      let newQuestion = null
      try {
        newQuestion = JSON.parse(val)
        this.setSurvey(newQuestion)
      } catch (e) {

      }
    },
    changeLang () {
      this.$i18n.locale = this.lang
    },
    editChange () {
      this.setSurveyEdit(this.isEdit)
    }
  },
  watch: {
    tab: function(newVal){
      if(newVal === 'edit'){
        this.testData = this.surveyData
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home{
  .lang{
    margin-left: 20px;
  }
  .opts{
          text-align: right;
          margin-bottom: 10px;
          margin-top: 30px;
  }
  .main{
    .home-tool-box{
      background-color: #fff;
    }
    .home-editor-box{
      height: 100%;
    }
  }
}
</style>
