import _Dialog from "@alifd/next/es/dialog";
import _Icon from "@alifd/next/es/icon";
import _Button from "@alifd/next/es/button";
import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useState } from "react";
import BoxSlotComponent from "../../_components/boxSlotComponent";
import RenderByFormKey from "../../_components/renderByFormKey";
import { DataSourceType, getAlterRelationList } from "../../../_utils/formKeyType";
import { ConditionType, SelectRelateType } from "../../../_utils/conditionRenderService/type";
import ConditionRender from "../../_components/conditionRender";
import { AlterStateService } from "../config/alterStateService";
import "../index.less";
import CopyTitle from "../../_components/copyTitle";
import { t } from "../../../../src/locale";
import { EncryptionType } from "../../../../src/utils/type";
import { isArray } from "lodash";
import { getEncryptionOptionsList } from "../config";
var alterStateService = new AlterStateService();
export var AlterStateComponent = function AlterStateComponent(props) {
  var value = props.value,
    onChange = props.onChange;
  var _useState = useState(EncryptionType["default"]),
    encryptionType = _useState[0],
    setEncryptionType = _useState[1];
  var _useState2 = useState([]),
    logicalData = _useState2[0],
    setLogicalData = _useState2[1];
  var _useState3 = useState(false),
    alterDialog = _useState3[0],
    setAlterDialog = _useState3[1];

  // 兼容之前是数据结构
  useEffect(function () {
    var res = initAlterStateData(value);
    setEncryptionType(res.type);
    if (res.logicalData) {
      setLogicalData(res.logicalData);
    }
  }, []);
  useEffect(function () {
    var obj = {
      type: encryptionType,
      logicalData: logicalData
    };
    onChange(obj);
  }, [encryptionType, logicalData]);
  var _useState4 = useState({
      visible: false,
      title: t("setter.alterValueConfig"),
      id: "",
      config: {
        data: [],
        resultData: {
          isHandle: false,
          resultRowList: []
        }
      }
    }),
    dialogInfo = _useState4[0],
    setDialogInfo = _useState4[1];
  function initAlterStateData(value) {
    var result = {
      type: EncryptionType["default"],
      logicalData: []
    };
    if (isArray(value)) {
      result.logicalData = value;
    } else if (value.type) {
      result = value;
    }
    return result;
  }
  function addSelectOne() {
    var newData = alterStateService.addRowData(logicalData);
    setLogicalData(newData);
  }
  function copyRowData(index) {
    var newData = alterStateService.copyRowData(logicalData, index);
    setLogicalData(newData);
  }
  function removeRowData(id) {
    var newData = alterStateService.removeRowData(logicalData, id);
    setLogicalData(newData);
  }
  function showConditionPage(type, id, data) {
    if (type === "setData") {
      setDialogInfo({
        visible: true,
        title: t("setter.alterValueConfig"),
        id: id,
        config: data
      });
    } else {
      var newData = alterStateService.resetRowData(logicalData, id);
      setLogicalData([].concat(newData));
    }
  }
  function closeDialog() {
    var newDialog = Object.assign({}, dialogInfo);
    newDialog.visible = false;
    setDialogInfo(newDialog);
  }
  function onDetailOk() {
    var newDialog = Object.assign({}, dialogInfo);
    newDialog.visible = false;
    var newData = alterStateService.alterRowData({
      oldData: logicalData,
      id: newDialog.id,
      logic: newDialog.config
    });
    setLogicalData(newData);
    setDialogInfo(newDialog);
  }
  function onConditionRenderChange(obj) {
    var key = obj.key,
      value = obj.value;
    var newDialog = Object.assign({}, dialogInfo);
    newDialog.config[key] = value;
    setDialogInfo(newDialog);
  }
  function testChange(list, alterItem) {
    var newItem = {};
    list.forEach(function (item) {
      var key = item.key,
        value = item.value;
      newItem[key] = value;
    });
    alterItem.alterValue = _extends({}, alterItem.alterValue, newItem);
    var newData = alterStateService.alterRowData({
      oldData: logicalData,
      id: alterItem.id,
      value: alterItem.alterValue
    });
    setLogicalData(newData);
  }

  /**
   * 导出关系配置信息
   */
  function exportComputed() {
    return alterStateService.getCopyAlterStateList(logicalData);
  }

  /**
   * 导入关系配置信息
   */
  function importComputed(data) {
    setLogicalData(data);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "alterStateMainBox"
  }, /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: t("setter.encryptionType")
  }, /*#__PURE__*/React.createElement(_Select, {
    placeholder: t("setter.selectPlaceHolder"),
    notFoundContent: t('setter.notFoundContent'),
    showSearch: true,
    value: encryptionType,
    dataSource: getEncryptionOptionsList(),
    onChange: function onChange(e) {
      setEncryptionType(e);
    }
  })), /*#__PURE__*/React.createElement(BoxSlotComponent, {
    title: ""
  }, /*#__PURE__*/React.createElement(_Button, {
    onClick: function onClick() {
      setAlterDialog(true);
    }
  }, t("setter.alterDisposition"))), /*#__PURE__*/React.createElement(_Dialog, {
    className: "logicDetailBox",
    title: /*#__PURE__*/React.createElement(CopyTitle, {
      title: t("setter.alterContent"),
      getExportStrData: exportComputed,
      getImportStrData: importComputed
    }),
    footerAlign: "right",
    height: 600,
    visible: alterDialog,
    onClose: function onClose() {
      setAlterDialog(false);
    },
    footer: false
  }, /*#__PURE__*/React.createElement("div", {
    className: "alterStateBox"
  }, logicalData.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.id,
      className: "alterRow"
    }, /*#__PURE__*/React.createElement("div", {
      className: "alterRowLeft"
    }, index === 0 && /*#__PURE__*/React.createElement("div", {
      style: {
        color: "#fff"
      }
    }, t("setter.alterData")), /*#__PURE__*/React.createElement(RenderByFormKey, {
      relationOption: getAlterRelationList(),
      value: {
        id: item.id,
        formKey: item.alterValue.formKey || DataSourceType.defaultType,
        data: item.alterValue.data,
        treeData: item.alterValue.treeData || []
      },
      onChange: function onChange(data) {
        testChange(data, item);
      }
    })), /*#__PURE__*/React.createElement("div", null, index === 0 && /*#__PURE__*/React.createElement("div", {
      style: {
        color: "#fff"
      }
    }, t("setter.setAlterLogic")), /*#__PURE__*/React.createElement("div", {
      className: "alterBtn"
    }, /*#__PURE__*/React.createElement(_Button, {
      style: {
        marginRight: 10
      },
      type: "primary",
      onClick: function onClick() {
        showConditionPage("setData", item.id, item.alterLogic);
      }
    }, t("setter.setKey")), /*#__PURE__*/React.createElement(_Button, {
      style: {
        marginRight: 10
      },
      onClick: function onClick() {
        showConditionPage("resetData", item.id, item.alterLogic);
      }
    }, t("setter.displayReset")), /*#__PURE__*/React.createElement(_Button, {
      type: "primary",
      style: {
        marginRight: 10
      },
      onClick: function onClick() {
        copyRowData(index);
      }
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "copy"
    })), /*#__PURE__*/React.createElement(_Button, {
      type: "primary",
      warning: true,
      onClick: function onClick() {
        removeRowData(item.id);
      }
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "ashbin"
    })))));
  }), /*#__PURE__*/React.createElement("div", {
    className: "sub_btn"
  }, /*#__PURE__*/React.createElement(_Button, {
    text: true,
    type: "primary",
    onClick: addSelectOne
  }, /*#__PURE__*/React.createElement("span", null, t("setter.addData")))))), /*#__PURE__*/React.createElement(_Dialog, {
    className: "logicDetailBox",
    title: dialogInfo.title,
    footerAlign: "right",
    height: 600,
    visible: dialogInfo.visible,
    onClose: closeDialog,
    footer: [/*#__PURE__*/React.createElement(_Button, {
      onClick: onDetailOk,
      type: "primary"
    }, t('setter.ok')), /*#__PURE__*/React.createElement(_Button, {
      style: {
        marginLeft: '10px'
      },
      onClick: closeDialog
    }, t('setter.cancel'))]
  }, /*#__PURE__*/React.createElement(ConditionRender, {
    type: ConditionType.computed,
    selectRelate: SelectRelateType.computed,
    selectRowRelate: SelectRelateType.all,
    data: dialogInfo.config.data,
    isDictionary: true,
    onChange: onConditionRenderChange
  })));
};