<template>
  <div class="fwcs">
    <el-breadcrumb separator="/" class="bread_crumb">
      <el-breadcrumb-item :to="{ path: '/' }">服务注册</el-breadcrumb-item>
      <el-breadcrumb-item>服务测试</el-breadcrumb-item>
    </el-breadcrumb>
    <block-radius>
      <el-row>
        <el-button
          v-for="item in btnList"
          :key="item.id"
          @click="clickBtn(item.id)"
          :class="activeBtn == item.id ? 'fwcs_btn_act':'fwcs_btn_dis'"
        >{{ item.text }}</el-button>
      </el-row>
      <div class="gray_line"></div>
      <div class="fwcs_fwdz">服务地址：</div>
      <div class="fwcs_fwdz_inner">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option
              v-for="item in optionType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-input>
        <el-button @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
      </div>
      <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
        <el-tab-pane label="请求参数" name="0">
          <ces-table
            ref="fwcs_sjfw"
            class="r_yhgl_table"
            size="mini"
            :border="true"
            :headers="headers"
            url
            :searchShow="false"
            :addRowBtn="false"
            :autoAdd="true"
            :isDialog="false"
            :isSelection="false"
            :isIndex="true"
            :radius="true"
            :emptyText="emptyText"
            :stripe="false"
            :paginationShow="false"
            :pageSizeShow="false"
            headerCellClassName="th_pink"
          ></ces-table>
        </el-tab-pane>
        <el-tab-pane label="请求体" name="1"></el-tab-pane>
        <el-tab-pane label="授权信息" name="2"></el-tab-pane>
      </el-tabs>
    </block-radius>
    <block-radius>
        s
    </block-radius>
  </div>
</template>

<script>
import blockRadius from "@/components/block-radius";
import cesTable from "@/components/table-um";
export default {
  components: {
    blockRadius,
    cesTable
  },
  data: () => ({
    btnList: [
      { icon: "", text: "数据服务", id: 0 },
      { icon: "", text: "时空服务", id: 1 },
      { icon: "", text: "视频服务", id: 2 },
      { icon: "", text: "感知服务", id: 3 },
      { icon: "", text: "综合服务", id: 4 }
    ],
    activeBtn: 0,
    input3: "",
    select: "GET",
    optionType: [
      { label: "GET", value: "GET" },
      { label: "POST", value: "POST" }
    ],
    activeName: 0,
    headers: [
      {
        label: "请求字段编码",
        prop: "requestEncoding",
        type: "input",
        align: "left"
      },
      { label: "请求值", prop: "requestValue", type: "input", align: "left" }
    ],
    url: "",
    emptyText: "暂时没数据"
  }),
  computed: {},
  watch: {},
  methods: {
    clickBtn(val) {
      this.activeBtn = val;
    },
    clickFwcs() {},
    clickTab() {},
    clickNext() {
      console.log(this.$refs.fwcs_sjfw.getTableData());
    }
  },
  mounted() {}
};
</script>

<style scoped>
.fwcs {
}
.bread_crumb {
  margin: 20px;
  font-size: 14px;
}
.fwcs_btn_act {
  background-color: #e56600;
  color: #ffffff;
}
.fwcs_btn_dis {
  background-color: #e3e5ef;
  color: #8890a7;
}
.gray_line {
  width: 100%;
  margin: 20px auto;
  height: 1px;
  background-color: #dcdfe6;
}
.fwcs_fwdz {
  color: #58617a;
  margin: 20px 15px 15px;
  font-size: 14px;
}
.input-with-select {
  width: 70%;
}
.fwcs_btn_fwcs {
  background-color: #0f2683;
  color: #ffffff;
}
</style>
<style>
.bread_crumb .el-breadcrumb__inner {
  color: #b4c0f5 !important;
}
.bread_crumb .is-link {
  color: #626de9 !important;
}
.fwcs_fwdz_inner .el-select .el-input {
  width: 130px;
  background-color: #0f2683;
  color: #ffffff;
  border-radius: 8px 0px 0px 8px;
}
.fwcs_tabs .el-tabs__header {
  margin: 20px 0;
}
</style>
