"use strict";

var _interopRequireDefault = require("E:/OPU/\u524D\u7AEF\u5F00\u53D1\u9879\u76EE/opu-components-vue/node_modules/@babel/runtime/helpers/interopRequireDefault").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("core-js/modules/es.array.map.js");

require("core-js/modules/es.array.splice.js");

require("core-js/modules/es.string.fixed.js");

var _objectSpread2 = _interopRequireDefault(require("E:/OPU/\u524D\u7AEF\u5F00\u53D1\u9879\u76EE/opu-components-vue/node_modules/@babel/runtime/helpers/esm/objectSpread2"));

var _vue = _interopRequireDefault(require("vue"));

var _utils = _interopRequireDefault(require("../../utils"));

var _sortablejs = _interopRequireDefault(require("sortablejs"));

var _conf = _interopRequireDefault(require("../conf"));

var _default2 = {
  name: "SetColumns",
  components: {},
  props: {
    option: {
      type: Object,
      default: function _default() {}
    },
    columns: Array
  },
  data: function data() {
    return {
      visible: false,
      tableData: []
    };
  },
  computed: {
    query: function query() {
      var option = this.option;
      return option.proxyConfig && option.proxyConfig.ajax && option.proxyConfig.ajax.query ? option.proxyConfig.ajax.query : null;
    },
    propsConfig: function propsConfig() {
      var option = this.option; // let props = {};
      // if (option.tableConfig.props) {
      // }

      return option.proxyConfig && option.proxyConfig.props ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _conf.default.setColumns.proxyConfig.props), option.proxyConfig.props) : _conf.default.setColumns.proxyConfig.props;
    },
    submit: function submit() {
      var option = this.option;
      return option.proxyConfig && option.proxyConfig.ajax && option.proxyConfig.ajax.submit ? option.proxyConfig.ajax.submit : null;
    },
    modalOpt: function modalOpt() {
      var option = this.option;
      return option.modal && option.modal.props ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _conf.default.setColumns.modal.props), option.modal.props) : _conf.default.setColumns.modal.props;
    },
    onConfig: function onConfig() {
      var option = this.option;
      return option.proxyConfig && option.proxyConfig.on ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _conf.default.setColumns.proxyConfig.on), option.proxyConfig.on) : _conf.default.setColumns.proxyConfig.on;
    }
  },
  beforeDestroy: function beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy();
    }
  },
  methods: {
    show: function show() {
      this.visible = true;
      var query = this.query,
          columns = this.columns,
          handelColumns = this.handelColumns,
          option = this.option;

      if (query || option && option.proxyConfig && option.proxyConfig.params) {
        this.fetchColumns();
      } else {
        this.tableData = handelColumns(_utils.default.clone(columns));
        this.treeDrop();
      }
    },
    handelColumns: function handelColumns(data) {
      var propsConfig = this.propsConfig;
      return this.handleColumnsData(data, propsConfig);
    },
    //处理api获取的表头数据
    handleColumnsData: function handleColumnsData(data, configProps) {
      var _this = this;

      // let copyColumns = utils.clone(columns);
      var apiColumns = data.map(function (item) {
        // 替换字段
        var obj = (0, _objectSpread2.default)({}, item);

        for (var key in configProps) {
          if (key !== "list") {
            obj[key] = item[configProps[key]] || item[configProps[key]] == 0 || item[configProps[key]] === false ? item[configProps[key]] : "";
          }
        }

        if (obj.children && obj.children.length) {
          obj.children = _this.handleColumnsData(obj.children, configProps);
        }

        return obj;
      });
      return apiColumns;
    },
    fetchColumns: function fetchColumns() {
      var _this2 = this;

      var query = this.query,
          propsConfig = this.propsConfig,
          handelColumns = this.handelColumns,
          option = this.option; // const json = {
      //   ...getOpt.param
      // };

      var defaultAjax = _conf.default.setColumns && _conf.default.setColumns.proxyConfig && _conf.default.setColumns.proxyConfig.defaultAjax ? _conf.default.setColumns.proxyConfig.defaultAjax : {};
      var opt = option.proxyConfig ? option.proxyConfig : {};
      var params = null;
      var queryApi = null;

      if (opt && opt.params) {
        params = opt.params;

        if (defaultAjax && defaultAjax.query && !query) {
          queryApi = defaultAjax.query;
        }
      }

      if (query) {
        queryApi = query;
      }

      queryApi(params).then(function (res) {
        // const dataField = getOpt.dataField ? getOpt.dataField : "data";
        var data = _utils.default.getObjData(propsConfig.list, res);

        _this2.tableData = handelColumns(data);

        _this2.treeDrop();
      });
    },
    treeDrop: function treeDrop() {
      var _this3 = this;

      this.$nextTick(function () {
        var xTable = _this3.$refs.table;
        _this3.sortable = _sortablejs.default.create(xTable.$el.querySelector(".columns-table .body--wrapper>.vxe-table--body tbody"), {
          handle: ".drag-btn",
          onEnd: function onEnd(_ref) {
            var item = _ref.item,
                oldIndex = _ref.oldIndex;
            var options = {
              children: "children"
            };
            var targetTrElem = item;
            var wrapperElem = targetTrElem.parentNode;
            var prevTrElem = targetTrElem.previousElementSibling;
            var tableTreeData = _this3.tableData;
            var selfRow = xTable.getRowNode(targetTrElem).item;

            var selfNode = _utils.default.findTree(tableTreeData, function (row) {
              return row === selfRow;
            }, options);

            if (prevTrElem) {
              // 移动到节点
              var prevRow = xTable.getRowNode(prevTrElem).item;

              var prevNode = _utils.default.findTree(tableTreeData, function (row) {
                return row === prevRow;
              }, options);

              if (_utils.default.findTree(selfRow[options.children], function (row) {
                return prevRow === row;
              }, options)) {
                // 错误的移动
                var oldTrElem = wrapperElem.children[oldIndex];
                wrapperElem.insertBefore(targetTrElem, oldTrElem);
                return _this3.$XModal.message({
                  message: "不允许自己给自己拖动！",
                  status: "error"
                });
              }

              if (xTable.isTreeExpandByRow(prevRow)) {
                var _currRow = selfNode.items.splice(selfNode.index, 1)[0]; // 移动到当前的子节点

                prevRow[options.children].splice(0, 0, _currRow);
              } else {
                var prevNodeParentKey = prevNode.parent && prevNode.parent._XID ? prevNode.parent._XID : "";
                var selfNodeParentKey = selfNode.parent && selfNode.parent._XID ? selfNode.parent._XID : "";

                if (prevNodeParentKey === selfNodeParentKey) {
                  var _currRow2 = selfNode.items.splice(selfNode.index, 1)[0]; // 移动到相邻节点

                  prevNode.items.splice(prevNode.index + (selfNode.index < prevNode.index ? 0 : 1), 0, _currRow2);
                }
              }
            } else {
              // 移动到第一行
              var currRow = selfNode.items.splice(selfNode.index, 1)[0];
              tableTreeData.unshift(currRow);
            } // 如果变动了树层级，需要刷新数据


            xTable.syncData();
          }
        });
      });
    },
    renderShowEdit: function renderShowEdit(scope) {
      var vm = new _vue.default();
      var h = vm.$createElement;
      return h("a-checkbox", {
        props: {
          checked: scope.row.show
        },
        on: {
          input: function input(checked) {
            scope.row.show = checked;
          }
        }
      });
    },
    getData: function getData() {
      var table = this.$refs.table;
      return table.getTableData();
    },
    onCancel: function onCancel() {
      this.visible = false;
    },
    onSubmit: function onSubmit() {
      var _this4 = this;

      var submit = this.submit,
          onConfig = this.onConfig,
          option = this.option;
      var data = this.getData();
      var tableData = data.tableData;
      var opt = option.proxyConfig ? option.proxyConfig : {};
      var params = {};

      if (opt && opt.params) {
        params = opt.params;
      }

      var newTableData = tableData.map(function (item) {
        if (!(item.fixed === "left" || item.fixed === "right")) {
          delete item.fixed;
        }

        return item;
      });
      var defaultAjax = _conf.default.setColumns && _conf.default.setColumns.proxyConfig && _conf.default.setColumns.proxyConfig.defaultAjax ? _conf.default.setColumns.proxyConfig.defaultAjax : {};
      var submitApi = submit;

      if (defaultAjax && defaultAjax.submit && !submitApi) {
        submitApi = defaultAjax.submit;
      }

      var json = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
        data: newTableData
      });

      if (submitApi) {
        if (onConfig && onConfig.submitBefore) {
          var submitBeforeRes = onConfig.submitBefore(json);

          if (submitBeforeRes === false) {
            return false;
          } else if (submitBeforeRes) {
            json = submitBeforeRes;
          }
        }

        submitApi(json).then(function () {
          _this4.visible = false;

          _this4.$emit("submit");
        });
      } else {
        //转换数据到原来
        var propsConfig = {};

        for (var key in this.propsConfig) {
          propsConfig[this.propsConfig[key]] = key;
        }

        if (onConfig && onConfig.submitBefore) {
          var _submitBeforeRes = onConfig.submitBefore(json);

          if (_submitBeforeRes === false) {
            return;
          }
        }

        this.visible = false;
        this.$emit("submit", newTableData);
      }
    }
  },
  render: function render(h) {
    var tableData = this.tableData,
        renderShowEdit = this.renderShowEdit,
        modalOpt = this.modalOpt,
        visible = this.visible,
        onSubmit = this.onSubmit,
        onCancel = this.onCancel,
        option = this.option;
    var dropBtn = h("span", {
      "class": "drag-btn"
    }, [h("i", {
      "class": "vxe-icon--menu"
    })]);
    var tableColumn = [{
      width: 60,
      align: "center",
      slots: {
        default: "btn_default",
        header: function header() {
          return "排序";
        }
      }
    }, {
      field: "defaultTitle",
      title: "默认标题",
      align: "center",
      treeNode: true
    }, {
      field: "title",
      title: "显示标题",
      align: "center",
      editRender: {
        name: "AInput"
      }
    }, {
      field: "width",
      title: "列宽",
      align: "center",
      editRender: {
        name: "AInputNumber"
      }
    }, {
      field: "align",
      title: "对齐方式",
      align: "center",
      editRender: {
        name: "ASelect",
        options: [{
          label: "居左",
          value: "left"
        }, {
          label: "居中",
          value: "center"
        }, {
          label: "居右",
          value: "right"
        }]
      }
    }, {
      field: "show",
      title: "显示",
      align: "center",
      slots: {
        default: "show_default"
      }
    }, {
      field: "fixed",
      title: "固定",
      align: "center",
      editRender: {
        name: "ASelect",
        options: [{
          label: "不固定",
          value: ""
        }, {
          label: "靠左",
          value: "left"
        }, {
          label: "靠右",
          value: "right"
        }]
      }
    }];

    if (option.tableConfig.columns) {
      tableColumn = option.tableConfig.columns;
    }

    var modalProps = (0, _objectSpread2.default)({}, modalOpt);
    return h("a-modal", {
      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({
        title: modalProps.title ? modalProps.title : "设置表头",
        width: 800
      }, modalProps), {}, {
        visible: visible
      }),
      on: {
        cancel: onCancel,
        ok: onSubmit
      },
      class: "set-columns-modal"
    }, [h("vxe-grid", {
      class: "columns-table",
      ref: "table",
      props: {
        border: true,
        rowKey: true,
        columns: tableColumn,
        data: tableData,
        treeConfig: {
          children: "children"
        },
        editConfig: {
          trigger: "click",
          mode: "row"
        },
        checkboxConfig: {
          checkStrictly: true
        },
        height: "auto"
      },
      scopedSlots: {
        btn_default: function btn_default() {
          return dropBtn;
        },
        show_default: renderShowEdit
      }
    }, []) //   h(
    //     "SetColums",
    //     {
    //       ref:"setColumsTable",
    //       props:{
    //         option:setColumnsOpt
    //       }
    //     }
    //   )
    ]);
  }
};
exports.default = _default2;