<template>
  <el-form ref="ruleFormRef" class="ruleForm" :model="tableRows" :size="formSize" :rules="formRules">
    <bg-table-pro :headers="headers" :data="tableRows" ref="input-table" :border="true" :stripe="false">
      <template v-slot:name="{ row, index }">
        <el-form-item :prop="`[${index}].name`" :rules="formRules.name" style="width: 100%">
          <el-input @change="changeName" :disabled="disabled || acDisable" v-model.trim="row.name" />
        </el-form-item>
      </template>
      <template v-slot:value="{ row, index }">
        <el-form-item :prop="`[${index}].value`" :rules="formRules.value" style="width: 100%">
          <el-input @change="changeValue" :disabled="disabled" v-model.trim="row.value" />
        </el-form-item>
      </template>
      <template v-slot:desc="{ row, index }">
        <el-form-item :prop="`[${index}].desc`" :rules="formRules.desc" style="width: 100%">
          <el-input @change="changeDesc" :disabled="disabled" v-model.trim="row.desc" />
        </el-form-item>
      </template>

      <template v-slot:action="{ row, index }">
        <bg-table-btn
          :disabled="disabled || acDisable"
          :click="
            () => {
              addParam(index);
            }
          "
          >增加</bg-table-btn
        >
        <bg-table-btn
          :disabled="disabled || acDisable"
          :click="
            () => {
              removeParam(row, index);
            }
          ">
          删除
        </bg-table-btn>
      </template>
    </bg-table-pro>
  </el-form>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, getCurrentInstance } from "vue";
import { v4 as uuidv4 } from "uuid";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  acDisable: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["change"]);
const formSize = ref("default");
const ruleFormRef = ref(null);

const formRules = reactive({
  name: [
    {
      required: true,
      message: "请输入键",
      trigger: "blur",
    },
    {
      max: 50,
      message: "最多50个字符",
      trigger: "blur",
    },
  ],
  value: [
    {
      required: true,
      message: "请输入值",
      trigger: "blur",
    },
    {
      min: 0,
      max: 500,
      message: "最多500个字符",
      trigger: "blur",
    },
  ],
  desc: [
    {
      max: 500,
      message: "最多500个字符",
      trigger: "blur",
    },
  ],
});

const headers = reactive([
  {
    label: "键",
    prop: "name",
  },
  {
    label: "值",
    prop: "value",
  },
  {
    label: "描述",
    prop: "desc",
  },
  {
    label: "操作",
    prop: "action",
    width: 120,
  },
]);

const state = reactive({
  tableRows: [],
});

onBeforeMount(() => {
  initTable();
});

var initTable = () => {
  if (props.data && props.data.length >= 1) {
    state.tableRows = props.data;
  } else {
    state.tableRows = [];
    addParam(0);
  }
};

var createRow = () => {
  return {
    id: uuidv4(),
    name: "",
    value: "",
    desc: "",
  };
};

var addParam = (index) => {
  state.tableRows.splice(index + 1, 0, createRow());
};

var removeParam = (row, index) => {
  state.tableRows.splice(index, 1);
  if (state.tableRows.length === 0) {
    addParam(0);
  }
};

const changeName = () => {
  emit("change", {
    type: "name",
    data: state.tableRows,
  });
};

const changeValue = () => {
  emit("change", {
    type: "value",
    data: state.tableRows,
  });
};

const changeDesc = () => {
  emit("change", {
    type: "desc",
    data: state.tableRows,
  });
};

var getInputData = () => {
  let lastData = [];
  let tempObj = {};
  state.tableRows.forEach((e) => {
    tempObj[e.name] = e;
  });
  for (const key in tempObj) {
    if (key && tempObj[key].value) {
      lastData.push(tempObj[key]);
    }
  }
  return lastData;
};

const { tableRows } = toRefs(state);

//暴露获取数据方法
defineExpose({
  getInputData,
  initTable,
});
</script>

<style scoped></style>
