<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>