<template>
  <div class="FlowDiv">
    <!--事件主体 start-->
    <div v-if="data && data.content && data.content.length > 0" class="FlowContentDiv">
      <div class="FlowContentTop box box_between ">
        <div class="FlowContentTopL slh">{{data.title}}</div>
        <div class="FlowContentTopR">{{data.date}}</div>
      </div>
      <d-flowContent ref="flowContent" :content="data.content"></d-flowContent>
      <div class="FlowContentBottom">{{data.number}}</div>
    </div>
    <!--事件主体 end-->
    <!--附件 start-->
    <div v-if="files.length > 0" v-for="item in files" class="FlowFile">
      <div class="FlowFileTitle">{{item.title}}</div>
      <div class="FlowFileDiv">
        <!--图片-->
        <div v-if="item.min && Array.isArray(item.min) && item.min.length>0" class="FlowFileBox">
          <d-flowImages @imgclick="imgclick" :min="item.min" :max="item.max" :imgname="item.imgname"></d-flowImages>
        </div>
        <!--音频-->
        <template v-if="item.audio && Array.isArray(item.audio) && item.audio.length>0">
          <div v-for="src in item.audio"  class="FlowFileBox">
            <d-flowAudio :src="src"></d-flowAudio>
          </div>
        </template>
        <!--文件-->
        <template v-if="item.file && Array.isArray(item.file) && item.file.length>0">
          <div v-for="one in item.file" class="FlowFileBox">
            <d-flowFile :file="one" @fileclick="fileclick"></d-flowFile>
          </div>
        </template>

      </div>
    </div>
    <!--附件 end-->
    <!--事件流 start-->
    <d-flowFlow v-if="data.flow" :data="data.flow"></d-flowFlow>
    <!--事件流 end-->
  </div>
</template>

<script>
  import '../../lib/index.css'
  import './../iconfont/iconfont.css'
  import DFlowAudio from './DFlowAudio.vue'
  import DFlowImages from './DFlowImages.vue'
  import DFlowFile from './DFlowFile.vue'
  import DFlowContent from './DFlowContent.vue'
  import DFlowFlow from './DFlowFlow.vue'
  export default {
      name: 'd-flow',
      mounted() {
        if(this.data && this.data.files && Array.isArray(this.data.files) && this.data.files.length > 0) {
          this.files = this.data.files;
        }


      },
      components: {DFlowAudio, DFlowImages, DFlowFile, DFlowContent, DFlowFlow},
      props: ['data'],
      data () {
        return {
          files: []
        }
      },
      methods: {
        imgclick(url, arr) {
          this.$emit('imgclick',url, arr)
        },
        fileclick(obj) {
          this.$emit('fileclick',obj);
        },
        getContent() {
          return this.$refs.flowContent.getData()
        }
      }
  }
</script>
<style scoped>
  .FlowDiv {
    width: 100%;
    height: auto;
    text-align: left;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    font-size: 14px;
    padding-bottom: 15px;
  }

  .FlowFile,.FlowContentDiv {
    margin-top: 15px;
    background-color: #fff;
    width: 100%;
    height: auto;
    padding: 15px;
    box-sizing: border-box;
  }
  .FlowContentDiv {
    padding-top: 0;
  }
  .FlowContentTop {
    height: 40px;
    line-height: 40px;
    padding-top: 5px;
    border-bottom: 1px solid #ddd;
  }
  .FlowContentBottom {
    text-align: right;
    width: 100%;
    color: #999;
    padding-top: 5px;
  }
  .FlowContentTopL {
    font-size: 17px;
  }
  .FlowContentTopR {
    color: #999;
    font-size: 14px;
    min-width: 90px;
    text-align: right;
  }
  .FlowFileTitle {
    height: 15px;
    line-height: 15px;
    font-size: 15px;
  }
  .FlowFileDiv {
    height: auto;
  }
  .FlowFileBox {
    height: auto;
    margin-top: 15px;
  }

</style>
