<template>
  <div>
    <xy-dialog ref="dialog" :width="80" :is-show.sync="isShow" type="form" :title="showform.title" :form="form">
      <template v-slot:show>
        <div class="article_title">{{showform.title}}</div>
        <div style="text-align: center;" v-if="extension=='mp4'||extension=='avi'||extension=='wmv'">
          <video controls :src="showform.image.url" style="max-width: 600px; max-height: 400px;"></video>
        </div>
        <div class="article_content">
          <div v-html="showform.content"></div>
        </div>

        <div class="article_files">
          <div class="article_files_name">附件：</div>
          <div v-for="item in showform.files">
            <div>
              <el-link target="_blank" style="margin-right: 10px;" @click="toshowFile(item.url,item.original_name)"
                type="primary">
                预览
              </el-link>
              <el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
                下载
              </el-link>
              <a :href="item.url" target="_blank">{{item.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 {
    show
  } from '@/api/task/newplan.js'
  import viewFile from '@/components/viewFile/viewFile.vue'
  export default {
    components: {
      viewFile
    },
    data() {
      return {
        isShow: false,
        fileUrl: '',
        fileTitle: '',
        form: {
          show: ''
        },
        extension:'',
        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.extension = ''
        this.showform = {}
        this.$emit("refresh", this.isShow)
      },
      getDetail() {
        let that = this
        show({
          table_name: 'articles',
          id: this.id,
           with_relations:['image']
        }).then(res => {
          this.form = {
            show: ''
          }
          this.showform = res
          this.extension = res.image?res.image.extension:''
        }).catch(error => {});
      }
    }
  }
</script>

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

  .article_title {
    text-align: center;
    padding: 15px;
    font-size: 24px;
    color: #333;
  }

  .article_content {
    line-height: 1.5;
    padding: 15px;
    font-size: 20px;
  }

  .article_files {
    display: flex;
    align-items: flex-start;
  }

  .article_files_name {
    font-size: 20px;
    color: #333;
  }
</style>
