<template>
  <div>
    <el-form label-width="100px" class="form">
      <el-form-item label="库房名字">
        <el-select v-model="editModel.RoomId" placeholder="请选择库房" clearable>
          <el-option
            v-for="room in rooms"
            :key="room.Id"
            :label="room.Name"
            :value="room.Id"
          /> </el-select>
      </el-form-item>

      <el-form-item label="库区名称">
        <el-select v-model="editModel.AreaId" placeholder="请选择库区" clearable>
          <el-option
            v-for="area in areas"
            :key="area.Id"
            :label="area.Name"
            :value="area.Id"
          /> </el-select>
      </el-form-item>

      <el-form-item label="通道名称">
        <el-input v-model="editModel.Name" placeholder="请输入通道名称" class="name" />
      </el-form-item>

      <el-form-item label="排序">
        <el-input v-model="editModel.Sort" type="number" placeholder="请输入排序号" class="sort" />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch
          v-model="editModel.IsEnable"
          active-color="#1890ff"
          inactive-color="#ccc"
        />
      </el-form-item>
      <el-form-item label="说明">
        <el-input v-model="editModel.Description" type="textarea" placeholder="请输入备注说明" class="description" />
      </el-form-item>
    </el-form>
    <div class="text-center"><el-button type="success" @click="$emit('save',editModel)">保存</el-button></div>
  </div>
</template>
<script>
export default {
  props: {
    model: {
      type: Object
    },
    rooms: {
      type: Array,
      default: []
    },
    areas: {
      type: Array,
      default: []
    }
  },
  data: function() {
    return {
      editModel: {}
    }
  },
  watch: {
    model(newVal, oldVal) {
      this.editModel = JSON.parse(JSON.stringify(newVal))
    }
  },
  mounted() {
    this.editModel = JSON.parse(JSON.stringify(this.model))
  }
}
</script>
<style lang="scss" scoped>
    .form{
        .name,.sort{
            width:200px
        }
    }
</style>
