<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 600px;max-width:900px;">
      <q-card-section>
        <div class="text-h6" v-if="type===0">新增</div>
        <div class="text-h6" v-if="type===1">编辑</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <h6 class="q-my-sm text-grey-6">图片信息</h6>
        <div class="row wrap q-mb-lg">
          <div style="display:flex;flex-wrap: wrap;">
            <div v-if="objOption.Image">
              <div class="ItemImgDiv">
                <q-img :src="objOption.Image" spinner-color="white" style="height: 100%;height:100%" />
                <q-btn size="7px" @click="deleteItemImg" style="position:absolute;right:-5px;top:-5px;" round
                  color="red" icon="iconfont icon-guanbi1" />
              </div>
            </div>
            <el-upload v-else class="avatar-uploader addDutyMain" action=""
              :before-upload="uploadFile" :show-file-list="false">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="row">
               <q-input filled stack-label   v-model="objOption.Path" ref="Path"
                class="col-12 q-pb-lg" :rules="[val => !!val || '请输入跳转路径']" label="跳转路径" />
          </div>
           <div class="row">
               <q-input filled stack-label  v-model.number="objOption.Sort" ref="Sort"
                class="col-12 q-pb-lg" :rules="[val => !!val || '请输入排序']" label="排序" />
          </div>
          <div class="row">
               <q-input filled stack-label  type="textarea" v-model.number="objOption.Remark" ref="SubjectName"
                class="col-12 q-pb-lg"  label="描述" />
          </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeDig" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important"  @click="save" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    UploadSelfFile,
  } from '../../api/common/common'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      type:{
        type:Number,
        default:0  
      }
    },
    data() {
      return {
        persistent: true,
        objOption: {
          Image:"",
          Path:"",
          Remark:"",
          Sort:0
        }
      }
    },
    mounted() {
        this.init()
    },
    methods: {
      closeDig() {
        this.persistent = false
        this.$emit('close')
      },
      //删除图片
      deleteItemImg() {
        this.objOption.Image = '';
      },
      uploadFile(files) {
        UploadSelfFile('b2bIndex', files, res => {
          if (res.Code == 1) {
            this.objOption.Image = res.FileUrl;
          }
        })
      },
      init(){
          this.objOption.Image=this.saveObj.Image
          this.objOption.Path=this.saveObj.Path
          this.objOption.Remark=this.saveObj.Remark
          this.objOption.Sort=this.saveObj.Sort
      },
      save(){
          if(!this.objOption.Image){
            this.$q.notify({
                type :'warning',
                position :'top',
                message :"请上传图片"
            })
            return
          }
          this.$refs.Path.validate()
          this.$refs.Sort.validate()
        if (!this.$refs.Path.hasError&&!this.$refs.Sort.hasError) {
            this.persistent = false
            this.$emit('save',this.objOption) 
        }
      }
    }
  }

</script>
<style >
.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: 70px;
    border: 1px dashed #d9d9d9;
    line-height: 120px;
  }
.ItemImgDiv {
    width: 118px;
    height: 118px;
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-block;
  }    
   ._delete_img {
    position: absolute;
    top: 0px;
    height: 82px;
    width: 143px;
    line-height: 34px;
    text-align: center;
    background-color: rgba(2, 2, 2, 0.6);
    display: inherit;
    opacity: 0;
    transition: all linear .5s
  }

  ._delete_img i .iconfont {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #E95252 !important;
    color: #fff;
    background-color: rgba(251, 251, 251, 0.9);
    margin-top: 26px;
  }
</style>