<template>
  <div>
    <j-editable-table
      ref="editableTable"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :rowNumber="true"
      :rowSelection="true"
      :actionButton="actionButton"
      :maxHeight="300"
      :disabledRows="{groupCode: 'id'}"
      :dragSort="true"
      dragSortKey="orderNum"
      @added="handleAdded"
      @deleted="handleDeleted"
    />
  </div>

</template>

<script>
import { FormTypes } from '@/utils/JEditableTableUtil'

export default {
  name: 'FiledGroupTable',
  components: {},
  props: {
    actionButton: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  data: function () {
    return {
      loading: false,
      /**
       * 数据源
       */
      dataSource: [
        {"groupName": "任务信息","groupCode": "task","orderNum": 1},
        {"groupName": "基本信息","groupCode": "basic","orderNum": 2},
        {"groupName": "规范性信息","groupCode": "common","orderNum": 3},
        {"groupName": "附件资料","groupCode": "other","orderNum": 4},
      ],
      columns: [
        {
          title: "分组代码",
          key: "groupCode",
          width: "330px",
          type: FormTypes.input,
          defaultValue: "",
          placeholder: "请输入${title}",
          validateRules: [
            {
              required: true,
              message: "${title}不能为空"
            }
          ]
        },
        {
          title: "分组名称",
          key: "groupName",
          width: "330px",
          type: FormTypes.input,
          defaultValue: "",
          placeholder: "请输入${title}",
          validateRules: [
            {
              required: true,
              message: "${title}不能为空"
            }
          ]
        },
        {
          title: "排序",
          key: "orderNum",
          isOrder: true,
          type: FormTypes.hidden,
          defaultValue: 0
        }

      ],
      person: {
        name:'aaa'
      },
      key :{
        name: 'name'
      }
    }
  },
  methods: {
    syncTable(target) {
      this.dataSource
    },
    handleAdded() {
      this.$emit("added", this)
    },
    handleDeleted() {
      this.$emit("deleted", this)
    },
    getGroupList() {
      let { values } = this.$refs.editableTable.getValuesSync({ validate: false })
      return values;
    },
  }
}
</script>

<style scoped>

</style>