<template>
  <el-drawer title="详情" :visible.sync="isFileInfoPanlShow" :with-header="true">
    <p class="title">{{currentSelectFile.siteid}}</p>
    <p class="people">浏览数：{{currentSelectFile.readcount}}</p>
    <file-item :itemStyle="itemStyle" 
               :fileData="[currentSelectFile]"
               :isDownLoad="true">
    </file-item>
  </el-drawer>
</template>

<script>
import FileItem from '@/components/file-block/index'
export default {
  name: "Drawer",
  data() {
    return {
      isFileInfoPanlShow: false,
      itemStyle: {
        itemWidth:486,
        img: {
          width:64,
          height:64
        },
        title:16,
        descript: 14
      },
    };
  },
  components: {
    FileItem
  },
  props: {
    currentSelectFile: {
      default() {
        return {}
      }
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  methods: {
    downLoad() {
      window.open(this.currentSelectFile.url)
    },
    //预览
    seeClick() {

    }
  }
};
</script>

<style scoped>
  /deep/.el-drawer {
    width: 550px !important;
  }
  /deep/.el-drawer__header {
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  /deep/.el-drawer__body {
    padding: 0 30px 30px 30px;
  }
  .el-drawer__body .title {
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .el-drawer__body .people {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin: 10px 0 20px 0;

  }
  .el-drawer__body .file-info {
    width: 486px;
    height: 96px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #CCCCCC;
    padding: 16px 30px 16px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
  }
  .el-drawer__body .file-info .left {
    display: flex;
    align-items: center;
  }
  .el-drawer__body .file-info .left img {
    width: 53px;
    height: 64px;
  }
  .el-drawer__body .file-info .left .text {
    margin-left: 16px;
  }
  .el-drawer__body .file-info .left .text p:first-child {
    margin-bottom: 16px;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .el-drawer__body .file-info .left .text p:last-child {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .el-drawer__body .file-info .right {
    font-size: 14px;
    font-weight: 400;
    color: #3874F6;
    display: flex;
    align-items: center;
  }
  .el-drawer__body .file-info .right span {
    margin-right: 40px;
    cursor: pointer;
  }
  .el-drawer__body .file-info .right .el-button {
    width: 60px;
  }
</style>
