<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false" width="400px" append-to-body>
    <el-form ref="dataForm" :rules="rules" :model="dataForm" size="small" label-position="right" label-width="80px">
      <!--<el-row :gutter="20">-->
      <!--<el-col :span="12">-->
      <el-form-item label="大类" prop="class">
        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.class" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
      </el-form-item>
      <!--</el-col>-->
      <!--<el-col :span="12">-->
      <el-form-item label="小类" prop="subClass">
        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
      </el-form-item>
      <!--</el-col>-->
      <!--<el-col :span="12">-->
      <el-form-item label="部件编码" prop="code">
        <el-input v-show="dialogStatus=='update'" v-model.trim="dataForm.subClass" :disabled="dialogStatus=='update'" type="text" placeholder=""/>
      </el-form-item>
      <!--</el-col>-->
      <!--<el-col :span="12">-->
      <el-form-item label="权属单位" prop="dept">
        <el-input v-model.trim="dataForm.dept" type="text" placeholder="必填"/>
      </el-form-item>
      <!--</el-col>-->
      <!--<el-col :span="12">-->
      <el-form-item label="详细地址" prop="address">
        <el-input v-model.trim="dataForm.address" type="textarea" placeholder="必填"/>
      </el-form-item>
      <!--</el-col>-->
      <!--</el-row>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'EditPartsDialog',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: 'update', // 对话框类型：create,update
      feature: null,
      textMap: {
        update: '编辑部件',
        create: '新增部件'
      }, // 标题
      dataForm: {
        class: '', // 大类
        subClass: '', // 小类
        code: '', // 部件编码
        dept: '', // 权属单位
        address: '', // 详细地址
        x: '',
        y: ''
      }, // 数据表单
      rules: {
        class: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        subClass: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        code: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        dept: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        address: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }]
      }
    }
  },
  methods: {
    // 初始化对话框
    initDialog(feature, dialogStatus = 'create') {
      debugger
      this.dialogFormVisible = true
      this.dialogStatus = dialogStatus
      // properties示例：大类代码: 1, 大类名称: "公共设施",小类代码: 3,小类名称: "雨水井盖",编码: 340103
      const properties = feature.properties
      this.feature = feature
      if (dialogStatus === 'update') {
        this.dataForm = {
          class: properties['大类名称'], // 大类
          subClass: properties['小类名称'], // 小类
          code: properties['编码'], // 部件编码
          dept: properties['权属单位'] ? properties['权属单位'] : '', // 权属单位
          address: properties['详细地址'] ? properties['详细地址'] : '' // 详细地址
        }
      } else if (dialogStatus === 'create') {
      }
    },
    // 保存
    save() {
      if (this.dialogStatus === 'update') {
        this.feature.properties['权属单位'] = this.dataForm.dept
        this.feature.properties['详细地址'] = this.dataForm.address
      }
      this.dialogFormVisible = false
      this.$emit('update', this.feature)
    },
    resetForm() {
      this.dataForm = {
        class: '', // 大类
        subClass: '', // 小类
        code: '', // 部件编码
        dept: '', // 权属单位
        address: '', // 详细地址
        x: '',
        y: ''
      }
    },
    cancel() {
      this.dialogFormVisible = false
      this.$emit('abort', this.dialogStatus)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>