<template>
  <div class="infoheader">
    <el-collapse v-model="activeNames"  @change="handleChange">
      <div v-for="(item, index) in helpData" :key="item.id">
        <el-collapse-item :title="(index + 1) + '. ' + (isChinese ? item.titleZh : item.titleEn)" :name="index">
          <div v-html="isChinese ? item.contentZh : item.contentEn" class="img"></div>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
</template>

<script>
import {getInternalHelpDoc, getInternalHelpDocPage} from "@/api/system/internalHelpDoc";
export default {
  data() {
    return {
      activeNames: [],
      helpData: []
    }
  },
  created() {
    getInternalHelpDocPage({ pageNo: 1, pageSize: 100 }).then((r) => {
      this.helpData = r.data.list
    })
  },
  methods: {
    handleChange(val) {
      console.log(val)
      if (val.length > 0 &&!this.helpData[val].contentZh && !this.helpData[val].contentEn){
        getInternalHelpDoc(this.helpData[val].id).then(r => {
          this.$set(this.helpData, val, r.data)
        })
      }
    }
  },
  computed:{
    isChinese(){
      return this.$i18n.locale === 'zh_CN'
    }
  },
}
</script>

<style scoped>
  .infoheader{
    padding:20px
  }
  ::v-deep img{
    max-width: 100%;
  }
</style>