<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:60%; margin: auto"  :column="4">

                <el-descriptions-item label-width="0" label="项目类型" >
                  {{util_formatters("projectType", form.projectType)}}
                </el-descriptions-item>

                <el-descriptions-item label-width="0" label="发布时间" >
                  {{util_formatterDate(form.createTime)}}
                </el-descriptions-item>

                <el-descriptions-item label="开始时间" label-width="0"  >
                  {{util_formatterDate(form.projectStartTime)}}
                </el-descriptions-item>

                <el-descriptions-item label-width="0" label="结束时间">
                {{util_formatterDate(form.projectEndTime)}}
                </el-descriptions-item>

              </el-descriptions>


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

              <div class="ql-editor" v-html="form.studyContent"></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:[
                    "projectType",
                    "studyStatus",
                    "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>
