<template>
  <div>
    <v-button
        icon="edit"
        @click="goToEditCardInfo"
    >
      {{ $t('page_unit.btn_edit_card_info') }}
    </v-button>
    <div v-loading="isLoading" class="content-about" v-html="unitAbout" />
  </div>
</template>

<script>
import VButton from '../../../../components/ui/v-button/VButton'
import {fetchUnitCardInfo} from '../../services/unit-sevice'
export default {
  name: 'UnitTabAbout',
  components: {VButton},
  data() {
    return {
      unitAbout: '',
      isLoading: false
    }
  },
  created() {
    this.fetchCardInfo()
  },
  methods: {
    goToEditCardInfo() {
      const { unitID } = this.$route.params
      this.$router.push({
        name: 'edit_unit_info',
        params: {
          unitID
        }
      })
    },
    fetchCardInfo() {
      const { unitID } = this.$route.params
      this.isLoading = true
      fetchUnitCardInfo(unitID)
          .then(res => {
            this.unitAbout = res
          })
          .finally(() => {
            this.loading = false
          })
    }
  }
}
</script>

<style lang="scss">
.content-about {
  margin-top: 1.6em;
  img {
    width: 100%;
  }
}
</style>
