<template>
  <el-drawer title="详情" :visible.sync="isFileInfoPanlShow" :with-header="true" v-if="currentSelectFile.length != 0">
    <div class="header">
      <p class="title">{{ currentSelectFile.title }}</p>
      <div class="detail-info">
        <span><span>浏览数:</span>{{ currentSelectFile.readcount }}</span>
        <span><span>分享数:</span>{{ currentSelectFile.sharecount }}</span>
        <span><span>拉新数:</span>{{ currentSelectFile.newcount }}</span>
        <span><span>创建人:</span>{{ currentSelectFile.changeby }}</span>
        <span><span>上传时间:</span>{{ currentSelectFile.createdate }}</span>
      </div>
    </div>
    <div class="content" v-if="this.currentSelectFile.content && this.currentSelectFile.content != '<p><br></p>'">
      <div ref="fwb" class="fwb">
      </div>
    </div>
    <div class="file2" v-if="currentSelectFile.type != 3">
      <div class="file-item" v-for="(item, index) in currentSelectFile.attinfos" :key="index">
        <file-item :itemStyle="itemStyle" :fileData="[item]" :isDownLoad="true"
          @updateDownLoadRecord="updateDownLoadRecord">
        </file-item>
      </div>
    </div>
  </el-drawer>
</template>


<script>
import FileItem from '@/components/file-block/index'
import fileType from '@/utils/matchingFeilType'
export default {
  name: "Drawer",
  data() {
    return {
      isFileInfoPanlShow: false,
      //itemfile样式
      itemStyle: {
        itemWidth: 1020,
        img: {
          width: 64,
          height: 64
        },
        title: 16,
        descript: 12
      },
    };
  },
  props: {
    currentSelectFile: {
      default() {
        return {}
      }
    }
  },
  components: {
    FileItem
  },
  computed: {},
  watch: {
    currentSelectFile: {
      handler(val) {
      }
    }
  },
  updated() {
    if (this.$refs.fwb) this.$refs.fwb.innerHTML = this.currentSelectFile.content
  },
  methods: {
    //更新下载记录
    async updateDownLoadRecord(data) {
      let res = await this.$api.requested({
        "classname": "saletool.sharematerial.sharematerial",
        "method": "updateDownloadLog",
        "content": {
          "sat_sharematerialid": this.currentSelectFile.sat_sharematerialid
        }
      })
      if (res.code != 1) {
        this.$notify({
          title: '提示',
          message: '下载更新记录失败',
          type: 'warning'
        })
      }
    }
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

/deep/video,
/deep/img {
  width: 100% !important;
}

/deep/.el-drawer {
  width: 546px !important;
}

/deep/.el-drawer__header {
  font-size: 16px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  margin-bottom: 0;
}

/deep/.el-drawer__body {}

.el-drawer__body .title {
  font-size: 16px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
}

.header {
  padding: 20px 20px;
  border-bottom: 10px solid #FAFAFA;
}

.title {
  margin-bottom: 15px;
}

.header .detail-info {
  display: flex;
  flex-wrap: wrap;
}

.header .detail-info span {
  margin: 0 50px 10px 0;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}

.header .detail-info span span {
  margin-right: 8px;
}

.content {
  padding: 20px;
  width: 100%;
}

.fwb {
  width: 100%;
}

/deep/.fwb p img {
  width: 100%;
}

.file2 {
  padding: 20px;
}

.image,
.image img,
.video,
.video video {
  width: 100%;
}
</style>
