<td colspan="2" align="center">
    <h2>{$params_tpl['title']}{$params_tpl['help']}</h2>
    <div style="display: flex; flex-direction: column;">{$tpl_types['result']}</div>
    <div style="display: flex; flex-direction: column;">{$tpl_types['field1']}</div>
    <div style="display: flex; flex-direction: column;">{$tpl_types['func_row']}</div>
    <div style="display: none; flex-direction: column;">{$tpl_types['flex_data']}</div>
</td>
<script>
    (function() {
        var values = {};

        var funcRow = $('textarea[name="calc_params[{$tpl_num}][func_row]"]');
        var flexField = $('select[name="calc_params[{$tpl_num}][field1]"]');

        $(flexField).prepend('<option value="" selected></option>');

        for (let i = 0; i < flexField[0].length; i++) {
            values[flexField[0][i].innerHTML] = flexField[0][i].getAttribute('value');
        }
        $(flexField).change(function() {
            if ($(this).val() == "") {
                return;
            }

            var text = funcRow.val();
            var option = $('option[value="' + $(this).val().replace('|', '\\|') +'"]');
            {literal}
            var optinForInsert = '{' + option.html() + '}';
            var position = $(funcRow).prop('selectionStart');
            text = text.substr(0, position) + optinForInsert + text.substr(position);
            {/literal}

            funcRow.val(text);
            var index = this.selectedIndex;
            var indextext = this.selectedIndex.innerHTML;
            var indexVal = flexField[0][index].getAttribute('value');

            $(funcRow).change()
            this.selectedIndex = 0;
        });
        var Length = funcRow.val().length;
        $(funcRow).on('change', function(e) {
            prepareVal();
        });
        function prepareVal(){

            {literal}
            var separator =/{([^}]+)}/g;
            {/literal}

            function replace(){
                //@fixme Здесь как будто бы ничего не меняется, нужно обсудить
                for (var i = 0; i < c; i++) {
                    for (var  j = 0; j < Object.keys(values).length; j++) {
                        if(a.search('{' + Object.keys(values)[j] + '}')) {
                            var re = Object.keys(values)[j];
                            {literal}
                            if (a.indexOf("\n")) {
                                a = a.replace(/\n/, "\\r\\n");
                            }
                            a = a.replace('{' + re + '}', '{' + values[Object.keys(values)[j]] + '}');
                            {/literal}
                        }
                    }
                }
                const newValue = funcRow.val();
                const optionsNames = newValue.split(separator).filter(Boolean);
                const optionsFieldsId = optionsNames
                  .filter(optionName => Object.prototype.hasOwnProperty.call(values, optionName))
                  .map(optionName => {
                  const fieldIdWithF = values[optionName];
                  return fieldIdWithF.split('.')[0].replace('f', '');
                  })
                setStartCalcFields(optionsFieldsId || []);
            }
            var a = funcRow.val();
            //количество элементов на замену
            var c = 0;
            var b = a.split(separator);
            for (var  i = 0; i < b.length; i++) {
                if(b[i] !== "") c++;
            }
            replace();
            set_tpl_events();
            {literal}
            a = a.replace(/{/g, "{{").replace(/}/g, "}}");
            {/literal}
            //запись полученной формулы в инпут
            document.getElementsByName('calc_params[{$tpl_num}][flex_data]')[0].value = a;
        }
    })();
</script>