<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>


          <ul class="attachment-list">
            <li v-for="(file, index) in attachmentList" :key="index">

              <div class="file-preview">
                <template v-if="checkImage(file)">
                  <img :src="file.url" alt=""/>
                </template>
                <template v-else-if="checkVideo(file)">
                  <video :src="file.url" controls preload="metadata" width="200"></video>
                </template>
                <template v-else>
                  <el-link type="primary" :href="file.url">{{ file.fileName }}</el-link>
                </template>
              </div>
              <div class="file-info">
                <span class="file-name">{{ file.fileName }}</span>
              </div>
              <el-divider style="width: 100%"></el-divider>


            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

  </layout-view>
</template>

<script>
import view from "@/assets/mixins/view";

export default {
  mixins: [view],
  components: {},
  methods: {
    beforeRender(data) {
      const nameArrays =data.entity.fileName.split(';');
      const pathArrays =data.entity.filePath.split(';');
      for (let i = 0; i < nameArrays.length; i++) {
        let obj={fileName: nameArrays[i],url:pathArrays[i]}
        this.attachmentList.push(obj)
      }
      return data
    },
    checkImage(file) {
      const extension = file.fileName.split('.').pop().toLowerCase();
      if (['jpg',  'jpeg', 'png', 'gif'].indexOf(extension) !== -1) {
        return true;
      } else {
        return false;
      }
    },
    checkVideo(file) {
      const extension = file.fileName.split('.').pop().toLowerCase();
      if (['mp4', 'MP4'].indexOf(extension) !== -1) {
        return true
      } else {
        return false;
      }
    },
  },
  data() {
    return {
      attachmentList: [],
      isImage: false,
      isVideo: 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>
