<template>
  <section class="detail">
    <ai-title slot="title" title="轮播图详情" isShowBottomBorder :isShowBack="true" @onBackClick="cancel(false)"/>
    <ai-card>
      <ai-title slot="title" title="基本信息"/>
      <template #content>
        <ai-wrapper label-width="80px" :columnsNumber="1">
          <ai-info-item label="首页封面">
            <span><img :src="dialogInfo.imgUrl" alt="" style="width:100px;height:100px;"/></span>
          </ai-info-item>
          <ai-info-item label="标题">
            <span>{{ dialogInfo.title }}</span>
          </ai-info-item>
          <ai-info-item label="链接类型">
            <span>{{ dict.getLabel('bannerType', dialogInfo.type) }}</span>
          </ai-info-item>
          <ai-info-item label="内容" isLine v-if="dialogInfo.type == 3">
            <div v-html="dialogInfo.rtf"></div>
          </ai-info-item>
          <ai-info-item label="链接" v-else>
            <span>{{ dialogInfo.linkUrl }}</span>
          </ai-info-item>
          
        </ai-wrapper>
      </template>
    </ai-card>
  </section>
</template>

<script>

export default {
  name: "detail",
  data() {
    return {
      dialogInfo: {}
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    params: Object,
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.instance.post(`/app/appbanner/detail?id=${this.params.id}`).then((res) => {
        if (res?.data) {
          this.dialogInfo = {...res.data}
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    }

  },
}
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-y: scroll;
}
</style>
