<template>
    <div class="content-file-wrap">
        <div v-for="(item,index) in sasRes" class="content-file-item" :key="index">
            <div class="file-icon">
                <img v-if="item.extension == 'ppt' || item.extension == 'pptx'" src="../../assets/icon/ppt50.png" width="15" />
                <img v-else-if="item.extension == 'doc' || item.extension == 'docx'" src="../../assets/icon/word50.png" width="15" />
                <img v-else-if="item.extension == 'xls' || item.extension == 'xlsx'" src="../../assets/icon/xls50.png" width="15" />
                <img v-else-if="item.extension == 'pdf'" src="../../assets/icon/pdf50.png" width="15" />
                <img v-else-if="item.type == 'image'" src="../../assets/icon/icon_img.png" width="15" />
                <img v-else-if="item.type == 'video'" src="../../assets/icon/icon_video.png" width="15" />
                <img v-else src="../../assets/icon/prelearn50.png" width="15" />
            </div>
            <span>
                {{item.name}}
            </span>
            <span class="content-file-item-action">
                <Icon v-if="item.type == 'video' || item.type == 'image' || item.extension == 'pdf'" type="md-eye" class="action-icon" title="预览" @click="clickToPreview(item)" />
                <Icon type="md-download" class="action-icon" title="下载" @click="downloadFile(item)" />
            </span>
        </div>
        <EmptyData style="margin-top:30px;" v-if="sasRes.length == 0"></EmptyData>
        <Modal v-model="previewStatus" :title="previewFile.name" width="800px" class="dark-iview-modal">
            <video v-if="previewFile.type == 'video'" id="previewVideo" :src="previewFile.url" width="780" controls="controls">
                {{$t('teachContent.tips8')}}
            </video>
            <img v-if="previewFile.type == 'image'" :src="previewFile.url" width="780" style="border-radius:5px;" />
            <embed v-if="previewFile.type == 'doc'" :src="previewFile.url" width="780" height="600" />
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
    
    export default {
        props: {
            resources: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                sasRes:[],
                previewStatus: false,
                previewFile: [],
                sasString: '',
                blobContainer: '',
                urlString:''
            }
        },
        methods: {
            getSas() {
                this.$api.blob.getContainerSAS().then(
                    (res) => {
                        if (res.error == null) {
                            this.sasString = res.result.data.SAS
                            this.blobContainer = res.result.data.Container
                            this.urlString = res.result.data.Url
                        } else {
                            this.$Message.error('API error!')
                        }
                    },
                    (err) => {
                        this.$Message.error('API error!')
                    }
                )
            },
            downloadFile(item) {
                window.location.href = item.url + this.sasString
            },
            clickToPreview(file) {
                this.previewStatus = true
                this.previewFile = file
            }
        },
        created() {
            //this.getSas()
        },
        watch: {
            resources: {
                async handler(n, o) {
                    this.sasRes = []
                    for (let index in this.resources) {
                        let item = JSON.parse(JSON.stringify(this.resources[index]))
                        let sas = await this.$tools.getFileSas(this.resources[index].url)
                        item.url = sas.url
                        this.sasRes.push(item)
                    }
                },
                deep: true,
                immediate: true
            }
        }
    }
</script>
<style scoped lang="less">
    @import "./ContentFileList.less";
</style>
<style>
</style>