<style>
    .editOrderDrawerTop {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      background-color: #f0f5fb;
      padding: 5px 10px;
      align-items: center;
    }
    .disableStatus{
      opacity: 0.3 !important;
      cursor: auto;
    }
    .imgstyle{
        width:100%;height: 126px;border-radius: 4px;
    }
     .avatar-uploader .el-upload {
        border-radius: 6px;
        cursor: pointer;
        width: 100%;
        height: 100%;
        color: #8c939d;
        position: relative;
        overflow: hidden;
    }
    .addDutyMain {
        display: inline-block;
        width: 118px;
        height: 118px;
        font-size: 40px;
        border: 1px dashed #d9d9d9;
        line-height: 118px;
    }
  </style>
  
  <!--订单操作-->
  <template>
    <div>
        <q-dialog v-model="IsShow"  persistent>
            <q-card style="width: 900px; max-width: 80vw;">
                <q-card-section>
                  <div class="text-h6">选择素材</div>
                </q-card-section>
                <q-separator />
    
        
                <q-card-section class="q-pt-none">
                    <div class="page-search row items-center">
                        <div class="col row wrap q-mr-lg q-col-gutter-md" style="margin-top: 0;">
                            <div class="col-4">
                                <q-select filled stack-label @input="resetSearch"  option-value="ID" option-label="Name"
                                  v-model="msg.classifyId" ref="ID" :options="classifyList" label="分类" :dense="false" emit-value map-options />
                            </div>
                            <div class="col-4">
                                <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.EmployeeName"
                                  label="输入搜索内容" maxlength="20" />
                            </div>
                            <div class="col-4" v-if="materialType==2" >
                                <q-btn class="q-mr-md"  icon="cloud_upload" label="本地上传" @click="localUpload" />
                            </div>
                        </div>
                    </div>
                    <div class="q-pa-md">
                        <div class="q-col-gutter-md row items-start">
                          <div class="col-2" v-for="(x,y) in data" @click="Selectobj = x">
                            <q-img
                              :src="x.img"
                              class="imgstyle"
                              :style="{border:x.Id == Selectobj.Id?'2px solid #91d5ff':'2px solid #FFF'}"
                            >
                              <div class="absolute-bottom text-subtitle1 text-center" style="padding: 0;">
                                {{x.name}}
                              </div>
                            </q-img>
                          </div>
                        </div>
                      </div>
    
                </q-card-section>
    
                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
                    <q-btn color="accent" class="q-mr-md" label="保存"   @click="saveOrderInfo()" />
                </q-card-actions>
              </q-card>
        </q-dialog>
        <q-dialog v-model="Islocal"  persistent>
            <q-card style="width: 800px; max-width: 80vw;">
                <q-card-section>
                    <div class="text-h6">新建图片素材</div>
                  </q-card-section>
                  <q-separator />
                  <q-card-section class="q-pt-none" style="margin-top: 15px;height: 300px;">
                    <el-form ref="localMsg" :model="localMsg" label-width="120px">
                        <el-form-item label="上传图片：">
                            <el-upload class="avatar-uploader addDutyMain" action="" :before-upload="uploadFile"
                                :show-file-list="false">
                                <i class="el-icon-plus avatar-uploader-icon" v-if="localMsg.img==''"></i>
                                <q-img
                                    v-else
                                    :src="localMsg.img"
                                    style="width: 100%;height: 100%;border-radius: 6px;display: flex;"
                                    >
                                </q-img>
                            </el-upload>
                            <div>(图片大小不超过2M，支持JPG、JPEG及PNG格式)</div>
                        </el-form-item>

                        <el-form-item label="素材同步：">
                            <div class="q-gutter-sm" style="align-items: flex-start;display: flex;">
                                <q-radio v-model="localMsg.issynchro" val="2" label="不同步" />
                                <q-radio v-model="localMsg.issynchro" val="1" label="同步至【内容引擎】" />
                                <div v-if="localMsg.issynchro==1" style="width: 200px;">
                                    <q-select filled stack-label   option-value="ID" option-label="Name"
                                      v-model="localMsg.classifyId" ref="ID" :options="classifyList" label="分类" :dense="false" emit-value map-options />
                                </div>
                            </div>
        
        
                        </el-form-item>
                    </el-form>
                  </q-card-section>
                  <q-separator />
                  <q-card-actions align="right" class="bg-white">
                      <q-btn class="q-mr-md" label="取消" @click="Islocal = false" />
                      <q-btn color="accent" class="q-mr-md" label="上传"   @click="savelocal()" />
                  </q-card-actions>
            </q-card>
        </q-dialog>

    </div>
    
  </template>
  <script>
      import {
        UploadSelfFile
     } from "../../api/common/common"; //上传图片
    export default {
      props: {
        saveobj: {
          type: Object,
          default: null,
        },
        materialType: {
          type: Number,
          default: 1
        }
      },
      data() {
        return {
            IsShow: true,
            Islocal:false,
            saveStart:false,
            msg:{
                pageIndex: 1,
                pageSize: 10,
                classifyId:0,//分类id
                Name:'',//文字搜索
            },
            classifyList:[
                {Name:'全部',ID:0,},
                {Name:'活动',ID:1,},
                {Name:'产品',ID:2,},
                {Name:'校园',ID:3,},
            ],
            data:[
                {name:'dj.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107070330161360000000064.jpg',Id:1},
                {name:'王者荣耀.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090216027320000000011.jpg',Id:2},
                {name:'花火.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090331312620000000094.jpeg',Id:3},
                {name:'你的名字.png',img:'http://imgfile.oytour.com/EduSystem/Test/Upload/course/202107090302364350000000080.jpg',Id:4},
            ],
            Selectobj:null,
            localMsg:{//本地上传对象
                img:'',
                issynchro:'1',//是否同步 1是
                classifyID:0,//同步的时候的分类id
            }
        }
      },
      created(){
          this.Selectobj = JSON.parse(JSON.stringify(this.saveobj))
          this.getList()
      },
      mounted() {
      
      },
      watch: {
  
      },
      methods: {
        //关闭弹窗
        closeEditOrder() {
        //   this.IsShowEditOrder = false;
          this.$emit('close')
        },
        getList(){//获取数据
             
        },
        resetSearch(){
            this.msg.pageIndex = 1;
            this.getList()
        },
        saveOrderInfo(){//保存返回数据
            if(JSON.stringify(this.Selectobj) == "{}"){
                this.$q.notify({
                    type: 'negative',
                    message: `还未选择`,
                    position: 'top'
                })
                return
            }
            this.$emit('success',this.Selectobj)
        },
        localUpload(){//图片模式的时候本地上传
           this.Islocal = true

        },

        savelocal(){//本地上传操作
            //这里做上传操作  刷新列表
        },
        uploadFile(files) {
            UploadSelfFile("course", files, res => {
                if (res.Code == 1) {
                    this.localMsg.img = res.FileUrl;
                }
            });
        },
       
      
      }
    }
  
  </script>
  