<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :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-select v-show="dialogStatus=='create'" v-model="dataForm.class" placeholder="请选择" @change="bigClassChange">
          <el-option
            v-for="item in classList"
            :key="item.code"
            :label="item.name"
            :value="item.name"/>
        </el-select>
      </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-select v-show="dialogStatus=='create'" :disabled="subClassList.length==0" v-model="dataForm.subClass" placeholder="请选择" @change="subClassChange">
          <el-option
            v-for="item in subClassList"
            :key="'sub'+item.code"
            :label="item.name"
            :value="item.name"/>
        </el-select>
      </el-form-item>
      <!--</el-col>-->
      <!--<el-col :span="12">-->
      <el-form-item label="部件编码" prop="code">
        <el-input v-model.trim="dataForm.code" :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: 'create', // 对话框类型：create,update
      feature: null, // 传入的feature
      textMap: {
        update: '编辑部件',
        create: '新增部件'
      }, // 标题
      dataForm: {
        class: '', // 大类
        classCode: '', // 大类编码
        subClass: '', // 小类
        subClassCode: '', // 小类编码
        code: '', // 部件编码
        dept: '', // 权属单位
        address: '', // 详细地址
        latlng: null,
        x: '', // x坐标
        y: '', // y坐标
        layer: 0 // 对应图层层级
      }, // 数据表单
      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'] }]
      },
      totalClassList: [], // 大类小类综合列表
      classList: [], // 大类列表
      subClassList: [] // 小类列表
    }
  },
  mounted() {
    this.fetchClass()
  },
  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['详细地址'] : '' // 详细地址
        }
        debugger
      } else if (dialogStatus === 'create') {
        // 获取点的坐标
        this.dataForm.latlng = feature.getLatLng()
        this.dataForm.x = feature.getLatLng().lat
        this.dataForm.y = feature.getLatLng().lng
      }
    },
    // 保存
    save() {
      if (this.dialogStatus === 'update') {
        this.update()
      } else if (this.dialogStatus === 'create') {
        this.add()
      }
    },
    // 编辑完成
    update() {
      // this.feature.properties['权属单位'] = this.dataForm.dept
      // this.feature.properties['详细地址'] = this.dataForm.address
      this.dialogFormVisible = false
      this.$emit('update', this.feature)
    },
    // 新增
    add() {
      console.log(this.dataForm)
      this.$emit('add', this.dataForm)
    },
    bigClassChange(val) {
      // 更新大类code
      const currentClass = this.classList.filter(item => item.name === val)[0]
      this.dataForm.classCode = currentClass.code
      this.dataForm.subClass = ''
      this.dataForm.subClassCode = ''
      this.fetchSubClass() // 获取子类列表
    },
    subClassChange(val) {
      // 更新小类code
      const currentClass = this.subClassList.filter(item => item.name === val)[0]
      this.dataForm.subClassCode = currentClass.code
      this.dataForm.layer = currentClass.layer
    },
    // 获取大类
    fetchClass() {
      this.totalClassList = this.baseConfig.partsLayer
      // 大类列表
      this.classList = this.totalClassList.map(item => {
        return {
          name: item.name,
          code: item.code
        }
      })
    },
    // 获取小类
    fetchSubClass() {
      for (const item of this.totalClassList) {
        if (item.code === this.dataForm.classCode) {
          this.subClassList = item.children
        }
      }
    },
    resetForm() {
      this.dataForm = {
        class: '', // 大类
        classCode: '', // 大类编码
        subClass: '', // 小类
        subClassCode: '', // 小类编码
        code: '', // 部件编码
        dept: '', // 权属单位
        address: '', // 详细地址
        latlng: null, // 经纬度
        x: '', // x坐标
        y: '', // y坐标
        layer: 0 // 对应图层层级
      }
    },
    cancel() {
      this.$confirm('确定放弃编辑该部件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定
        this.dialogFormVisible = false
        this.$emit('abort', this.dialogStatus)
      })
    },
    closeDialog(){
      this.dialogFormVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-select{
  width: 100%;
}
</style>