<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"
        >
          <el-input @change="changeName" :disabled="disabled||acDisable" v-model="row.name" />
        </el-form-item>
      </template>
      <template v-slot:value="{ row,index }">
        <el-form-item
          :prop="`[${index}].value`"
          :rules="formRules.value"
        >
          <el-input @change="changeValue" :disabled="disabled" v-model="row.value" />
        </el-form-item>
      </template>
      <template v-slot:desc="{ row,index }">
        <el-form-item
          :prop="`[${index}].desc`"
          :rules="formRules.desc"
        >
          <el-input :disabled="disabled" v-model="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: 30,
        message: '最多30个字符', 
        trigger: 'blur'
      }
    ],
    value:[
      {
        required: true, 
        message: '请输入值', 
        trigger: 'blur'
      },
      {
        min: 0,
        max: 50,
        message: '最多50个字符', 
        trigger: 'blur'
      }
    ],
    desc:[
      {
        max: 50,
        message: '最多50个字符', 
        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{
        addParam(0)
    }
}

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

var addParam = (index)=>{changeName
    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
  })
}

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>
