<template>
  <div class="content-main helpDocumentDetailPage" v-loading="detailLoading">
    <el-form ref="formData" :model="formData" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="8" :offset="4">
          <el-form-item label="系统模块:">
            <span>{{ formData.gnmk }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="文档标题:">
            <span>{{ formData.wdbt }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" :offset="4">
          <el-form-item label="推荐读者:">
            <span>{{ formData.tjdz }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编制日期:">
            <span>{{ formData.bzrq }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16" :offset="4">
          <el-form-item label="手册附件:">
			  <el-row
			    v-for="(item, index) in fileList"
			    :key="index"
			  >
				<a :href="`${fileDownload}?id=${item.id}`">{{
					 item.name
				  }}</a> 
			  </el-row>
            <!-- <a :href="`${fileDownload}?id=${formData.scfjid}`">{{
              scfjName
            }}</a> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16" :offset="4">
          <el-form-item
            label="手册视频:"
            style="margin-top: 5px; margin-bottom: 3px"
          >
            <dl @click="showVideo" class="defaultImg">
              <dt>
                <img src="@/assets/video.png" alt v-if="isImg" />
              </dt>
              <dd>{{ scspName }}</dd>
            </dl>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16" :offset="4">
          <el-form-item label="手册详情:">
            <quill-editor
              disabled
              v-model="formData.scxq"
              ref="myQuillEditor"
              :options="quillOption"
            ></quill-editor>
            <el-input type="hidden" v-model="formData.scxq"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      class="videoDialog"
    >
      <video :src="`${fileDownload}?id=${formData.scspid}`" controls autoplay>
        您的浏览器不支持 video 标签。
      </video>
    </el-dialog>
    <div style="text-align: center">
      <el-button @click="goBack" type="primary">
        <i class="iconfont">&#xe695;</i> 返回
      </el-button>
    </div>
  </div>
</template>
<script>
import { fileDownload } from "@/api/index";
import { helpDetail, getFileInfo } from "@/api/publicfunction/helpDocument";
import { quillEditor } from "vue-quill-editor";
import quillConfig from "@/utils/quill-config.js";
export default {
  data() {
    return {
		fileList:[],
      fileDownload: `${fileDownload}`,
      formData: {},
      scspName: "",
      scfjName: "",
      dialogVisible: false,
      isImg: false,
      quillOption: quillConfig,
      detailLoading: false,
    };
  },
  created() {
    this.getInitInfo();
  },
  components: {
    quillEditor,
  },
  methods: {
    getInitInfo() {
      this.detailLoading = true;
      helpDetail(this.$route.query.wdId).then((res) => {
        this.formData = res;
        if (res.scfjid) {
          this.getFileFun(res.scfjid, "手册附件");
        }
        if (res.scspid) {
          this.getFileFun(res.scspid);
        }
        this.detailLoading = false;
      });
    },
    getFileFun(ids, mark) {
		let arr = ids.split(",")
		arr.forEach((item) =>{
			getFileInfo(item).then((res) => {
				console.log(res,'ppp-----------')
			  if (res.infoCode == 200) {
			    if (mark == "手册附件") {
			      this.fileList.push({
			          name: res.data[0].name,
					  id:item,
			          response: {
			            data: {
			              id: ids,
			            },
			          },
			        }) 
			      // this.scfjName = res.data[0].name;
			    } else {
			      this.scspName = res.data[0].name;
			      this.isImg = true; //默认的视频图片
			    }
			  } else {
			    this.$message({
			      message: res.msg,
			      type: "error",
			      duration: 2000,
			    });
			  }
			});
		})
     //  getFileInfo(ids).then((res) => {
     //    if (res.infoCode == 200) {
     //      if (mark == "手册附件") {
			  // this.fileList.push({
			  //     name: res.data[0].name,
			  // 	  id:item,
			  //     response: {
			  //       data: {
			  //         id: ids,
			  //       },
			  //     },
			  //   })
     //        // this.scfjName = res.data[0].name;
     //      } else {
     //        this.scspName = res.data[0].name;
     //        this.isImg = true; //默认的视频图片
     //      }
     //    } else {
     //      this.$message({
     //        message: res.msg,
     //        type: "error",
     //        duration: 2000,
     //      });
     //    }
     //  });
    },
    showVideo() {
      this.dialogVisible = true;
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.helpDocumentDetailPage {
  .defaultImg {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    &:hover {
      dd {
        color: #06c;
      }
    }
  }
  .videoDialog {
    video {
      object-fit: fill;
      width: 100%;
      height: 500px;
    }
    .el-dialog__header {
      padding: 0 !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      position: relative;
      left: 6px;
      top: -7px;
      color: #333 !important;
    }
  }
  .el-form-item {
    margin-bottom: 0px;
    .el-form-item__label {
      line-height: 30px;
      color: #333 !important;
    }
    .el-form-item__content {
      line-height: 30px;
    }
  }
  .ql-editor {
    min-height: 150px;
  }
  .ql-toolbar.ql-snow {
    // display: none;
  }
  .ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: 1px solid #ccc;
  }
}
</style>