<template>
  <div>
    <xy-dialog ref="dialog" :width="50" :is-show.sync="isShow" type="form" :title="'查看'" :form="form">
      <template v-slot:show>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>上传时间：
          </div>
          <div class="xy-table-item-content">
            {{showform.created_at?showform.created_at.substring(0,16):''}}
          </div>
        </div>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>上传人：
          </div>
          <div class="xy-table-item-content">
            {{showform.admin?showform.admin.name:''}}
          </div>
        </div>
        <div class="xy-table-item"  style="align-items: normal;">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>标题：
          </div>
          <div class="xy-table-item-content">
            {{showform.title?showform.title:''}}
          </div>
        </div>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>目录：
          </div>
          <div class="xy-table-item-content">
            <el-tag>{{showform.menu?showform.menu.name:''}}</el-tag>
          </div>
        </div>

        <div class="xy-table-item"  style="align-items: normal;">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>内容：
          </div>
          <div class="xy-table-item-content">
            <div v-html="showform.content?showform.content:''"></div>
          </div>
        </div>
        <div class="xy-table-item" style="align-items: normal;">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>附件：
          </div>
          <div class="xy-table-item-content">
            <div v-for="item in showform.regulation_article_file">
              <el-link target="_blank" style="margin-right: 10px;" @click="toshowFile(item.files.url,item.files.original_name)"
                type="primary">
                预览
              </el-link>
              <el-link target="_blank" @click="base.downLoadFileUrl(item.files.id)" type="primary">
                下载
              </el-link>
              <a :href="item.files.url" target="_blank">{{item.files.original_name}}</a>
            </div>
          </div>
        </div>

      </template>
      <template v-slot:footerContent>
        <div>
          <el-button size="small" @click="closeDia">关闭</el-button>
        </div>
      </template>
    </xy-dialog>
    <viewFile :width="'50%'" ref="viewFile" :url='fileUrl' :title="fileTitle"></viewFile>

  </div>


</template>

<script>
  import {
    get
  } from "@/api/lawsfile/article.js";
  import viewFile from '@/components/viewFile/viewFile.vue'
  export default{
    components:{
      viewFile
    },
    data(){
      return{
        isShow:false,
        fileUrl:'',
        fileTitle:'',
        form:{
          show:''
        },
        showform:{},
        diaShow:false
      }
    },
    watch:{
      isShow(newVal){
        if(newVal){
          this.getDetail()
        }else{
          this.id = ''
          this.showform = {}
          this.diaShow = false
          this.isShow = false
          this.$emit("refresh",this.isShow)
        }
      }
    },
    methods:{
      toshowFile(url,title){
        console.log(url)
        this.fileUrl = url
        this.fileTitle = title
        this.$refs.viewFile.diaShow = true
      },
      closeDia(){
        this.isShow = false
        this.$emit("refresh",this.isShow)
      },
      getDetail(){
        let that = this
        get(this.id).then(res=>{
          // let result = Object.assign(that.showform, res);
          // that.showform = result;
          that.showform={
            ...res
          }
          // that.showform.show = ''
          console.log("form",that.showform)
        }).catch(error => {
          //reject(error)
        });
      }
    }
  }
</script>

<style scoped>
  /deep/ .show{
    flex-basis: 100%;
  }
</style>
