<template>

  <el-drawer title="内容查看" :visible.sync="dialogViewVisible" direction="rtl">
    <div class="dialogConcent" :style="{height:clientHeight+'px'}">
      <el-scrollbar style="flex: 1">
        <el-form :model="form" ref="form" label-position="right" :label-width="formLabelWidth">
          <el-form-item label="标题" prop="title">
            {{form.title}}
          </el-form-item>

          <el-form-item label="目录" prop="menu_id">
            <el-tag>{{form.menu?form.menu.name:"无"}}</el-tag>
          </el-form-item>

          <el-form-item label="内容" prop="content">
            <div style="width: 99.9%;" v-html="form.content">
            </div>
          </el-form-item>
          <el-form-item label="附件" prop="file_list">
            <div style="display: flex;flex-direction: column;">

              <div v-for="item in form.regulation_article_file" style="display: flex;justify-content: space-between;">
                <el-link target="_blank" :href="item.files.url" type="primary">
                  {{item.files.original_name}}
                </el-link>
                <div style="display: flex;">
                  <el-link target="_blank" style="margin-right: 10px;" @click="toshowFile(item.files.url)"
                    type="primary">
                    预览
                  </el-link>
                  <el-link target="_blank" @click="base.downLoadFileUrl(item.files.id)" type="primary">
                    下载
                  </el-link>
                </div>
              </div>

            </div>

          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogViewVisible=false">关 闭</el-button>
    </div>
    <viewFile :is-show.sync="isShowViewFile" :url="fileUrl"></viewFile>
  </el-drawer>

</template>

<script>
  import viewFile from '@/components/viewFile/viewFile.vue'
  import {
    get
  } from "@/api/lawsfile/article.js";
  export default {
    components: {
      viewFile
    },
    data() {
      return {
        dialogViewVisible: false,
        form: {},
        clientHeight: 0,
        formLabelWidth: "120",
        isShowViewFile: false,
        fileUrl: ""
      }
    },
    watch: {
      dialogViewVisible(val, newval) {
        this.clientHeight = document.documentElement.clientHeight - 84 - 110;
      }
    },
    methods: {
      toshowFile(url) {
        this.fileUrl = url;
        this.isShowViewFile = true;
      },
      toCloseFile() {
        this.fileUrl = "";
      },
      getinfo(id) {
        var that = this;
        get(id).then(response => {
          that.form = response;
          let _files = [];
          for (var mod of result.files) {
            let m = Object.assign({}, mod);
            m.name = mod.original_name;
            _files.push(m);
          }
          // that.fileList = _files;
          that.form.file_list = _files;
        }).catch(error => {
          //reject(error)
        })
      },
    }
  }
</script>

<style>
  .dialogConcent {
    padding: 10px;
  }
</style>
