<template>
  <div class="cmain">
    <el-descriptions border :labelStyle="{ width: '120px' }" :column="2">
      <el-descriptions-item label="标题">
        <span v-html="form.conference.conferenceTitle"></span>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <span class="status">
          {{
            form.conference.type == 1
              ? "完结"
              : form.conference.type == 2
              ? "长期"
              : "限期"
          }}</span
        >
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions border :labelStyle="{ width: '120px' }" >
      <el-descriptions-item label="协作单位">
        <span v-text="form.conference.cooperativeUnit"></span>
      </el-descriptions-item>
    </el-descriptions>

    <!-- <div class="detail_item">
      <div class="title">会议标题：</div>
      <p>{{ form.conference.conferenceTitle }}</p>
    </div> -->
    <el-form v-model="form">
      <div >
        <div
          style="
            font-size: 14px;
            color: #606266;
            font-weight: 600;
            line-height: 40px;
            "
        >
          内容
        </div>
        <div
          class="test"
          style="
            background-color: #f5f7fa;
            border: 1px solid #dfe4ed;
            color: #c0c4cc;
            padding: 10px;
            min-height: 150px;
          "
          v-html="form.conference.conferenceContent"
        ></div>
      </div>
      
      <el-form-item label="协作要求" prop="collaborativeContent">
        <el-input
          :disabled="true"
          type="textarea"
          rows="4"
          placeholder="请输入协作要求"
          v-model="form.conference.collaborativeContent"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="状态" prop="type">
        <template>
          <el-radio disabled v-model="form.conference.type" label="1"
            >完结</el-radio
          >
          <el-radio disabled v-model="form.conference.type" label="2"
            >长期</el-radio
          >
          <el-radio disabled v-model="form.conference.type" label="3"
            >限期</el-radio
          >
        </template>
      </el-form-item> -->

      <el-form-item label="限期日期" prop="date">
        <el-date-picker
          :disabled="true"
          v-model="form.conference.date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <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>
    </el-form>
  </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-top: 20px;
  margin-bottom: 20px;
}
.wire {
}
.detail_item .title {
  // width: 100px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #606266;
}

.status {
  color: #409eff;
  padding: 4px 8px;
  border: 1px solid #409eff;
  border-radius: 4px;
}
.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>
