<template>
    <div class="imgmaterial" 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>
                        <q-img :src="x.ImageModel && x.ImageModel.ImagePath?x.ImageModel.ImagePath:''" class="imgstyle">
                            <div class="absolute-bottom text-subtitle1 text-center onetext"
                                style="padding: 0;padding: 0 5px;font-size: 12px;">
                                {{x.ImageModel && x.ImageModel.ImageName ?x.ImageModel.ImageName:''}}
                            </div>
                          
                            <q-icon
                                v-if="x.Media_Id && x.Media_Id!=''" class="absolute all-pointer-events"
                                size="20px" name="iconfont icon-yiqueren" color="green" style="top: 8px; right: 8px">
                                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                                    已更新
                                </q-tooltip>
                            </q-icon>
                            <q-icon
                                v-if="x.Media_Id==''" class="absolute all-pointer-events"
                                size="20px" name="iconfont icon-weiwancheng" color="red" style="top: 8px; right: 8px">
                                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                                    未更新
                                </q-tooltip>
                            </q-icon>
                        </q-img>
                        <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='2' @editsuccess="getchildren" :editobj='editobj'
                @getcancel='Isadd=false'></alladdsc>
        </div>

    </div>
</template>

<script>

    import alladdsc from './allAddSC'
    export default {
        name: "imgmaterial",
        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.ImageModel = JSON.parse(JSON.stringify(row.ImageModel));
                this.Isadd = true
            },

            getchildren() {
                this.$emit('editsuccess')
                this.Isadd = false
            },
            pldelete() {
                this.$emit('getdelete')
            },
            plmove() {
                this.$emit('getmove')
            }

        }
    }

</script>

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

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

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

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

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

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

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

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

    .imgmaterial .imgcard {
        width: 240px;
        margin: 0 15px 15px 0
    }

    .imgmaterial .imgstyle {
        width: 100%;
        height: 120px;
        border-radius: 0;
    }

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