import _Button from "@alifd/next/es/button";
import _Checkbox from "@alifd/next/es/checkbox";
import _Icon from "@alifd/next/es/icon";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import * as React from 'react';
import { saveUserTableHeader } from "../api";
import Sortable from 'sortablejs';
var CheckboxDialog = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(CheckboxDialog, _React$Component);
  function CheckboxDialog(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.save = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _this$props, tableId, pageInfo;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _this$props = _this.props, tableId = _this$props.tableId, pageInfo = _this$props.pageInfo;
            _context.prev = 1;
            _context.next = 4;
            return saveUserTableHeader({
              tableId: tableId,
              pageCode: pageInfo.code,
              jsonData: {
                userColumns: _this.state.dataList
              }
            });
          case 4:
            _this.props.onSave && _this.props.onSave(_this.state.dataList);
            _context.next = 10;
            break;
          case 7:
            _context.prev = 7;
            _context.t0 = _context["catch"](1);
            console.log(_context.t0);
          case 10:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[1, 7]]);
    }));
    _this.change = function (checked, item) {
      item.checked = checked;
      _this.setState({
        dataList: _this.state.dataList
      });
    };
    _this.sortableGroupDecorator = function (componentBackingInstance) {
      // console.log(componentBackingInstance)
      if (componentBackingInstance) {
        var options = {
          draggable: '.li',
          // animation: "150",
          onEnd: function onEnd(event) {
            var oldIndex = event.oldIndex,
              newIndex = event.newIndex;
            // console.log(event)
            var list = _this.state.dataList;
            var source = list[oldIndex];
            list.splice(oldIndex, 1);
            list.splice(newIndex, 0, source);
            _this.setState({
              dataList: list
            });
            // console.log(this.state.dataList)
            //   let children = evt.to.children;
          }
        };

        Sortable.create(componentBackingInstance, options);
      }
    };
    _this.state = {
      dataList: JSON.parse(JSON.stringify(_this.props.dataSource))
    };
    return _this;
  }
  var _proto = CheckboxDialog.prototype;
  _proto.render = function render() {
    var _this2 = this;
    var onClose = this.props.onClose;
    var dataList = this.state.dataList;
    return /*#__PURE__*/React.createElement("div", {
      className: "common-table-balloon"
    }, /*#__PURE__*/React.createElement("ul", {
      ref: this.sortableGroupDecorator
    }, dataList.map(function (item) {
      return /*#__PURE__*/React.createElement("li", {
        className: "li",
        key: item.fieldName
      }, /*#__PURE__*/React.createElement(_Icon, {
        size: "xxs",
        type: "list",
        className: "list-icon"
      }), /*#__PURE__*/React.createElement(_Checkbox, {
        onChange: function onChange(checked) {
          _this2.change(checked, item);
        },
        checked: item.checked
        //   defaultChecked={item.checked}
        ,
        label: item.displayName,
        value: item.fieldName
      }));
    })), /*#__PURE__*/React.createElement("div", {
      className: "balloon-btn"
    }, /*#__PURE__*/React.createElement(_Button, {
      size: "small",
      className: "btn",
      onClick: function onClick() {
        return onClose && onClose();
      }
    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(_Button, {
      size: "small",
      className: "btn",
      type: "primary",
      onClick: function onClick() {
        return _this2.save();
      }
    }, "\u4FDD\u5B58")));
  };
  return CheckboxDialog;
}(React.Component);
export default CheckboxDialog;