<template>
  <div class="page-basic-group">
    <el-card v-if="!editPage" class="page-basic" shadow="never">
      <div class="page-basic-control z-index-9" :class="{'is-edit': isEdit}">
        <el-button type="success" @click="startEditPageInfo('basic')" size="mini" class="event-bubbling">
          {{ $t('general.btnEdit') }}</el-button>
        <el-button type="info" @click="startEditPageInfo('copy')" size="mini" class="event-bubbling">
          {{ $t('general.btnCopy') }}</el-button>
      </div>
      <div class="page-basic-main">
        <div v-if="editPage == false" class="page-title">
          <h2>
            {{$t('editor.selectPage', {'0': pIndex+1, '1': pageTitle(pageItem)})}}
          </h2>
        </div>
        <div  class="page-description">
          <p>{{pageItem.description}}</p>
        </div>
      </div>
    </el-card>
    <PageEditor :oldPage="pageItem" v-else></PageEditor>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import PageEditor from './PageEditor'
export default {
  name: 'PageBasic',
  components: {
    PageEditor
  },
  props: ['pIndex', 'pageItem'],
  computed: {
    ...mapGetters(['editPage', 'isEdit'])
  },
  methods: {
    ...mapMutations(['setEditPage']),
    // 获取页面title
    pageTitle (pageItem) {
      const title = (pageItem.title || '').trim()
      return title ? `: ${title}` : ''
    },
    // 编辑页面
    startEditPageInfo (active) {
      this.setEditPage({ status: true, active })
    }
  }
}
</script>

<style  scoped>
@import "./style.css";
</style>
