<template>
  <ai-detail>
    <template slot="title">
      <ai-title title="公告详情" isShowBack isShowBottomBorder @onBackClick="$parent.goBack"></ai-title>
    </template>
    <template #content>
      <ai-card :title="detailObj.title" class="title">
        <template #content>
          <el-row type="flex" justify="space-between" class="info">
            <span>时间：{{detailObj.releaseTime}}</span>
            <span style="display:flex">发布单位：
             <ai-open-data type="departmentName"  :openid="detailObj.unitName" v-if="detailObj.unitName"></ai-open-data>
            </span>
            <span style="display:flex">发布人：
             <ai-open-data type="userName"  :openid="detailObj.releaseUserName" v-if="detailObj.releaseUserName"></ai-open-data>
            </span>
          </el-row>
          <div v-html="detailObj.content" style="margin: 20px 0;"></div>
        </template>
      </ai-card>
      <ai-card title="附件" v-if="detailObj.files && detailObj.files.length">
        <template #content>
          <el-row type="flex" justify="space-between" class="file" v-for="(item,index) in detailObj.files" :key="index" @click.native="open(item)">
            <span>{{item.fileName}}</span>
            <span>{{(item.size/1024).toFixed(2)}}KB</span>
          </el-row>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: "detail",
    props: {
      instance: Function,
      dict: Object,
      detail: Object
    },
    data() {
      return {
        detailObj: {},
      }
    },
    methods: {
      open(item) {
        window.open(item.url);
      }
    },
    mounted() {
      this.instance.post("/app/appannouncement/detail", null, {
        params: {
          id: this.detail.id
        }
      }).then(res => {
        if (res && res.data) {
          this.detailObj = res.data;
          this.$initWxOpenData()
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .title {
    .aibar-left {
      width: 100%;
      text-align: center;
    }
  }

  .file {
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d0d4dc;
    margin-bottom: 16px;
    cursor: pointer;
  }

  .info {
    & > span {
      font-size: 14px;
      color: #333;
    }
  }

</style>
