<template>
  <el-container>
    <el-aside style="width: 180px; padding: 0">
      <div class="header">
        <div>HTTP Server</div>
        <div>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" circle/>
        </div>
      </div>
      <div class="list" v-if="list && list.length > 0">
        <div v-for="item in list" :key="item.id" :class="'item'+(selectedKey === item.id ? ' is-active' : '')" @click="handleListClick(item)">{{ item.name }}</div>
      </div>
      <el-empty v-else description="暂无数据" :image-size="100"/>
    </el-aside>
    <el-main>
      <div v-if="selectedKey">
        <el-form :model="form" ref="form">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="HTTP Server名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入HTTP Server名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="协议" prop="protocol">
                <el-select v-model="form.protocol">
                  <el-option v-for="dict in dict.type.http_protocol" :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="主机" prop="host">
                <el-input v-model="form.host" placeholder="请输入主机地址"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="端口" prop="port">
                <el-input v-model="form.port" placeholder="请输入端口号"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="前置路径" prop="basePath">
                <el-input v-model="form.basePath" placeholder="请输入前置路径，格式为/**"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-table :data="form.header">
              <el-table-column label="参数名">
                <template slot-scope="scope">
                  <el-input placeholder="请输入参数名" v-model="form.header[scope.$index].key" @input="e => handleTableEdit(e, scope)" clearable/>
                </template>
              </el-table-column>
              <el-table-column label="示例值">
                <template slot-scope="scope">
                  <el-input placeholder="请输入参数名" v-model="form.header[scope.$index].value" @input="e => handleTableEdit(e, scope)" clearable/>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template slot-scope="scope">
                  <el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-form>
        <div class="footer">
          <el-button type="primary" @click="save">保 存</el-button>
          <el-button type="danger" @click="del">删除</el-button>
        </div>
      </div>
      <el-empty v-else description="暂无数据" />
    </el-main>
  </el-container>
</template>

<script>
import {addHttp, delHttp, getHttp, listHttp, updateHttp} from "@/api/test/http";

export default {
  name: 'Http',
  dicts: ["http_protocol"],
  data() {
    return {
      list: [],
      selectedKey: "",
      form: {
        name: "",
        protocol: "",
        host: "",
        port: "",
        basePath: "",
        header: [{
          key: "",
          value: "",
        }],
      },
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData(key) {
      const loading = this.setLoading();
      listHttp().then(res => {
        this.list = res.data;
        if (key) {
          this.handleListClick({id: key})
        } else if (this.list && this.list.length > 0) {
          this.handleListClick({id: this.list[0].id})
        }
        loading.close();
      })
    },
    handleTableEdit(e, scope) {
      if (e && this.form.header.length === scope.$index + 1) {
        this.form.header.push({
          key: "",
          value: ""
        })
      }
    },
    handleDelete(scope) {
      this.form.header.splice(scope.$index, 1)
    },
    handleListClick(item) {
      const loading = this.setLoading();
      this.selectedKey = item.id;
      getHttp(item.id).then(res => {
        this.form = res.data;
        if (!this.form.header) {
          this.form.header = []
        } else {
          this.form.header = JSON.parse(this.form.header);
        }
        this.form.header.push({
          key: "",
          value: ""
        })
      })
      loading.close();
    },
    handleAdd() {
      this.$prompt('请输入名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(?!\s*$).+/,
        inputErrorMessage: '名称不能为空'
      }).then(({ value }) => {
        if (value) {
          const loading = this.setLoading();
          addHttp({name: value}).then(res => {
            this.$message.success("添加成功")
            this.getData(res.data.id);
            loading.close();
          })
        }
      });
    },
    save() {
      this.form.header.pop();
      updateHttp({
        ...this.form,
        header: JSON.stringify(this.form.header)
      }).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.getData();
      })
    },
    del() {
      this.$modal.confirm('是否确认删除？').then(() => {
        return delHttp(this.selectedKey);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.selectedKey = "";
        this.getData();
      })
    },
    setLoading() {
      return this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  text-align: right;
  margin-top: 20px;
}

.header {
  font-weight: bold;
  line-height: 45px;
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
}

.list {
  .item {
    padding: 0 20px;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    border-right: 2px solid #eee;
  }

  .item.is-active {
    color: var(--current-color);
    border-right: 2px solid var(--current-color);
  }
}
</style>
