<template>
  <cms-edit-table
    ref="editTable"
    height="auto"
    :columns="columnConfigs"
    :tools-bar="toolbars"
    :pagination="false"
  ></cms-edit-table>
</template>

<script>
import { mixTableConfig, mixTableConstants } from "@/comps/mixin/common-mixins";

export default {
  name: "EditTableSimple",
  mixins: [ mixTableConfig, mixTableConstants ],
  methods: {
    insertRow() {
      this.$refs.editTable.insertAt({});
    },
  },

  computed: {
    columnConfigs() {
      const _this = this;
      return [
        {
          ...mixTableConfig.checkbox,
        },
        {
          ...mixTableConfig.default,
          fixed: "left",
          title: '字段1',
          field: "menuName",
          width: 200,
          editRender: {},
          slots: {
            default: ({ column, row }) => {
              return row[column.property];
            },
            edit: ({ column, row }) => {
              const props = {
                placeholder: '请输入字段1',
              };
              return [ <cms-form-input props={ props } v-model={ row[column.property] }/> ];
            },
          },
        },
        {
          ...mixTableConfig.default,
          title: '字段2',
          field: "parentId",
          width: 300,
          editRender: {},
          slots: {
            default: ({ column, row }) => {
              const props = {
                groupName: 'moduleSort',
                placeholder: '字段2',
                formModel: row,
                disabled: true,
                clearable: true,
                requesrCall: _this.$http.menus.selectModuleList,
                filterable: false,
                defaultProps: {
                  value: 'id', // ID字段名
                  label: 'moduleName', // 显示名称
                  children: 'children' // 子级字段名
                }
              };
              return [ <cms-form-select-tree v-model={ row[column.property] } props={ props }/> ];
            },
            edit: ({ column, row }) => {
              const props = {
                groupName: 'sortNum',
                placeholder: '字段2',
                formModel: row,
                clearable: true,
                size: 'small',
                requestCall: 'http://www.baidu.com',
                filterable: true,
                defaultProps: {
                  value: 'id', // ID字段名
                  label: 'menuName', // 显示名称
                  children: 'children' // 子级字段名
                }
              };
              return [ <cms-form-select-tree v-model={ row[column.property] } props={ props } /> ];
            },
          },
        },
        {
          ...mixTableConfig.operate,
          title: this.$t("common.column.operate"),
          width: 140,
          editRender: {
            name: "operateEdit",
            buttons: [
              {
                title: this.$t("common.button.edit"),
                tag: 'edit',
                props: {
                  icon: "el-icon-edit",
                  type: "primary",
                  vPermissionButton: [ "100100300100" ],
                },
                click: (row) => {
                  this.$refs.editTable.setActiveRow(row);
                },
              },
              {
                title: this.$t("common.button.delete"),
                props: {
                  icon: "el-icon-delete",
                  type: "danger",
                  vPermissionButton: [ "100100300100" ],
                },
                click: (row) => {
                  this.$MessageTips.info(JSON.stringify(row));
                },
              },
            ],
            buttonEdits: [
              {
                title: this.$t("common.button.save"),
                tag: 'save',
                props: {
                  icon: "el-icon-edit",
                  type: "primary",
                },
                click: (row) => {
                  if (this.$refs['editTable']) {
                    const errMap = this.$refs['editTable'].newInstance().fullValidate().catch((errMap) => errMap);
                    if (errMap) {

                    }
                  }
                }
              },
              {
                title: this.$t("common.button.cancel"),
                props: {
                  icon: "el-icon-delete",
                  type: "info",
                },
                click: (row) => {
                  if (this.$refs['editTable']) {
                    const errMap = this.$refs['editTable'].newInstance().fullValidate().catch((errMap) => errMap);
                    if (errMap) {

                    }
                  }
                }
              },
            ]
          },
        },
      ]
    },
    toolbars() {
      return [
        {
          status: "primary",
          icon: "el-icon-circle-plus-outline",
          title: this.$t("common.button.new"),
          access: "100100300100",
          onClick: () => {
            const table = this.$refs['editTable'].getTable();
            let record = {}; //可以设置初始值, 如果不设置那就使用cell-config中defaultValue 属性
            this.$refs['editTable'].insertAt({ record }).then((res) => {
              let { row } = res;
              console.log(row, record, '==========================');
              table.setActiveRow(row);
            });
          },
        },
      ]
    }
  }
}
</script>

<style scoped>

</style>