<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-item label="定义变量">
        <el-table :data="vars" style="width: 100%" max-height="250">
          <el-table-column fixed prop="key" label="变量名" width="200">
            <template #default="scope">
              <el-select v-if="scope.$index === clickRow" v-model="scope.row.key" filterable allow-create @change="changeVar(scope.$index, scope.row.key)">
                <el-option v-for="(item, index) in allVars" :key="index" :label="item.key" :value="item.key"></el-option>
              </el-select>
              <!-- <el-input type="text" v-model="scope.row.key" v-if="scope.$index === clickRow" clearable size="small"></el-input> -->
              <!-- <el-input type="text" :formatter="(value) => `$ ${value}`.replace(/[^A-Za-z]/g, '')" v-model="scope.row.key" v-if="scope.$index === clickRow" clearable size="small"></el-input> -->
              <span v-else>{{ scope.row.key }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="options" label="初始值" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.value" v-if="scope.$index === clickRow" clearable size="small"></el-input>
              <span v-else>{{ scope.row.value }}</span>
            </template>

          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="50">
            <template #default="scope">
              <el-button link type="danger" size="small" @click.prevent="deleteRow(index, scope.$index)">
                删除
              </el-button>

              <el-button v-if="scope.$index === clickRow" link type="primary" size="small"
                @click.prevent="saveFilter(index, scope.$index)">
                保存
              </el-button>
              <el-button v-if="scope.$index !== clickRow" link type="error" size="small"
                @click.prevent="clickRow = scope.$index">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-button class="mt-4" style="width: 100%" @click="onAddItem(index)">
          新增变量
        </el-button>
      </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 { getNodeCanUseVars } from '../../LFComponents/utils';

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

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

const caseList = ref([{
  label: '心胀病',
  value: 'xzb',
}, {
  label: '儿童哮喘',
  value: 'etxc',
}, {
  label: '新生儿黄疸',
  value: 'xsehd',
}]);

let propertyForm = reactive({
  name: '',
  desc: '',
  attr: null,
  nodeVars: [],
});

let vars = ref([]);

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.value.forEach((o) => {
    params[o.key] = o.value;
  })
  props.lf.setProperties(props.nodeData.id, {
    name: propertyForm.name,
    desc: propertyForm.desc,
    attr: params,
    nodeVars: vars.value,
    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');
};

const saveFilter = (tagIndex, tableIndex) => {
  
  clickRow.value = -1;
}

const deleteRow = (tagIndex, tableIndex) => {
  vars.value = vars.value.filter((item, index) => index !== tableIndex);
}

const onAddItem = (index) => {
  
  vars.value.push({
    key: '',
    value: ''
  })

  clickRow.value = vars.value.length - 1;
}

const changeVar = (index, key) => {
  const item = allVars.value.find((o) => { return o.key === key });
  if (item) vars.value[index].value = item.value;
}

const allVars = ref([]);

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 : {};

  const nodeVars = getNodeCanUseVars(props.lf, props.nodeData.id);
  if (nodeVars?.length) allVars.value = nodeVars;

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