<template>
    <div class="videomaterial" 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-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>
                        <video width="260" height="180" controls="controls" v-if="x.VideoModel && x.VideoModel.VideoPath">
                            <source :src="x.VideoModel.VideoPath" type="video/ogg" />
                            <source :src="x.VideoModel.VideoPath" type="video/mp4" />
                            <source :src="x.VideoModel.VideoPath" type="video/webm" />
                        </video>

                        <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='5' @editsuccess="getchildren" :editobj='editobj'   @getcancel='Isadd=false'></alladdsc>
        </div>
       

    </div>
</template>

<script>
    import alladdsc from './allAddSC'
   
    export default {
        name: "videomaterial",
        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.VideoModel = JSON.parse(JSON.stringify(row.VideoModel)) ;
                this.Isadd = true
            },
            
            getchildren(){
                this.$emit('editsuccess')
                this.Isadd = false
            },
            pldelete(){
                this.$emit('getdelete')
            },
            plmove(){
                this.$emit('getmove')
            }
        }
    }

</script>

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

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

    .videomaterial .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;
    }

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

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

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

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

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

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

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

    .videomaterial .onetext {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 260px;
    }
</style>