<template>
  <div class="inline-16">
    <el-button size="small" type="text" @click="onShow">编 辑</el-button>
    <el-dialog
        :visible.sync="drawer"
        width="450px"
    >
      <div>
        <el-row :gutter="50">
          <el-form  :model="form" :rules="rules"  ref="form"  size="mini" label-position="left" label-width="80px">
            <el-col :span="20">
              <el-form-item  prop="brandname" label="品牌名称">
                <el-input v-model="form.brandname"  placeholder="输入品牌名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item  label="品牌logo">
                <uploadFile ref="upload" v-if="data.attinfos.length === 0" style="margin-top:10px" :folderid="folderid" accept=".JPG,.PNG,.jpg,.png" btntype="image" :bindData="{ownertable:'sa_brand',ownerid:form.sa_brandid,usetype:'default'}" @onSuccess="uploadSuccess"></uploadFile>
                <previewImage v-else  :image="data.attinfos[0]" :deletebtn="true"
                  @onSuccess="clearCover"></previewImage>
                <small style="display:block;margin-top:20px" class="info">注：建议上传图片大小1024x1024，大小不超过2M，格式为JPG/PNG</small>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="dialog-footer">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit"   class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadFile from '../../../components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
export default {
name: "edit",
  props:['data'],
  data(){
    return {
      drawer:false,
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      rules:{
        brandname: [
          { required: true, message: '品牌名称不可为空', trigger: 'blur' },
        ],
      },
      form:{
        brandname:''
      },
    }
  },
  components:{
    uploadFile,
    previewImage
  },
  created() {
  },
  methods:{
    onShow(){
      this.drawer = true
      this.form = this.data
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20220922085003",
          "version": 1,
          "content": {
            "sa_brandid": this.form.sa_brandid,     //sa_brandid<=0时 为新增
            "brandname": this.form.brandname
          }
        })
        this.tool.showMessage(res, () => {
          this.ownerid = res.data
          this.drawer = false
          this.$emit('onSuccess')
        })
      })
    },
    uploadSuccess(res){
      this.form.attinfos = JSON.parse(res.attinfos).data
      this.$refs['upload'].dialogUploadVisible = false
    },
    clearCover () {
      this.form.attinfos = []
    }
  }
}
</script>

<style scoped>

</style>