<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:order="{ row,index }">
          {{index+1}}
        </template>
        <template v-slot:err_code="{ row,index }">
          <el-form-item
            :prop="`[${index}].err_code`"
            :rules="formRules.err_code"
          >
            <el-input @change="changeName" :disabled="disabled||acDisable" v-model="row.err_code" />
          </el-form-item>
        </template>
        <template v-slot:err_msg="{ row,index }">
          <el-form-item
            :prop="`[${index}].err_msg`"
            :rules="formRules.err_msg"
          >
            <el-input :disabled="disabled" v-model="row.err_msg" />
          </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({
    err_code:[
        {
          required: true, 
          message: '请输入键', 
          trigger: 'blur'
        },
        {
          max: 30,
          message: '最多30个字符', 
          trigger: 'blur'
        }
      ],
    err_msg:[
        {
          max: 50,
          message: '最多50个字符', 
          trigger: 'blur'
        }
      ]
  });
  
  const headers = reactive([
    {
      label: "序号",
      prop: "order",
    },
    {
      label: "错误码",
      prop: "err_code",
    },
    {
      label: "错误信息描述",
      prop: "err_msg",
    },
    {
      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(),
          err_code:'',
          err_msg:''
      }
  }
  
  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
    })
  }
  
  
  var getInputData = ()=>{
      let lastData = []
      let tempObj = {}
      state.tableRows.forEach(e => {
        tempObj[e.err_code] = e
      });
      for (const key in tempObj) {
        if(key&&tempObj[key].err_code){
          lastData.push(tempObj[key])
        }
      }
      return lastData
  }
  
  const {tableRows} = toRefs(state)
  
  //暴露获取数据方法
  defineExpose({
      getInputData,
      initTable
  })
  </script>
  
  <style scoped></style>
  