<template>
  <div>
    <el-dialog custom-class="zdy-dialog-bbd" :destroy-on-close="true" v-model="dialogForm" :title="`比巡点${title}`" width="80%" @close="close">
      <FormMessage ref="FormRef" v-model="listQuery" :rules="rules" :formList="formList">
      </FormMessage>
      <div class="tc mt10">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { ref, defineProps, reactive, defineEmits } from 'vue';
const emit = defineEmits(["refresh"]);
const props = defineProps({
  dic: {
    type: Object,
    default: () => ({})
  }
});
const dialogForm = ref(false);
const title = ref('');
const FormRef = ref();
const listQuery = ref({});
const rules = reactive({
  bxdMc: [{ required: true, message: "请输入必巡点名称", trigger: "blur" }],
  bxdLx: [{ required: true, message: "请输入必巡点类型", trigger: "blur" }],
});
const formList = reactive([
  { label: "必巡点名称", prop: "bxdMc", type: "input" },
  { label: "必巡点类型", prop: "bxdLx", type: "select", options: props.dic.D_BZ_BXDLX },
  { label: "经度", prop: "jd",type: "input" },
  { label: "纬度", prop: "wd", type: "input"},
])

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : "编辑";
  listQuery.value = row ? { ...row } : {};
  console.log(listQuery.value,'===listQuery.value');
  
};

const save = () => {
  FormRef.value.submit(() => {
    let data = JSON.parse(JSON.stringify(listQuery.value));
    data.id = data.id || new Date().getTime();
    let obj = {
      data: data,
      type: title.value == "新增" ? "add" : "edit"
    }
    emit("changeDxd", obj);
    close();
  });
}

const close = () => {
  dialogForm.value = false;
  FormRef.value.reset()
};;

defineExpose({ init })

</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";

.mapBox {
  width: 100%;
  height: 400px;
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}

::v-deep .el-dialog {
  --el-dialog-bg-color: #fff;
}

::v-deep .el-dialog__title {
  color: #333;
  font-size: 16px;
}
</style>
<style lang="scss" scoped>
::v-deep .zdy-dialog-bbd {
  width: 30%!important;
  --el-dialog-bg-color: #fff !important;
  background: #fff !important;

  ::v-deep .el-dialog__header {
    background-color: #f7fafb;
    border-bottom: 1px solid #e3e7ed;
  }

  .el-dialog__title {
    color: #333;
    font-size: 16px;
  }
}
</style>