<template>
    <div class="filematerial" style="padding: 0;margin: 0;">

        <div class="page-content">
            <div>
                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="cloud_upload" label="上传文件"
                    @click="goadd()"></q-btn>
                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="delete" label="批量删除"
                    @click="pldelete()"></q-btn>
                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组"
                    @click="plmove()"></q-btn>
            </div>
            <div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;"
                v-if="dataList.length>0">
                <q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
                    :style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
                    @click="dataList[y].check = !dataList[y].check,$forceUpdate()">
                    <q-card-section>
                        <div
                            style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
                            <span>{{x.UpdateTime}}</span>
                            <q-icon
                                v-if="x.Media_Id && x.Media_Id!=''" 
                                size="20px" name="iconfont icon-yiqueren" color="green" >
                                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                                    已更新
                                </q-tooltip>
                            </q-icon>
                            <q-icon
                                v-if="x.Media_Id==''"
                                size="20px" name="iconfont icon-yiquxiao" color="red" >
                                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                                    未更新
                                </q-tooltip>
                            </q-icon>
                            <!-- <q-btn class="q-mr-md" label="编辑" size="xs" color="accent" style="margin-right: 0;" @click.stop="goedit(x)" /> -->
                            <!-- <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
                                @click.stop="goedit(x)"></i> -->
                        </div>

                        <div class="iconfontfile " v-if="x.FileModel && x.FileModel.FilePath!=''"
                            @click.stop="showUpLoadFile(x.FileModel)">
                            <i v-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='PDF'"
                                class="iconfont icon-pdf"></i>
                            <i v-else-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='TXT'"
                                class="iconfont icon-txt"></i>
                            <i v-else-if="x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='DOCX' || 
                            x.FileModel.FilePath.substring(x.FileModel.FilePath.lastIndexOf('.')+1,x.FileModel.FilePath.length).toUpperCase()=='DOC'
                            " class="iconfont icon-word"></i>
                            <i v-else class="iconfont icon-excel"></i>
                        </div>

                        <div class="onetext" style="margin-top: 5px;">{{x.FileModel && x.FileModel.FileName ? x.FileModel.FileName:''}}</div>
                        <div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateByName}}</div>
                        <div class="onetext" style="margin-top: 5px;">分组：{{x.MediumGroupName}}</div>
                    </q-card-section>
                </q-card>

            </div>
            <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据
            </div>

        </div>
        <div v-if="Isadd==true">
            <alladdsc :allclassifyList="allclassifyList" type='7' @editsuccess="getchildren" :editobj='editobj'
                @getcancel='Isadd=false'></alladdsc>
        </div>

    </div>
</template>

<script>

    import alladdsc from './allAddSC'

    export default {
        name: "filematerial",
        components: {
            alladdsc,
        },
        props: {
            dataList: {
                type: Array,
                default: [],
            },
            allclassifyList: {
                type: Array,
                default: [],
            }
        },
        data() {
            return {
                loading: false,
                Isadd: false,
                editobj: null
            }
        },
        created() {

        },
        methods: {
            goadd() {
                this.Isadd = true;
                this.editobj = null
            },
            goedit(row) {
                this.editobj = {}
                this.editobj.Id = row.Id;
                this.editobj.MediaGroupId = row.MediaGroupId;
                this.editobj.Type = row.Type;
                this.editobj.FileModel = JSON.parse(JSON.stringify(row.FileModel));
                this.Isadd = true
            },
            getchildren() {
                this.$emit('editsuccess')
                this.Isadd = false
            },
            pldelete(){
                this.$emit('getdelete')
            },
            plmove(){
                this.$emit('getmove')
            },

            showUpLoadFile(i) {
                // 文件类型进行判断
                if (
                    i.FileName.substring(
                        i.FileName.lastIndexOf(".") + 1,
                        i.FileName.length
                    ).toUpperCase() == "PDF" ||
                    i.FileName.substring(
                        i.FileName.lastIndexOf(".") + 1,
                        i.FileName.length
                    ).toUpperCase() == "TXT"
                ) {
                    this.previewPDF(i.Url);
                } else {
                    window.open(
                        "https://view.officeapps.live.com/op/view.aspx?src=" + i.FilePath
                    );
                }
            },


        }
    }

</script>

<style>
    .filematerial .Sysuser_Date .el-input--prefix .el-input__inner {
        background-color: red;
        border: 0;
    }

    .filematerial .state-item {
        padding: 2px 5px;
        border-radius: 3px;
        text-align: center;
        font-size: 10px;
    }

    .filematerial .frIdlist {
        padding: 3px 10px;
        border-radius: 3px;
        background: #EEEEEF;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .class-popover .q-pr-lg {
        padding-right: 0;
        margin-top: 20px;
    }

    .filematerial .el-date-editor.el-input {
        width: 100%;
    }

    .filematerial .el-date-editor.el-input input {
        background-color: transparent !important;
    }

    .filematerial .el-range-editor .el-range-input {
        background: none;
    }

    .Sysuser_Date .el-input__inner {
        background: transparent !important;
        border: 0 !important;
    }

    .filematerial .el-drawer.rtl {
        overflow: inherit;
    }

    .filematerial .imgcard {
        width: 300px;
        margin: 0 15px 15px 0
    }

    .filematerial .imgstyle {
        width: 100%;
        height: 45px;
        border-radius: 0;
    }

    .filematerial .onetext {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 260px;
    }



    .filematerial .icon-excel,
    .filematerial .icon-pdf,
    .filematerial .icon-txt,
    .filematerial .icon-wenjian,
    .filematerial .icon-yasuobao,
    .filematerial .icon-shipin,
    .filematerial .icon-word {
        font-size: 38px;
        color: green;
        line-height: 75px;
    }
</style>