import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { Component } from 'react';
// import {Button, Dialog, Icon, Progress, Message} from '@alifd/next';
import { Button, Dialog, Message, MessageBox } from 'element-react';
import style from "./index.module.scss";
import { $_GET } from "../../utils/utils";
import FormLeft from "./XtFormLeft";
import FormRight from "./XtFormRight";
import SaveTpl from "./XtFormRight/SaveTpl";
import { categoryList, templateList, templateQuery } from "../../api/base";
var XtFormSetter = /*#__PURE__*/function (_Component) {
  _inheritsLoose(XtFormSetter, _Component);
  function XtFormSetter() {
    var _$_GET$ctg_id, _$_GET$tpl_id;
    var _this;
    _this = _Component.call(this) || this;
    _this.state = {
      formVisible: false,
      saveTplVisible: false,
      form: {
        // active: false,
        // ctg_id: 0,// 分类 id
        // tpl_id: 0, // 模板 id
        // ctg_title: '', // 分类标题
        // title: '', // 模板标题
        // sub_title: '', // 模板副标题
        // is_bigshrimp: 0, // 大虾推荐
        // is_hot: 0, // 推荐
        // is_show: 1, // 显示
        // sort_by: 10, // 排序
        // tag: '',
        // list: []
      },
      // formData: [
      //     // {
      //     //     type: 'input',
      //     //     label: '姓名:',
      //     //     pattern: '',
      //     //     required: true
      //     // },
      //     // {
      //     //     type: 'radio',
      //     //     label: '性别:',
      //     //     options: [
      //     //         {
      //     //             value: '男',
      //     //             image: ''
      //     //         },
      //     //         {
      //     //             value: '女',
      //     //             image: ''
      //     //         },
      //     //         {
      //     //             value: '',
      //     //             other: true
      //     //         }
      //     //     ],
      //     //     required: false
      //     // },
      //     // {
      //     //     type: 'checkbox',
      //     //     label: '爱好:',
      //     //     options: [
      //     //         {
      //     //             value: '学习',
      //     //             image: ''
      //     //         },
      //     //         {
      //     //             value: '工作',
      //     //             image: ''
      //     //         },
      //     //         {
      //     //             value: '打游戏',
      //     //             image: ''
      //     //         },
      //     //         {
      //     //             value: '看书',
      //     //             image: ''
      //     //         },
      //     //         {
      //     //             value: '',
      //     //             other: true
      //     //         }
      //     //     ],
      //     //     required: false
      //     // },
      // ],/* .map(res => {
      //     res.key = Date.now().toString(32) + Math.random().toString(32).slice(1)
      //     res.options?.map(opt => {
      //         opt.key = Date.now().toString(32) + Math.random().toString(32).slice(1)
      //         return opt
      //     })
      //     return res
      // }), */
      menu: {
        tpl: {
          tabList: [
            // {
            //     ctg_id: 16,
            //     is_show: 1,
            //     parent_id: 6,
            //     sort_by: 0,
            //     title: "活动抽奖",
            //     tplList: [
            //         {
            //             ctg_id: 3, // 分类 id
            //             tpl_id: 1, // 模板 id
            //             title: "客户满意度调查", // 模板标题
            //             sub_title: '风雨兼程 砥砺前行', // 副标题
            //             schema: "[]", // 模板内容
            //             is_hot: 1, // 是否推荐
            //             is_bigshrimp: 1, // 是否大虾推荐
            //             is_show: 1, // 是否显示
            //             tag: '',
            //             sort_by: 1 // 排序
            //         }
            //     ],
            // },
          ],
          ctg_id: (_$_GET$ctg_id = $_GET === null || $_GET === void 0 ? void 0 : $_GET.ctg_id) !== null && _$_GET$ctg_id !== void 0 ? _$_GET$ctg_id : '',
          tpl_id: (_$_GET$tpl_id = $_GET === null || $_GET === void 0 ? void 0 : $_GET.tpl_id) !== null && _$_GET$tpl_id !== void 0 ? _$_GET$tpl_id : ''
        }
        // components: [
        //     {
        //         type: 'radio',
        //         icon: 'xt-biaodan-danxuan',
        //         label: '单选'
        //     },
        //     {
        //         type: 'checkbox',
        //         icon: 'xt-biaodan-duoxuan',
        //         label: '多选'
        //     },
        //     {
        //         type: 'input',
        //         icon: 'xt-biaodan-danhang',
        //         label: '单行'
        //     },
        //     {
        //         type: 'textarea',
        //         icon: 'xt-biaodan-duohang',
        //         label: '多行'
        //     },
        //     {
        //         type: 'datetime',
        //         icon: 'xt-biaodan-riqi',
        //         label: '日期'
        //     },
        //     {
        //         type: 'upload',
        //         icon: 'xt-upload',
        //         label: '上传'
        //     },
        //     {
        //         type: 'address',
        //         icon: 'xt-upload',
        //         label: '位置'
        //     },
        //     // 位置
        // ]
      }
    };
    _this.setBoolValue = function (field, status) {
      var _this$setState;
      // const {formVisible} = this.state
      var sField = _this.state[field];
      _this.setState((_this$setState = {}, _this$setState[field] = typeof status === 'boolean' ? status : !sField, _this$setState));
    };
    _this.init();
    return _this;
  }
  var _proto = XtFormSetter.prototype;
  _proto.init = /*#__PURE__*/function () {
    var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _yield$categoryList, code, data, menu, _yield$templateList, tpCode, tpData;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return categoryList({
                is_show: 1,
                parent_id: 0
              });
            case 2:
              _yield$categoryList = _context.sent;
              code = _yield$categoryList.code;
              data = _yield$categoryList.data;
              if (!(code === 10200)) {
                _context.next = 15;
                break;
              }
              menu = this.state.menu;
              _context.next = 9;
              return templateList({
                is_hot: 1
              });
            case 9:
              _yield$templateList = _context.sent;
              tpCode = _yield$templateList.code;
              tpData = _yield$templateList.data;
              if (tpCode === 10200) {
                // data[0].tpList = tpData
                data.map(function (res) {
                  return res.tplList = [];
                });

                // const masterTitle = {}
                // data.forEach(res => masterTitle[res.ctg_id] = res.title)
                // tpData.map(res => res.masterTitle = masterTitle[res.ctg_id])

                data.unshift({
                  ctg_id: '-9999',
                  is_show: 1,
                  parent_id: '',
                  sort_by: 0,
                  title: '推荐',
                  tplList: tpData
                });
              }
              menu.tpl.tabList = data;
              this.setState({
                menu: menu
              });
            case 15:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, this);
    }));
    function init() {
      return _init.apply(this, arguments);
    }
    return init;
  }();
  _proto.render = function render() {
    var _this2 = this;
    var _this$state = this.state,
      menu = _this$state.menu,
      form = _this$state.form;
    var _this$props = this.props,
      _this$props$value = _this$props.value,
      f_id = _this$props$value.f_id,
      formData = _this$props$value.formData,
      onChange = _this$props.onChange;
    var tabList = menu.tpl.tabList;

    // const {
    //     menu: {
    //         tpl: {tabList}
    //     }
    // } = this.state
    // const { value, onChange } = this.props;
    // const changeState = (type) => {
    //     const {
    //         formData
    //     } = this.state
    //     formData.push({
    //         type,
    //         key: (Date.now() + Math.random()).toString(32).replace('.', ''),
    //         label: ''
    //     })
    //     this.setState({
    //         formData,
    //     })
    //     // this.setState(state)
    // }

    // tab 页签更新
    var tabChange = /*#__PURE__*/function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ctgId) {
        var menu, tabList, succ, params, _yield$templateList2, code, data;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                menu = _this2.state.menu;
                tabList = menu.tpl.tabList;
                succ = tabList.find(function (res) {
                  return [ctgId - 0, ctgId].includes(res.ctg_id);
                });
                params = {
                  // ctgId: -9999 --> setter/XtForm/index.js
                  is_hot: ctgId === '-9999' ? 1 : -1
                };
                if (ctgId !== '-9999') Object.assign(params, {
                  ctg_parent_id: ctgId
                });
                _context2.next = 7;
                return templateList(params);
              case 7:
                _yield$templateList2 = _context2.sent;
                code = _yield$templateList2.code;
                data = _yield$templateList2.data;
                // const masterTitle = {}
                // tabList.forEach(res => {
                //     masterTitle[res.ctg_id] = res.title
                // })
                if (code === 10200) {
                  // data.map(res => res.masterTitle = masterTitle[res.ctg_id])
                  succ.tplList = data;
                  _this2.setState({
                    menu: menu
                  });
                }
                // if (succ.tplList.length === 0) {}
              case 11:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }));
      return function tabChange(_x) {
        return _ref.apply(this, arguments);
      };
    }();
    var tplChange = function tplChange(tplId) {};

    /**
     * 菜单点击
     * @param item 当前数据项
     */
    var menuClick = /*#__PURE__*/function () {
      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(item) {
        var tpl_id, ctg_id, _yield$templateQuery, code, data, _ref3, schema;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                tpl_id = item.tpl_id, ctg_id = item.ctg_id; // item.tag = (item.tag || '').split(',')
                tabList.forEach(function (res) {
                  var _res$tplList;
                  res === null || res === void 0 ? void 0 : (_res$tplList = res.tplList) === null || _res$tplList === void 0 ? void 0 : _res$tplList.map(function (cRes) {
                    var tplId = cRes.tpl_id,
                      ctgId = cRes.ctg_id;
                    cRes.active = tpl_id === tplId && ctg_id === ctgId; // 高亮选中
                    return cRes;
                  });
                });
                if (!tpl_id) {
                  _context3.next = 9;
                  break;
                }
                _context3.next = 5;
                return templateQuery({
                  tpl_id: tpl_id
                });
              case 5:
                _yield$templateQuery = _context3.sent;
                code = _yield$templateQuery.code;
                data = _yield$templateQuery.data;
                if (code === 10200) {
                  _ref3 = data || {}, schema = _ref3.schema; // debugger
                  Object.assign(item, {
                    list: JSON.parse(schema)
                  });
                }
              case 9:
                /**
                 * 发请求拿模板 list
                 * 合并到 form
                 */
                _this2.setState({
                  menu: menu,
                  // : {tpl: {tabList}}
                  form: Object.assign({
                    list: []
                  }, item)
                });
              case 10:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3);
      }));
      return function menuClick(_x2) {
        return _ref2.apply(this, arguments);
      };
    }();

    /**
     * 更新 表单数据
     * @param value 更新值
     * @param item 数据项
     * @param key 更新字段
     */
    var changeFormValue = function changeFormValue(value, item, key) {
      item[key] = value;
      _this2.setState({
        form: form
      });
    };

    /**
     * 表单排序控制
     * @param item 当前数据
     * @param type prev: 上移, next:下移, top:置顶, delete:删除
     */
    var changeForm = function changeForm(item, type) {
      var itemIdx = form.list.findIndex(function (res) {
        return res.key === item.key;
      });
      var otherIdx = {
        prev: itemIdx - 1,
        next: itemIdx + 1,
        top: 0,
        bottom: form.list.length
      };
      var tmp = [];
      var setFormList = function setFormList(list) {
        return _this2.setState({
          form: _extends({}, form, {
            list: list
          })
        });
      };
      switch (type) {
        case 'prev': // 上移
        case 'next': // 下移
        case 'top': // 置顶
        case 'bottom':
          // 沉底
          if (['prev', 'top'].includes(type) && itemIdx === 0) break; // 上移&&置顶边界处理
          if (['next'].includes(type) && itemIdx >= form.list.length - 1) break; // 下移边界处理

          Object.assign(tmp, form.list.filter(function (res) {
            return res.key !== item.key;
          }));
          tmp.splice(otherIdx[type], 0, form.list[itemIdx]);
          Object.assign(form.list, tmp);
          // (form.list.filter(res => res.key !== item.key)) // 过滤掉当前数据项
          //     .splice(otherIdx[type], 0, form.list[itemIdx]) // 将当前数据项插入指定位置
          setFormList(form.list); // 更新数据
          break;
        case 'delete':
          MessageBox.confirm('您确认删除此选项么', '提示', {
            type: 'warning'
          }).then(function () {
            form.list.splice(itemIdx, 1);
            Message({
              type: 'success',
              message: '删除成功!'
            });
            setFormList(form.list);
          });
          break;
        default:
          return '';
      }
    };

    /**
     * 添加表单项
     * @param item 表单类型数据
     */
    var addFormIem = function addFormIem(item) {
      form.list.push(item);
      _this2.setState({
        form: form
      });
    };

    /**
     * 添加单选|多选的选项数据
     * @param item 当前表单项
     * @param type 0:其它,1 空白选项
     */
    var addFromOptions = function addFromOptions(item, type) {
      if (![0, 1].includes(type)) return;
      var opts = type === 0 ? {
        value: [],
        other: true
      } : {
        value: '',
        image: ''
      };
      opts.key = Date.now().toString(32) + Math.random().toString(32).slice(1);
      form.list.map(function (res) {
        if (res.key === item.key) {
          var insetIdx = res.options.findIndex(function (res) {
            return res.other !== undefined;
          });
          if (type === 0 && insetIdx !== -1) return res;
          Array.isArray(res === null || res === void 0 ? void 0 : res.options) && res.options.splice(insetIdx !== -1 ? insetIdx : res.options.length, 0, opts);
        }
        return res;
      });
      _this2.setState({
        form: form
      });
    };

    /**
     * 删除单选|多选的选项数据
     * @param item 当前表单项
     * @param opt 删除项
     */
    var delFromOptions = function delFromOptions(item, opt) {
      item.options.splice(item.options.findIndex(function (cld) {
        return cld.key === opt.key;
      }), 1);
      _this2.setState({
        form: form
      });
    };
    var saveFormHandler = /*#__PURE__*/function () {
      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(ev) {
        var _this2$state$form$lis, schema;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                ev.preventDefault();
                _this2$state$form$lis = _this2.state.form.list, schema = _this2$state$form$lis === void 0 ? {} : _this2$state$form$lis;
                onChange({
                  formData: schema
                });
                _this2.setBoolValue('formVisible', false);
                // const {
                //     ctg_title: title = '',
                //     list: schema = {},
                // } = this.state.form
                // const nowTimestarmp = Math.ceil(Date.now() / 1000);
                //
                // const f_id = ($_GET?.f_id || '') - 0
                //
                // const param = {
                //     // activity_id: 1, // 活动ID?
                //     title, // 表单标题
                //     schema: JSON.stringify(schema),
                //     begin_time: nowTimestarmp, // 表单开始时间戳
                //     end_time: nowTimestarmp + 86400 * 30, // 表单结束时间戳
                //     f_status: 'ENABLE', // 表单状态->CLOSE:表单关闭,不能提交,ENABLE:正常,HIDE:隐藏
                //     ...{
                //         f_id
                //     }
                // }
                //
                // try {
                //     const {code, data} = f_id
                //         ? await formUpdate(param)
                //         : await formAdd(param)
                //     if (code === 10200) {
                //         // onChange({f_id: data?.f_id || f_id})
                //         onChange({
                //             f_id: data?.f_id || f_id,
                //             formData: schema
                //         })
                //         this.setBoolValue('formVisible', false)
                //     }
                // } catch (e) {
                //     throw new Error(e)
                // }
              case 4:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4);
      }));
      return function saveFormHandler(_x3) {
        return _ref4.apply(this, arguments);
      };
    }();
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
      size: "small",
      type: "primary",
      onClick: function onClick() {
        return _this2.setBoolValue('formVisible', true);
      }
    }, /*#__PURE__*/React.createElement("span", {
      className: "xiatu-rich xt-editor " + style['btn-editor']
    }), "\u7F16\u8F91\u8868\u5355"), /*#__PURE__*/React.createElement(Dialog, {
      title: "\u7F16\u8F91\u8868\u5355",
      visible: this.state.formVisible,
      closeOnClickModal: false,
      onCancel: function onCancel() {
        return _this2.setBoolValue('formVisible', false);
      },
      className: style.dialog
    }, /*#__PURE__*/React.createElement("div", {
      className: style.form
    }, /*#__PURE__*/React.createElement("div", {
      className: style['form-body']
    }, /*#__PURE__*/React.createElement("div", {
      className: style['form-left']
    }, /*#__PURE__*/React.createElement(FormLeft, {
      formData: this.state.menu,
      tabChange: tabChange,
      menuClick: menuClick,
      tplChange: tplChange
    })), /*#__PURE__*/React.createElement("div", {
      className: style['form-right']
    }, /*#__PURE__*/React.createElement(FormRight, {
      formData: this.state.form,
      ref: "formRight",
      f_id: f_id,
      changeForm: changeForm,
      addFromOptions: addFromOptions,
      delFromOptions: delFromOptions,
      changeFormValue: changeFormValue,
      addFormIem: addFormIem
    }))), /*#__PURE__*/React.createElement("div", {
      className: style['form-footer']
    }, /*#__PURE__*/React.createElement("div", {
      className: style['form-footer-left']
    }, "\u8868\u5355\u9898\u76EE\uFF1A5\u4E2A"), /*#__PURE__*/React.createElement("div", {
      className: style['form-footer-right']
    }, /*#__PURE__*/React.createElement(SaveTpl, {
      formData: this.state.form,
      tabChange: tabChange,
      setParentBoolValue: this.setBoolValue
    }), /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      onClick: function onClick(ev) {
        return saveFormHandler.bind(_this2)(ev);
      },
      disabled: JSON.stringify(this.state.form) === '{}',
      className: style['form-footer-btn']
    }, /*#__PURE__*/React.createElement("span", {
      className: style['form-footer-btn-icon'] + " xiatu-rich xt-baocun"
    }), "\u4FDD\u5B58\u8868\u5355"))))));
  };
  return XtFormSetter;
}(Component);
XtFormSetter.displayName = 'XtFormSetter';
export { XtFormSetter as default };