<template>
  <div>
    <el-form ref="propertyFormRef" :model="propertyForm" :inline-message="true" :rules="rules" label-position="top"
      :disabled="flowDetail.status == '2'">
      <el-form-item label="节点名称" prop="name">
        <el-input v-model="propertyForm.name" clearable> </el-input>
      </el-form-item>
      <el-form-item label="节点描述" prop="desc">
        <el-input v-model="propertyForm.desc" type="textarea" :rows="2"> </el-input>
      </el-form-item>

    </el-form>
    <div class="mt15" v-if="flowDetail.status != '2'">
      <el-button @click="cancelFunc"> 取消 </el-button>
      <el-button type="primary" @click="confirmFunc"> 确定 </el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getPageListData } from '@/api/main/system/system';

const props = defineProps({
  nodeData: Object,
  lf: Object || String,
  //详情
  flowDetail: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const clickRow = ref(-1);
const emit = defineEmits();

let propertyForm = reactive({
  name: '',
  desc: '',
  attr: {},
});


let rules = reactive({
  name: [
    { required: true, message: '名称不能为空' },
    {
      max: 50,
      message: '最大50字符',
    },
  ],
  desc: [
    {
      max: 50,
      message: '最大50字符',
    },
  ],
  // attr: [
  //   { required: true, message: '请选择查询类型' },
  // ],
});
let propertyFormRef = ref(null);

//更新节点属性
const setProperties = () => {
  const params = {};
  vars.forEach((o) => {
    params[o.key] = o.value;
  })
  props.lf.setProperties(props.nodeData.id, {
    ...propertyForm,
    frontend_status: '1', //0配置错误，1配置正常
  });
};

//确定
const confirmFunc = () => {
  propertyFormRef.value.validate((valid) => {
    if (valid) {
      setProperties();
      // props.lf.updateText(props.nodeData.id, propertyForm.name);
      emit('closed');
    }
  });
};

//取消
const cancelFunc = () => {
  emit('closed');
};


onMounted(() => {
  propertyForm.name = props.nodeData.properties.name;
  propertyForm.desc = props.nodeData.properties.desc ? props.nodeData.properties.desc : '';
  propertyForm.attr = props.nodeData.properties.attr ? props.nodeData.properties.attr : {};

  // vars = [];
  // for (let key in propertyForm.attr) {
  //   vars.push({
  //     key: key,
  //     value: propertyForm.attr[key]
  //   })
  // }
});
</script>
<style scoped></style>