<template>
  <div>
    <div style="display: flex;align-items: flex-end;">
      <span style="font-size: 18px;font-weight: bold;color: #333333;line-height: 26px;margin-left:5px">{{ $t('bannerdetail.header') }}</span>
    </div>
    <div style="background: #F5F5F5;border-radius: 12px;height:60px;margin-top: 20px">
      <div style="display: flex;;margin-left: 15px;">
        <img src="@/assets/message/open.png" alt style="width: 26px;height: 26px;margin-top: 15px;">
        <span style="font-size: 18px;font-weight: bold;color: #333333;line-height: 26px;margin-left:5px;margin-top: 15px;">{{ $t('bannerdetail.title') }}：{{ message['title'+apiLang] }}</span>
      </div>
    </div>
    <div style="background: #F5F5F5;border-radius: 12px;margin-top: 20px;">
      <br>
      <div style="margin-top: 10px;margin-left: 15px;">
        <span style="font-size: 14px;font-weight: 500;color: #999;">{{ $t('bannerdetail.time') }}：{{ parseTime(message.createTime) }}</span>
      </div>
      <div style="display: flex;justify-content: space-between;">
        <div style="margin-top: 10px;margin-right: 20px;font-size: 14px;margin-left: 20px;" v-html="message['content'+apiLang]">{{ message['content'+apiLang] }}</div>
        <div>
          <img src="@/assets/message/detail.png" alt object-fit="cover" style="width: 260px;height: 176px;margin-top: 20px;margin-right: 20px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner } from '@/api/message'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      parseTime,
      message: {},
      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]
    const id = this.$route.query.id
    this.getDetail(id)
  },
  methods: {
    getDetail(id) {
      getBanner({ id: id }).then(r => {
        this.message = r.data
      })
    }
  }
}
</script>

<style>

</style>
