<template>
  <div class="fwcs">
    <el-breadcrumb separator="/" class="bread_crumb">
      <el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item>
      <el-breadcrumb-item v-if="!jcxxtx">服务测试</el-breadcrumb-item>
      <el-breadcrumb-item v-else :to="{ path: '/fwzc' }">服务测试</el-breadcrumb-item>
      <el-breadcrumb-item v-if="jcxxtx">基础信息填写</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 v-if="activeBtn == 4">
        <div class="sqxx_title">服务类型：</div>
        <el-select v-model="zhyyVal" placeholder="请选择" class="zhyy_select">
          <el-option
            v-for="item in optionsZhyy"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </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 v-if="activeBtn == 0 || activeBtn == 4" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
      </div>
      <div v-if="activeBtn == 0">
        <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
          <el-tab-pane label="请求参数" name="0">
            <ces-table
              ref="fwcs_sjfw_qq"
              size="mini"
              :border="true"
              :headers="sjfw_qqcs"
              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">
            <div class="sjfw_qqt">
              <el-radio v-model="sjfwQqt" label="JSON">JSON</el-radio>
            </div>
            <v-apaas-code></v-apaas-code>
          </el-tab-pane>
          <el-tab-pane label="授权信息" name="2">
            <el-row class="sqxx_row">
              <el-col :span="6">
                <div class="sqxx_title">授权方式：</div>
                <el-select v-model="sqfsVal" placeholder="请选择" class="sqxx_select">
                  <el-option
                    v-for="item in optionsSq"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="2" class="center_line_c">
                <div class="center_line"></div>
              </el-col>
              <el-col :span="16">
                <div class="sqxx_title">Token：</div>
                <el-input v-model="tokenVal" placeholder="请输入内容"></el-input>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="activeBtn == 1">
        <div class="skfw_fwlx">服务类型：</div>
        <div class="skfw_fwlx_radios">
          <el-radio
            v-for="item in skfwRadios"
            :key="item"
            v-model="sjfwQqt"
            :label="item"
          >{{ item }}</el-radio>
          <el-button v-if="activeBtn == 1" @click="clickFwcs()" class="fwcs_btn_fwcs">服务测试</el-button>
        </div>
      </div>
    </block-radius>
    <block-radius v-if="resultShow">
      <div v-if="activeBtn == 0">
        <div class="sjfw_qqcstx">请求参数信息填写：</div>
        <ces-table
          ref="fwcs_sjfw_qqcs"
          size="mini"
          :border="true"
          :headers="sjfw_qqcstx"
          url="qqcstx"
          :searchShow="false"
          :addRowBtn="false"
          :autoAdd="false"
          :isDialog="false"
          :isSelection="false"
          :isIndex="true"
          :radius="true"
          :emptyText="emptyText"
          :stripe="false"
          :paginationShow="false"
          :pageSizeShow="false"
          headerCellClassName="th_pink"
        ></ces-table>
        <div class="sjfw_fhcstx">返回参数信息填写：</div>
        <ces-table
          ref="fwcs_sjfw_fhcs"
          size="mini"
          :border="true"
          :headers="sjfw_fhcstx"
          url="fhcstx"
          :searchShow="false"
          :addRowBtn="false"
          :autoAdd="false"
          :isDialog="false"
          :isSelection="false"
          :isIndex="true"
          :radius="true"
          :emptyText="emptyText"
          :stripe="false"
          :paginationShow="false"
          :pageSizeShow="false"
          headerCellClassName="th_pink"
        ></ces-table>
      </div>
      <div v-else-if="activeBtn == 1 || activeBtn == 4">
        <div class="skfw_csfwxx">测试服务信息：</div>
        <div class="test_succ">
          <div v-if="skfwResult" class="skcs_jg">
            <img src="../assets/imgs/test_icon_success.png" class="skcs_jg_img" />&nbsp;测试成功
          </div>
          <div v-else class="skcs_jg">
            <img src="../assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
          </div>
          <div></div>
        </div>
      </div>
      <div class="btn_footer">
        <el-button class="reset" v-if="activeBtn == 0" @click="resetSjfw">重置</el-button>
        <el-button class="next" @click="nextJcxx">下一步</el-button>
      </div>
    </block-radius>
  </div>
</template>

<script>
import BlockRadius from "@/components/block-radius";
import CesTable from "@/components/table-um";
import Codes from "@/components/codes";
export default {
  components: {
    BlockRadius,
    CesTable,
    "v-apaas-code": Codes
  },
  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,
    sjfw_qqcs: [
      {
        label: "请求字段编码",
        prop: "requestEncoding",
        type: "input",
        align: "left"
      },
      { label: "请求值", prop: "requestValue", type: "input", align: "left" }
    ],
    sjfw_qqcstx: [
      { label: "字段编码", prop: "unicode", type: "", align: "left" },
      { label: "示例值", prop: "examples", type: "input", align: "left" },
      { label: "字段类型", prop: "type", type: "", align: "left" },
      { label: "字段名称", prop: "name", type: "input", align: "left" },
      {
        label: "是否必须",
        prop: "needable",
        type: "select",
        align: "left",
        width: 100
      },
      { label: "字段说明", prop: "explanation", type: "input", align: "left" }
    ],
    sjfw_fhcstx: [
      { label: "字段编码", prop: "unicode", type: "", align: "left" },
      { label: "字段类型", prop: "type", type: "popover", align: "left" },
      { label: "字段名称", prop: "name", type: "input", align: "left" },
      { label: "字段说明", prop: "explanation", type: "input", align: "left" }
    ],
    url: "",
    emptyText: "暂时没数据",
    resultShow: false,
    optionsSq: [{ label: "Bearer Token", value: "Bearer Token" }],
    sqfsVal: "",
    tokenVal: "",
    sjfwQqt: "JSON",
    skfwRadios: [
      "ArcGIS Server Web",
      "文档",
      "KML",
      "OGC(WMS)",
      "OGS(WMTS)",
      "OGS(WFS)",
      "OGS(WCS)"
    ],
    skfwResult: false,
    optionsZhyy: [
      { label: "模型算法类", value: 0 },
      { label: "查询验证类", value: 1 },
      { label: "流程类", value: 2 },
      { label: "应用类", value: 3 },
    ],
    zhyyVal: 0,
    jcxxtx: false
  }),
  computed: {},
  watch: {},
  methods: {
    clickBtn(val) {
      this.resultShow = false;
      this.activeBtn = val;
    },
    clickFwcs() {
      this.resultShow = true;
    },
    clickTab() {},
    clickNext() {
      console.log(this.$refs.fwcs_sjfw_qq.getTableData());
    },
    resetSjfw() {},
    nextJcxx() {
      this.jcxxtx = true;
    }
  },
  mounted() {}
};
</script>

<style scoped>
.fwcs {
  width: 96vw;
}
.bread_crumb {
  margin: 20px;
  font-size: 14px;
}
.fwcs_btn_act {
  width: 100px;
  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;
  margin-left: 10px;
}
.sjfw_qqcstx {
  color: #58617a;
  margin: 10px 15px;
  font-size: 14px;
}
.skfw_csfwxx {
  color: #58617a;
  margin: 10px 15px;
  font-size: 14px;
}
.sjfw_fhcstx {
  color: #58617a;
  margin: 40px 15px 10px;
  font-size: 14px;
}
.btn_footer {
  display: flex;
  justify-content: flex-end;
  margin: 40px 20px 10px;
}
.btn_footer .reset {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
.btn_footer .next {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.sqxx_row {
  padding: 0 20px;
}
.sqxx_title {
  color: #58617a;
  font-size: 14px;
  margin: 10px 15px;
}
.sqxx_select {
  width: 100%;
}
.center_line_c {
  margin: 0 auto;
}
.center_line {
  background-color: #f4f7fc;
  width: 2px;
  height: 400px;
  position: relative;
  left: 50%;
}
.sjfw_qqt {
  margin: 0 20px 15px;
}
.skfw_fwlx {
  margin: 20px 15px;
  color: #58617a;
  font-size: 14px;
}
.skfw_fwlx_radios {
  margin: 10px 0 0;
}
.test_succ {
  width: 100%;
  margin: 0 auto;
}
.skcs_jg {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f2683;
  font-size: 20px;
}
.skcs_jg_img {
  position: relative;
  top: 3px;
}
.zhyy_select {
  width: 70%;
}
</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>
