<template>
  <div>
    <el-collapse v-model="activeNames">
      <div v-for="item in helpData" :key="item.id">
        <el-collapse-item :title="item['title'+apiLang]" :name="item.id">
          <span v-html="item['content'+apiLang]">{{ item['content'+apiLang] }}</span>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>

<script>
import { getHelpList } from '@/api/message'
export default {
  data() {
    return {
      activeNames: [],
      helpData: [],
      apiLang: '',
      langData: { zh_CN: 'Zh', en_US: 'En' }
    }
  },
  computed: {
    language: {
      get() {
        return this.$store.getters.language
      },
      set(val) {
        this.$i18n.locale = val
        this.$store.dispatch('app/setLanguage', val)
      }
    }
  },
  watch: {
    language() {
      this.apiLang = this.langData[this.language]
    }
  },
  created() {
    this.apiLang = this.langData[this.language]
    getHelpList({ page: 1, rows: 100 }).then((r) => {
      this.helpData = r.data.list
      this.activeNames = this.helpData.map(m => { return m.id })
    })
  }
}
</script>

<style>
</style>
