<!--  -->
<template>
  <div id="app">
    <div>
      <cs-button @click="switchI18n('zh')">切成中文</cs-button>
      <cs-button @click="switchI18n('en')">切成英文</cs-button>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="表格" name="1">
        <test-table v-if="activeName == '1'"></test-table>
      </el-tab-pane>
      <el-tab-pane label="动态表格" name="2">
        <test-dp-table v-if="activeName == '2'"></test-dp-table>
      </el-tab-pane>
      <el-tab-pane label="表单" name="3">
        <test-form v-if="activeName == '3'"></test-form>
      </el-tab-pane>
      <el-tab-pane label="动态表单" name="4">
        <test-dp-form v-if="activeName == '4'"></test-dp-form>
      </el-tab-pane>
      <el-tab-pane label="flexGrid" name="5">
        <test-flex-grid v-if="activeName == '5'"></test-flex-grid>
      </el-tab-pane>
    </el-tabs>
    <!-- <test-common></test-common> -->
  </div>
</template>
<script>
import '../bless'
import TestTable from '../test/table'
import TestDpTable from '../test/dpTable'
import TestFlexGrid from '../test/flexGrid'
import TestForm from '../test/form'
import TestDpForm from '../test/dpForm/index.vue'
import TestCommon from '../test/common'

export default {
  name: 'app',
  components: { TestTable, TestDpTable, TestFlexGrid, TestForm, TestDpForm, TestCommon },
  data() {
    return {
      activeName: '4'
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* 切换国际化 */
    switchI18n(lang) {
      this.$EventBus.$emit('setLanguage', lang)
      this.$util.info('切换国际化成功：' + lang)
    }
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    sessionStorage.setItem(
      'token',
      'ddDvyIDSLZJEbk72Df4kyWNTowW92wrZk7kw-kv-og6WRFXp-W-wKJoZua4R1pGMm9qTJSuFpyfhpLJhmU-vTBQCBpPDY5B8MqCYVc8ZtuABo9mFkCGOVHPOShGPQMuHVxoSwBICJ-fQaapFLEnd9d6b1AaHMmNrS7QY9dqJBdvhSDUaqfAqF7EQCHfqgvuRIAb3ldPTw63vKZG4tS5Y5stpIilZ3XVTojEbK0-eojOOJYKGxv3VPEX3k5xmBOeYmKqO_tde7MV-mB3_6hrDjNP5-cHy2pTDoLh42vuDlaPTcLdv9JIYlv-I-SM91SOWiYwHbbMZ7PxAVQH4o7znKMGhoN0QSPN_7f5MDOuYjQMynLUA9a3SacJDyvDVWOCu'
    )
    sessionStorage.setItem(
      'token2',
      'L2tOMPUVNeVsXt5xlug4KCx6mxEbvyrVJXxsuWx1fuSFmrkKJUx-eHStybNQCQUJaX2vAAS1Qf4rwBjXSFiUxq156SyJX8jS0L2dMWM5lmkjIgYdYbhRQJMHNUUzRWwW'
    )
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
#app {
  padding: 20px;
}
</style>
