<template>
  <div class="page-editor">
    <div class="page-editor-main">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('general.btnEdit')" name="basic">
          <el-form>
            <el-form-item :label="$t('editor.questName')">
              <el-input v-model="page.name" :disabled="true"/>
            </el-form-item>
            <el-form-item :label="$t('editor.questTitle')">
              <el-input maxlength="100" v-model="page.title" />
            </el-form-item>
            <el-form-item :label="$t('editor.questDesc')">
              <el-input maxlength="1000" type="textarea" v-model="page.description" />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="page.visible">{{ $t('editor.isVisible') }}</el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('editor.questOrder')">
              <div class="display-inline-block">
                <el-select v-model="page.questionsOrder">
                  <el-option value="default" :label="$t('editor.questOrderType1')"></el-option>
                  <el-option value="initial" :label="$t('editor.questOrderType2')"></el-option>
                  <el-option value="random" :label="$t('editor.questOrderType3')"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('general.btnCopy')" name="copy">
          <MoveCopyPageTab ref="copy_page" type="copy" />
        </el-tab-pane>
        <el-tab-pane :label="$t('general.btnMove')" name="move">
          <MoveCopyPageTab ref="move_page" type="move" />
        </el-tab-pane>
        <el-tab-pane :label="$t('general.btnTest')" name="test">{{page}}</el-tab-pane>
      </el-tabs>
    </div>
    <div class="page-editor-control">
      <el-button @click="endEdit" size="mini" type="success">{{ $t('general.btnCancel') }}</el-button>
      <el-button v-if="activeName === 'move'" @click="submitMove" size="mini" type="success">{{ $t('general.btnMovePage') }}</el-button>
      <el-button v-else-if="activeName === 'copy'" @click="submitCopy" size="mini" type="success">{{ $t('general.btnCopyPage') }}</el-button>
      <el-button v-else @click="savePage" size="mini" type="success">{{ $t('general.btnSave') }}</el-button>
    </div>
  </div>
</template>

<script>
import MoveCopyPageTab from '../tabs/MoveCopyPageTab'
import { mapGetters, mapMutations } from 'vuex'

export default {
  props: ['oldPage'],
  components: {
    MoveCopyPageTab
  },
  data: function () {
    const page = {
      ...this.oldPage
    }
    return {
      page: page
    }
  },
  computed: {
    ...mapGetters(['pageEditActive']),
    activeName: {
      get: function () {
        return this.pageEditActive
      },
      set: function (val) {
        this.$store.commit('setPageEditActive', val)
      }
    }
  },
  methods: {
    ...mapMutations(['setPageEditActive', 'updatePage', 'setEditPage']),
    endEdit: function () {
      this.$store.commit('setEditPage', { status: false })
    },
    submitMove: function () {
      this.$refs.move_page.submit()
      this.endEdit()
    },
    submitCopy: function () {
      this.$refs.copy_page.submit()
      this.endEdit()
    },
    savePage: function () {
      this.updatePage(this.page)
      this.endEdit()
    }
  }
}
</script>

<style scoped>
.page-editor{
  background-color: #fcfcfc;
  border: #48A736 solid 2px;
}
.page-editor .page-editor-main /deep/ .el-tabs__nav-wrap{
  background: #dce0de;
}
.page-editor .page-editor-main /deep/ .el-tabs__nav-wrap::after{
  background-color: transparent;
}
.page-editor .page-editor-main /deep/ .el-tabs__nav-wrap .el-tabs__active-bar{
  display: none;
}
.page-editor .page-editor-main /deep/ .el-tabs__nav-wrap .el-tabs__item{
  padding: 0 20px;
}
.page-editor .page-editor-main /deep/ .el-tabs__nav-wrap .el-tabs__item.is-active{
  background: #fcfcfc;
  color: #333333;
}
.page-editor .page-editor-main /deep/ .el-tabs__content{
  padding: 0 20px;
  overflow: visible;
}
.page-editor .page-editor-control{
  text-align: right;
  padding: 20px;
  border-top: 1px solid #ebeef5;
  margin-top: 20px;
}
.page-editor .page-editor-control .el-button--success{
  background: #48A736;
  border-radius: 2px;
  min-width: 80px;
}
.display-inline-block{
  display: inline-block;
  width: 100%;
}
</style>
