<template>
  <div class="box">
    <div class="normal-card" v-if="fileData">
      <p class="title">提报记录</p>
      <div class="list" v-if="fileData.length > 0">
        <div class="list-item" @click="itemClick(item)" v-for="(item,index) in fileData" :key="index">
          <div class="decript">{{item.content}}</div>
          <div class="time"><span>提交时间:</span>{{item.createdate}}</div>
          <div class="footer">
            <p class="submit"><span>附件数:</span>{{item.attinfos.length}}</p>
          </div>
          <div class="handle" v-if="item.status == '退回' && item.content">
            <span class="back">退回</span>
          </div>
        </div>
      </div>
      <el-empty description="暂无数据" v-else></el-empty>
      <div class="pagin">
        <slot name="page"></slot>
      </div>
    </div>
    <el-drawer title="详情" :visible.sync="isFileInfoPanlShow">
      <div class="info">
        <p><span style="margin-right:10px">提报人:</span>{{currentFile.createby}}</p>
        <p><span style="margin-right:10px">提报时间:</span>{{currentFile.createdate}}</p>
      </div>
      <div class="content" style="word-break:break-all" v-if="currentFile.content">
        <p>提报内容</p>
        <p>
          {{currentFile.content}}
        </p>
      </div>
      <div class="file-box" v-if="currentFile.attinfos && currentFile.attinfos.length > 0">
        <p>提报附件</p>
        <div class="file1">
          <file-item :isDownLoad="true" :itemStyle="itemDrawerStyle" :fileData="currentFile.attinfos">
          </file-item>
        </div>
      </div>
        <el-button type="warning" @click="submitEdit" size="small" style="margin:16px 0 0 16px" v-if="currentFile.status == '退回'">重新提交</el-button>
    </el-drawer>
  </div>

</template>

<script>
import FileItem from '@/components/file-block/index'
export default {
  name: 'SubmiteditItemInfo',
  data () {
    return {
      isFileInfoPanlShow: false,
      itemDrawerStyle: {
        img: {
          width: 53,
          height: 64
        },
        title: 16,
        descript: 12,
      },
      currentFile: [],

    };
  },
  components: {
    FileItem,
  },
  props: ['fileData'],
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
    itemClick (item) {
      console.log(item);
      
      this.isFileInfoPanlShow = true
      this.currentFile = item
      this.currentFile.attinfos = this.fileType.fileList(this.currentFile.attinfos)
    },
    //编辑
    submitEdit() {
      this.isFileInfoPanlShow = false
      this.$emit('submitEdit',this.currentFile)      
    }
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.box {
  height: 100%;
}
.normal-card {
  min-height: calc(100vh - 310px);
  position: relative;
}
/deep/.el-drawer__header {
  color: #000000;
}
/deep/ .el-drawer {
  width: 546px !important;
}
.el-drawer__body .content {
  padding-left: 20px;
  border-bottom: 10px solid #FAFAFA;
}
.el-drawer__body .content p:first-child {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}
.el-drawer__body .content p:last-child {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  margin-bottom: 40px;
}
.el-drawer .file-box {
  padding: 20px 20px 0 20px;
}
.el-drawer .file-box p {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 14px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
}
.list .list-item {
  width: 380px;
  height: 120px;
  background: #F8F8F8;
  border-radius: 4px 4px 4px 4px;
  margin: 0 16px 16px 0;
  padding: 16px;
  cursor: pointer;
  transition: border 0.1s ease-in-out;
  position: relative;
}
.list .list-item:hover {
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.15);
}
.list .list-item .header1 .title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list .list-item .decript {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  display:-webkit-box;
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2;     
  overflow:hidden;        
  white-space: nowrap;   
  text-overflow: ellipsis;  
  margin-bottom: 16px;
}
.list .list-item .time {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  margin-bottom: 10px;
}
.list .list-item .footer {
  display: flex;
  justify-content: space-between;
}
.list .list-item .footer .submit {
  font-size: 12px;
  font-weight: 400;
  color: #999999; 
}
.list .list-item .handle {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.list .list-item .edit {
  font-size: 14px;
  font-weight: 400;
  color: #3874F6;
}
.list .list-item .back {
  width: 42px;
  height: 24px;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #FF3B30;
  font-size: 12px;
  font-weight: 400;
  color: #FF3B30;
  line-height: 22px;
  text-align: center;
  margin-right: 10px;
  display: block;
}
.info {
  margin: 0 0 20px 16px;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.info p:first-child {
  margin-right: 29px;
}
.time span,.submit span {
  margin-right: 10px;
}
.pagin {
  display: flex;
  flex-direction: row-reverse;
}
.pagin .el-pagination {
  margin-bottom: 0 !important;
  position: absolute;
  right: 16px;
  bottom: 16px;
}
</style>
