<template>
  <div class="abc">
    <div>这是一个测试页面{{test}}</div>
    <!-- 外部引入字体库 -->
    <div class="el-icon-self-star_full"></div>
    <!-- 页面引入的两种方式 -->
    <img :src="require('@/assets/images/logo.png')" alt="">
    <img src="@/assets/images/logo.png" alt="">
    <!-- 切换中英文 -->
    <s-language></s-language>
    <div @click="changeLanguage">切换中英文：{{ $t('common.title') }}</div>
    <!-- css图片引入 -->
    <div class="bg-img"></div>
    <!-- 引入 模块 -->
    <test-module></test-module>
    <!-- element-ui 弹框 查看中英文切换 -->
    <div @click="alertMsg">点击弹框</div>
    <div class="nav">
      <ul class="nav-list">
        <li
          class="nav-item"
          v-for="(item, index) in navList"
          :key="index"
        >
          <div class="pic">
            <img :src="item.src" />
          </div>
          <div class="title">{{ item.title }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import sLanguage from '@/components/languageSwitch/index.vue'
import action from '@action'

export default {
  components: { sLanguage },
  data () {
    return {
      test: 'abc',
      navList: [
        { src: '/static/resources/img/logo.png', title: '公益行', type: 1 }
      ]
    }
  },
  metaInfo () {
    return {
      title: '独立 - 标题',
      meta: [
        // { vmid: 'description', name: 'description', content: this.description }
      ]
    }
  },
  mounted () {
    /* 接口请求测试 */
    // action.Test.getTest('1').then((res) => {
    //   console.log(res)
    // })
    action.Test.postTest().then(res => {
      console.log(res)
    }).finally(res => {
      console.log('finally 可用。')
    })
    console.log(1, CKEDITOR)
    console.log(2, Base64)
    console.log(3, md5)
  },
  methods: {
    changeLanguage () {
      this.$i18n.locale = (this.$i18n.locale === 'cn' ? 'en' : 'cn')
    },
    alertMsg () {
      this.$alert('这是一段内容', '标题名称', {
        callback: action => {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .bg-img {
    width: 134px;
    height: 44px;
    background: url('~@/assets/images/logo.png') no-repeat;
  }
</style>
