<template>
  <el-drawer title="详情" :visible.sync="isFileInfoPanlShow" :with-header="true">
    <div class="top">
      <p class="title">{{currentSelectFile.classname}} {{currentSelectFile.title}}</p>
      <div class="info1">
        <p>发布者: {{currentSelectFile.createby}}</p>
        <p>发布时间: {{currentSelectFile.createdate}}</p>
      </div>
    </div>
    <div class="descript" v-if="currentSelectFile.notes">
      <p class="title">课程描述</p>
      <p>
        {{currentSelectFile.notes}}
      </p>
    </div>
    <div class="file1" v-if="currentSelectFile.attinfos.length >= 1">
      <p class="title">课件</p>
      <div class="file-box">
        <file-item :itemStyle="itemStyle" 
                   :fileData="currentSelectFile.attinfos | fileType"
                   :isDownLoad="true"
                   @updateDownLoadRecord="updateDownLoadRecord">
        </file-item>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import FileItem from '@/components/file-block/index'
import matchingFileType from '@/utils/matchingFeilType'
export default {
  name: "Drawer",
  data () {
    return {
      isFileInfoPanlShow: false,
      //itemfile样式
      itemStyle: {
        img: {
          width: 52.75,
          height: 63.83
        },
        title: 16,
        descript: 12
      },
    };
  },
  filters: {
    fileType(val) {
      return matchingFileType.fileList(val)
    }
  },
  props: {
    currentSelectFile: {
      default () {
        return {}
      }
    }
  },
  components: {
    FileItem
  },
  computed: {},
  watch: {},
  created () {
  },
  methods: {
    //更新下载记录
    updateDownLoadRecord(data) {
      this.$api.requested({
        "classname": "saletool.courseware.courseware",
        "method": "updateDownloadLog",
        "content": {
                "sat_coursewareid":this.currentSelectFile.sat_coursewareid
        }
      }).then( res => {
        if(res.code != 1) {
          this.$notify({
            title:'提示',
            message:'下载更新记录失败',
            type:'warning'
          })
        }
      })
    }
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
/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;
}
.el-drawer__body {
}
.el-drawer__body .top {
  border-bottom: 1px solid #dddddd;
  margin: 30px  0;
  padding: 0 20px;
}
.el-drawer__body .title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.el-drawer__body .top .info1 {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  display: flex;
  margin: 20px 0 20px 0;
}
.el-drawer__body .top .info1 p:first-child {
  margin-right: 50px;
}
.el-drawer__body .descript {
  border-bottom: 10px solid #FAFAFA;
  padding: 0 20px 20px 20px;
}
.el-drawer__body .descript .title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}
.el-drawer__body .descript p {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.el-drawer__body .file1 {
  margin-top: 20px;
  padding: 0 20px;
}
.el-drawer__body .file1 .title {
  margin-bottom: 20px;
}
</style>