<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="src/codem/lib/codemirror.js"></script>
    <script src="src/editor/lib/jshint.js"></script>
    <script src="src/codem/mode/javascript/javascript.js"></script>
    <script src="src/codem/addon/hint/show-hint.js"></script>
    <script src="src/codem/addon/selection/active-line.js"></script>
    <script src="src/codem/addon/hint/javascript-hint.js"></script>
    <script src="src/codem/addon/edit/matchbrackets.js"></script>
    <script src="src/codem/addon/fold/foldcode.js"></script>
    <script src="src/codem/addon/fold/foldgutter.js"></script>
    <script src="src/codem/addon/fold/indent-fold.js"></script>
    <script src="src/codem/addon/fold/brace-fold.js"></script>
    <script src="src/codem/addon/scroll/simplescrollbars.js"></script>
    <script src="src/codem/addon/lint/lint.js"></script>
    <script src="src/codem/addon/lint/javascript-lint.js"></script>
    <script src="src/codem/addon/search/search.js"></script>
    <script src="src/codem/addon/search/searchcursor.js"></script>
    <script src="src/codem/keymap/sublime.js"></script>
    <script src="src/codem/addon/edit/matchbrackets.js"></script>
    <script src="src/codem/addon/edit/closebrackets.js"></script>
    <link rel="stylesheet" href="src/codem/lib/codemirror.css">
    <link rel="stylesheet" href="src/codem/addon/hint/show-hint.css">
    <link rel="stylesheet" href="src/codem/addon/lint/lint.css">
    <link rel="stylesheet" href="src/codem/theme/dracula.css">
    <link rel="stylesheet" href="src/codem/addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="src/codem/addon/scroll/simplescrollbars.css" />
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <!-- <link href="src/editor/lib/vuetify.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="src/editor/editor.css">
</head>
<body>
  <div id="lm_container" v-cloak>
    <div class="lm-ui">
      <div id="lm_editor_folder" class="lm-ui-col lm-ui-folder">
        <div id="lm_folder">
          <!-- <div class="lm-folder-manager">
            <i class="el-icon-document-add"></i>
            <i class="el-icon-folder-add"></i>
          </div> -->
          <el-tree
            ref="rf_folder"
            :data="treeData"
            :props="{label: 'name'}"
            node-key="path"
            default-expand-all
            highlight-current
            @node-click="openFile">
            <div class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="setCurrentEditFolder(data)">
              <i v-if="data.type === 'directory'" class="mdi mdi-folder"></i>
              <i v-else class="mdi" :class="files[data.extension.substring(1)]"></i>
              <span class="custom-tree-node-label" v-text="node.label" v-if="node.label"></span>
              <el-input :class="{warning: currentEditing}" v-model="currentEditName" size="mini" autofocus @blur="blurEditName(node)" v-else></el-input>
              <span class="custom-tree-node-status" v-if="data.path === currentPath && hasChanged">M</span>
            </div>
          </el-tree>
        </div>
      </div>
      <div id="lm_editor_resize1" class="lm-drag-bar"></div>
      <div id="lm_editor" class="lm-ui-col lm-ui-editor">
        <div v-if="fileType === 'api'" class="lm-editor-tools">
          <el-tooltip class="item" effect="dark" content="参数配置" placement="left">
            <div class="tool-button" :class="{active: dialog}" @click="showDialog">
              <i class="el-icon-setting"></i>
            </div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Mockjs示例" placement="left">
            <a class="tool-button" target="_blank" href="http://mockjs.com/examples.html">
              <i class="el-icon-notebook-2"></i>
            </a>
          </el-tooltip>
        </div>
        <el-drawer
          id="el-drawer__wrapper"
          :visible.sync="dialog"
          direction="btt"
          :modal="false"
          size="55%"
          custom-class="api-drawer"
          :with-header="false"
          ref="drawer"
          >
          <div class="drawer__content">
            <div class="drawer-header">
              <h3>API请求配置</h3>
              <p>GET参数请直接拼在URL后面，POST参数在Parameters配置</p>
            </div>
            
            <div class="request-form">
              <el-row :gutter="15" class="form-row">
                <el-col :span="5">
                  <div class="form-label">Method</div>
                  <el-input
                    :disabled="true"
                    v-model="requestForm.method"
                    class="method-input"
                    autocomplete="off">
                  </el-input>
                </el-col>
                <el-col :span="15">
                  <div class="form-label">URL</div>
                  <el-input
                    v-model="requestForm.url"
                    autocomplete="off">
                  </el-input>
                </el-col>
                <el-col :span="6" class="send-button-col">
                  <el-button type="primary" @click.native="sendRequest">发送请求</el-button>
                </el-col>
              </el-row>
            </div>
            
            <el-collapse class="request-collapse">
              <el-collapse-item title="Headers" name="1">
                <div class="collapse-content">
                  <el-row :key="index" :gutter="15" class="param-row" v-for="(item, index) in requestForm.headers">
                    <el-col :span="8">
                      <el-input
                        :placeholder="'参数名称'"
                        v-model="item.param"
                        autocomplete="off">
                      </el-input>
                    </el-col>
                    <el-col :span="14">
                      <el-input
                        :placeholder="'参数值'"
                        v-model="item.value"
                        autocomplete="off">
                      </el-input>
                    </el-col>
                    <el-col :span="2" v-if="index > 0">
                      <el-button type="text" icon="el-icon-delete" class="delete-btn" @click="deleteHeaderItem(index)"></el-button>
                    </el-col>
                  </el-row>
                  <div class="add-item-row">
                    <el-button type="text" size="small" icon="el-icon-plus" @click="addHeaderItem">添加Header</el-button>
                  </div>
                </div>
              </el-collapse-item>
              
              <el-collapse-item title="Parameters (POST)" name="2" v-if="requestForm.params.length">
                <div class="param-switch">
                  <el-switch
                    v-model="showRawInput"
                    active-text="Raw JSON">
                  </el-switch>
                </div>
                
                <div class="collapse-content" v-if="showRawInput">
                  <h4>Raw Request Body</h4>
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 5 }"
                    placeholder="输入JSON格式的请求体"
                    v-model="rawRequestBody">
                  </el-input>
                </div>
                
                <div class="collapse-content" v-else>
                  <el-row :key="index" :gutter="15" class="param-row" v-for="(item, index) in requestForm.params">
                    <el-col :span="8">
                      <el-input
                        :placeholder="'参数名称'"
                        v-model="item.param"
                        autocomplete="off">
                      </el-input>
                    </el-col>
                    <el-col :span="14">
                      <el-input
                        :placeholder="'参数值'"
                        v-model="item.value"
                        autocomplete="off">
                      </el-input>
                    </el-col>
                    <el-col :span="2" v-if="index > 0">
                      <el-button type="text" icon="el-icon-delete" class="delete-btn" @click="deleteParamItem(index)"></el-button>
                    </el-col>
                  </el-row>
                  <div class="add-item-row">
                    <el-button type="text" size="small" icon="el-icon-plus" @click="addParamItem">添加参数</el-button>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-drawer>
        <codemirror
          class="lm-editor"
          ref="cm"
          v-model="code"
          :options="cmOption"
          @blur="onCmBlur($event)"
          @focus="onCmFocus($event)"
          @ready="onCmReady($event)"
          @changes="onChange"
        ></codemirror>
      </div>
      <div id="lm_editor_resize2" class="lm-drag-bar lm-drag-bar2"></div>
      <div id="lm_editor_result" class="lm-ui-col lm-ui-result">
        <div class="lm_result_progress" v-if="loadingResult > 0">
          <el-progress :percentage="loadingResult" status="success"></el-progress>
          <!-- <v-progress-linear
            indeterminate
            color="#1867c0"
          ></v-progress-linear> -->
        </div>  
        <!-- <i class="lm-ui-result-loading mdi mdi-reload" v-if="loadingResult"></i> -->
        <codemirror
          v-if="fileType === 'api'"
          class="lm-editor"
          ref="res_cm"
          v-model="jsonCode"
          :options="cmResultOption"
        ></codemirror>
        <div class="lm-editor-socket" v-else-if="fileType === 'socket'">
          <el-row :span="10" class="socket-emit-row">
            <el-input v-model="customEmitData" placeholder="不填则发送编辑框中的mock数据" class="ws-emit-input" clearable></el-input>
            <el-button type="success" @click.native="emitSocket">发往客户端</el-button>
          </el-row>
          
          <!-- WebSocket客户端功能 -->
          <div class="websocket-client">
            <h3>WebSocket客户端</h3>
            <el-input id="wsUrl" v-model="wsUrl" :disabled="true" placeholder="输入服务器地址" class="ws-url-input">
              <template slot="prepend">Mock服务器地址：</template>
            </el-input>

            <!-- 高级配置区域 -->
            <div class="proxy-options-container">
              <div class="proxy-options-header">
                <el-switch
                  v-model="showRemoteUrl"
                  active-text="连接到真实服务器"
                  inactive-text=""
                  @change="handleRemoteUrlChange">
                </el-switch>
              </div>
              <div v-if="showRemoteUrl">
                <el-input clearable id="wsRemoteUrl" v-model="wsRemoteUrl" placeholder="填写真实WebSocket地址进行测试" class="ws-url-input">
                  <template slot="prepend">服务器地址：</template>
                </el-input>

                <div v-if="wsRemoteUrl">
                  <div class="proxy-options-header">
                    <el-switch
                      v-model="showProxyOptions"
                      active-text="高级配置"
                      inactive-text=""
                      @change="handleProxyOptionsChange">
                    </el-switch>
                  </div>
                  <div v-if="showProxyOptions">
                    <label class="proxy-options-label">
                      服务器连接选项配置
                      <el-tooltip class="item" effect="dark" content="JSON格式的Socket.IO连接选项" placement="top">
                        <i class="el-icon-info" style="margin-left: 5px;"></i>
                      </el-tooltip>
                    </label>
                    <el-input
                      clearable
                      type="textarea"
                      :rows="4"
                      placeholder='{"transports":["websocket"],"reconnection":true,"auth":{"client_id":"your-id"}}'
                      v-model="wsProxyOptionsJson"
                      class="ws-proxy-options">
                    </el-input>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="ws-connection-type">
              <label>连接类型：</label>
              <el-radio-group v-model="wsType">
                <el-radio label="websocket">原生WebSocket</el-radio>
                <el-radio label="socketio">Socket.IO</el-radio>
              </el-radio-group>
            </div>
            
            <div>
              <el-button type="primary" @click="connectWs" :disabled="wsConnected">连接</el-button>
              <el-button type="danger" @click="disconnectWs" :disabled="!wsConnected">断开连接</el-button>
            </div>
            
            <div class="status ws-status" :class="wsConnected ? 'connected' : 'disconnected'">
              {{ wsConnected ? '已连接' : '未连接' }}
            </div>
            
            <div class="ws-message-area-wrapper">
              <div id="messageArea" class="ws-message-area"></div>
              <el-button 
                size="mini" 
                type="text" 
                icon="el-icon-delete" 
                class="ws-clear-btn" 
                @click="clearMessages">
                清空
              </el-button>
            </div>
            
            <div class="ws-message-form">
              <el-input v-model="wsMessage" placeholder="输入要发送的消息" :disabled="!wsConnected" class="ws-message-input" clearable></el-input>
              <el-button type="primary" @click="sendWsMessage" :disabled="!wsConnected">发往服务端</el-button>
            </div>
          </div>
        </div>
        <div class="lm-editor" style="padding: 20px;"  v-else>{{jsonCode}}</div>
      </div>
    </div>
    <!-- <v-alert
      dense
      :icon="showAlertIcon[showAlertType]"
      :value="showAlert"
      :type="showAlertType"
      transition="slide-y-transition"
    >
      {{showAlertText}}
    </v-alert> -->
  </div>
  <script src="src/editor/lib/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
  <script src="src/editor/lib/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
  <script src="src/editor/lib/vue-codemirror.js"></script>
  <script>
    const __PORT__ = "<%= PORT %>"
    const __SERVER_IP__ = "<%= SERVER_IP %>"
    const __SOCKET_PORT__ = "<%= SOCKET_PORT %>"
  </script>
  <script src="src/editor/lib/utils.js"></script>
  <script src="src/editor/lib/mock-snippets.js"></script>
  <!-- Socket.IO客户端库 -->
  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <!-- WebSocket客户端脚本 -->
  <script src="src/ws.js"></script>
  <script src="src/editor/editor.js"></script>
</body>
</html>