<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;">
              <div>{{x.UpdateTime}}</div>
              <div>

                <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;" @click.stop="goedit(x)"></i>
              </div>
            </div>
            <video width="260" height="180" :src="x.Path" controls="controls" v-if="x.Path">
              <!-- <source :src="x.Path" type="video/mp4" /> -->
            </video>
            <div class="onetext" style="margin-top: 5px;">{{x.MediaName}}</div>
            <div style="margin-top: 5px;display: flex;justify-content: space-between;align-items: center;">

              <span class="onetext" style="width: 50%;"><i class="iconfont icon-ico-64"
                  style="font-size: 12px;color: #1890ff;margin-right: 3px;"></i>{{x.MediaGroupName}}</span>
              <span class="onetext" style="width: 50%;text-align: right;"><i class="iconfont icon-ren-"
                  style="font-size: 14px;color: #1890ff;margin-right: 3px;"></i>{{x.UpdateByName}}</span>
            </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='3' @editsuccess="getchildren" :editobj='editobj'
        @getcancel='Isadd=false'></alladdsc>
    </div>


  </div>
</template>

<script>
  import alladdsc from '../components/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 = row
        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>