<template>
  <div>
    <el-button size="small" type="primary" @click="onShow" >新 建</el-button>
    <el-drawer
      title="新增品牌"
      :visible.sync="drawer"
      size="800px"
      direction="rtl"
      :show-close="false"
      append-to-body
      @close="drawer = false;form.brandName = ''">
      <div class="drawer__panel">
      <div>
        <el-row :gutter="50">
          <el-form :model="form" :rules="rules"  ref="form"  size="mini" label-position="right" 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-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false;form.brandName = ''" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit"  class="normal-btn-width">确 定</el-button>
      </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "add",
  data(){
    return {
      drawer:false,
      url:null,
      rules:{
        brandName: [
          { required: true, message: '品牌名称不可为空', trigger: 'blur' },
        ],
      },
      form:{
        brandName:''
      },
    }
  },
  components:{
  },
  methods:{
    onShow (){
      this.drawer = true
    },
    onClose () {
      this.form = {
         brandName:''
      }
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20220922085003",
          "version": 1,
          "content": {
            "sa_brandid": 0,     //sa_brandid<=0时 为新增
            "brandname": this.form.brandName
          }
        })
        this.tool.showMessage(res, () => {
          this.ownerid = res.data
          this.drawer = false
          this.form.brandName = ''
          this.$emit('onSuccess')
        })
      })
    }
  }
}
</script>

<style scoped>

</style>