<template>
  <div class="cmain">
    <div class="detail_item">
      <div class="title">会议标题：</div>
      <p>{{ form.conference.conferenceTitle }}</p>
    </div>
    <div class="detail_item">
      <div class="title">会议内容：</div>
      <p>{{ form.conference.conferenceContent }}</p>
    </div>

    <div class="dept_list" v-for="(item, index) in form.reply" :key="index">
      <div class="title">{{ item.deptName }}：</div>
      <p>{{ item.reply }}</p>
    </div>

    <div class="detail_item wire">
      <div class="title ">附件：</div>
      <div class="item">
        <div class="item_file" @click="downloadFile(fileList[index], index)" v-for="(item, index) in imgList" :key="index">
          <img
            class="file"
            :src="
              item.substring(item.lastIndexOf('.') + 1) == 'doc' ||
              item.substring(item.lastIndexOf('.') + 1) == 'docx'
                ? word
                : excel
            "
            alt=""
            
          />
          <p
            class="img_text"
            :title="imgList[index].replace('/profile/upload/', '')"
          >
            {{ imgList[index].replace("/profile/upload/", "") }}
          </p>
        </div>
      </div>
    </div>
    <div class="mfooter">
      <el-button @click="$layer.close(layerid)">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { saveAs } from "file-saver";
import {
  getAttendMeetingDetail,
  fileDownloadFun,
} from "@/api/portal/JOINTCONFERENCE/JOINTCONFERENCE";
export default {
  data() {
    return {
      form: {
        conference: {},
        reply: [],
      },

      word: require("@/assets/images/file-word.png"),
      excel: require("@/assets/images/file-excel.png"),

      fileList: [],
      imgList: [],
    };
  },
  props: {
    param: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
    },
  },
  created() {
    if (this.param.id) {
      getAttendMeetingDetail(this.param.id).then((response) => {
        this.form = response.data;
        response.data.reply.forEach((item) => {
          if (item.attachment) {
            this.fileList.push(item);
            this.imgList.push(...item.attachment.split(","));
          }
        });
      });
    }
  },
  methods: {
    downloadFile(item, index) {
      console.log(item);
      let path = this.imgList[index].replace("/profile", "");
      let name = this.imgList[index].replace("/profile/upload/", "");
      fileDownloadFun({ fileName: path, delete: false }).then((res) => {
        let bolb = new Blob([res]);
        saveAs(bolb, name);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.cmain {
  color: #333333;
  font-size: 16px;
}
.cmain .detail_item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
}
.wire{

}
.detail_item .title {
  width: 100px;
  margin: 0;
}
.cmain .detail_item p {
  margin: 0;
}

.detail_item .file {
  height: 50px;
  width: 40px;
  margin-right: 10px;
}


.item_file{
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.img_text {
  width: 240px;
}

.dept_list {
  display: flex;
  align-items: flex-start;
  margin-bottom: 35px;
  .title {
    width: 240px;
  }
  p {
    flex: 1;
    margin: 0;
    margin-left: 20px;
  }
}
</style>
