<template>
  <div>
    <i style="font-weight:bold" class="el-icon-plus" @click="() => append()"></i>
    <el-dialog title="新建区域" append-to-body width="864px" :visible.sync="dialogDepVisible" @close="onClose">
      <el-row :gutter="20">
        <el-form :model="form" :rules="rules" ref="form" size="small" label-width="100px" label-position="left">
          <el-col  :span="12">
            <el-form-item class="item_width-full" label="区域名称" prop="areaname">
              <el-input class="item_width-full" v-model="form.areaname" placeholder="请输入区域名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">  
            <el-form-item class="item_width-full" label="区域描述" prop="remarks">
              <el-input class="item_width-full" v-model="form.remarks" placeholder="请输入区域描述" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用">
              <el-checkbox v-model="form.isused" :false-label="0" :true-label="1">是否启用</el-checkbox>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogDepVisible = 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>
export default {
  props:['data'],
  data () {
    return {
      dialogDepVisible:false,
      rules:{
        areaname: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
        ],
        remarks: [
          { required: true, message: '请输入部门描述', trigger: 'blur' },
        ]
      },
      form:{
        "sa_saleareaid":0,
        "areaname":"",
        "isused":1,
        "parentid":this.data.sa_saleareaid,
        "remarks":"",
        "sequence":1
      }
    }
  },
  methods:{
    append () {
      this.dialogDepVisible = true
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid)  return false;
        const res = await this.$api.requested({
           "classname": "webmanage.sale.salearea.salearea",
            "method": "insertormodify_area",
          "content": this.form
        })
        if (res.code === 1)
          this.dialogDepVisible = false
          this.$emit('onSuccess')
      });
    },
    onClose () {
      this.$refs['form'].resetFields();
    }
  }
}

</script>
<style>
</style>
<style scoped>
.item_width-full{
  width:100%
}

</style>