<template>
    <layout-view>

      <el-row justify="center" align="middle" ::span="24">
        <el-col :span="24" style="display:flex;justify-content:center;">
          <el-card  class="box-card">
            <el-row>
              <span class="my-custom-text">{{form.title}}</span>
              <el-button type="primary" style="float: right" @click="$router.go(-1)" size="small">返回</el-button>
            </el-row>

            <!--              <el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button>-->
            <el-divider style="width: 100%"></el-divider>
            <el-descriptions style="text-align: center;width:50%; margin: auto"  :column="3"   >
              <el-descriptions-item label-width="0" label="公告类型" >
                {{ util_formatters("noticetType", form.noticetType) }}
              </el-descriptions-item>
              <el-descriptions-item label="发布时间" label-width="0"  >
                {{util_formatterDate(form.createTime)}}
              </el-descriptions-item>
              <el-descriptions-item label-width="0" label="发布部门">
                {{form.deptName}}
              </el-descriptions-item>
            </el-descriptions>
            <el-divider style="width: 100%"></el-divider>

            <div class="ql-editor" style="" v-html="form.noticeContent"></div>

            <el-divider style="width: 100%"></el-divider>

            <div v-if="isImage">
              <img :src="form.filePath" alt="图片描述">
            </div>
            <div v-else>
              <el-link type="primary" :href="form.filePath" >{{form.fileName}}</el-link>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </layout-view>
</template>

<script>
    import view from "@/assets/mixins/view";
    export default {
        mixins: [view],
        components: {
        },
        methods: {
          afterRender(data) {
            this.checkFileType()
          },
          checkFileType() {
            const extension = this.form.fileName.split('.').pop().toLowerCase();
            if (['jpg', 'jpeg', 'png', 'gif'].indexOf(extension) !== -1) {
              this.isImage = true;
            } else {
              this.isImage = false;
            }
          },
        },
        data() {
            return {
              isImage: false,
                size:"small",
                column:2,
                toString:[
                    "noticetType",
                    "noticeStatus",
                    "top",
                ],
                toArrays: [

                ],
                toDate: [

                ]
            }
        }
    }
</script>
<style lang="less">
.labelClass{
  width: 200px;
}
.el-descriptions__body{
  margin-left: 5px;
  margin-right: 5px;
  color: #606266;
  background-color: #FFF;
}
.contentClass{

}


.box-card {
  width: 100%;
  padding: 20px;
  margin: 20px;
  text-align: center;

}

.my-custom-text {
  font-size: 18px;
  font-weight: bold;
}

.el-divider{
  margin: 18px 0;
  background: 0 0;
  border-top: 1px solid #E6EBF5;
}
</style>
