<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>
    <div v-if="!jcxxtx">
      <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 @change="changeZhType" 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="请输入内容"
            @input="getUrl"
            v-model="serviceUrl"
            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="sjfwQqcs"
                url
                :datas="datasSj"
                :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-group v-model="sjfwQqt">
                  <el-radio label="JSON">JSON</el-radio>
                </el-radio-group>
              </div>
              <v-apaas-code ref="jsonCodes"></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>
        <div v-if="activeBtn == 4">
          <el-tabs v-model="activeZh" class="fwcs_tabs" @tab-click="clickTab">
            <el-tab-pane label="请求参数" name="0">
              <ces-table
                ref="fwcs_zhfw_qq"
                size="mini"
                :border="true"
                :headers="sjfwQqcs"
                url
                :datas="datasZh"
                :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"
                @changeTable="changeTable"
              ></ces-table>
            </el-tab-pane>
            <el-tab-pane label="请求体" name="1">
              <div class="sjfw_qqt">
                <el-radio-group v-model="zhfwQqt" @change="changeZhfwQqt">
                  <el-radio label="JSON">JSON</el-radio>
                  <el-radio label="form-data">form-data</el-radio>
                  <el-radio label="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>
                </el-radio-group>
              </div>
              <div v-show="zhfwQqt == 'JSON'">
                <v-apaas-code ref="zhfwJsonCodes"></v-apaas-code>
              </div>
              <div v-show="zhfwQqt == 'form-data'">
                <ces-table
                  ref="fwcs_zhfw_qq_form"
                  size="mini"
                  :border="true"
                  :headers="zhfwQqcsForm"
                  url
                  :datas="datasZhForm"
                  :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>
              </div>
              <div v-show="zhfwQqt == 'x-www-form-urlencoded'">
                <ces-table
                  ref="fwcs_zhfw_www"
                  size="mini"
                  :border="true"
                  :headers="sjfwQqcs"
                  url
                  :datas="datasZhwww"
                  :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"
                  @changeTable="changeTable"
                ></ces-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </block-radius>
      <block-radius v-show="resultShow">
        <div v-show="activeBtn == 0 && resSuccess">
          <div class="sjfw_qqcstx">请求参数信息填写：</div>
          <ces-table
            ref="fwcs_sjfw_qqcs"
            size="mini"
            :border="true"
            :headers="sjfwQqcstx"
            url
            :datas="datasQqcs"
            :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"
            @primary-del="delItemQq"
          ></ces-table>
          <div class="sjfw_fhcstx">返回参数信息填写：</div>
          <ces-table
            ref="fwcs_sjfw_fhcs"
            size="mini"
            :border="true"
            :headers="sjfwFhcstx"
            url
            :datas="datasFhcs"
            :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"
            @primary-del="delItemFh"
          ></ces-table>
        </div>
        <div v-show="(activeBtn == 1 || activeBtn == 4) && resSuccess">
          <div class="skfw_csfwxx">测试服务信息：</div>
          <div class="test_succ">
            <div class="skcs_jg">
              <img src="@/assets/imgs/test_icon_success.png" class="skcs_jg_img" />&nbsp;测试成功
            </div>
          </div>
        </div>
        <div v-show="(activeBtn == 0 || activeBtn == 1 || activeBtn == 4) && !resSuccess">
          <div class="skfw_csfwxx">测试服务信息：</div>
          <div class="test_succ">
            <div class="skcs_jg">
              <img src="@/assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
            </div>
          </div>
        </div>
        <div class="btn_footer">
          <el-button class="reset" v-if="activeBtn == 0" @click="resetSjfw">重置</el-button>
          <el-button :disabled="!resSuccess" class="next" @click="nextJcxx">下一步</el-button>
        </div>
      </block-radius>
    </div>
    <div v-else>
      <block-radius>
        <div class="fwcs_add">
          <el-form ref="form" :model="form" label-width="0px">
            <el-form-item>
              <p class="formname">服务名称：</p>
              <el-input v-model="form.name" placeholder="请输入服务名称，不超过15个字" class="form_in"></el-input>
            </el-form-item>
            <el-form-item>
              <p class="formname">服务描述：</p>
              <el-input
                type="textarea"
                v-model="form.desc"
                placeholder="请输入服务描述，不超过200个字"
                class="form_in"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <p class="formname">服务领域：</p>
              <el-select v-model="form.area" placeholder="请选择" class="form_in">
                <el-option
                  v-for="item in optionsArea"
                  :key="'area' + item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <p class="formname">所属组织：</p>
              <el-select v-model="form.origin" placeholder="请选择" class="form_in">
                <el-option
                  v-for="item in optionsOrganization"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <p class="formname">服务封面：</p>
              <upload-file
                :multiple="false"
                :max="1"
                type="cropper"
                :readOnly="false"
                :list="imgList"
                @getNewList="getNewList"
              ></upload-file>
            </el-form-item>
            <el-form-item>
              <p class="formname">接口编码：</p>
              <el-input v-model="form.code" class="form_in" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
              <p class="formname">开放程度：</p>
              <el-radio-group v-model="form.resource">
                <el-radio :label="1">共享</el-radio>
                <el-radio :label="2">受限</el-radio>
                <el-radio :label="3">敏感</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item class="btn_footer">
              <el-button class="previous" @click="previous">上一步</el-button>
              <el-button class="registe" @click="registe">服务注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </block-radius>
    </div>
  </div>
</template>

<script>
import BlockRadius from "@/components/block-radius";
import CesTable from "@/components/table-um";
import Codes from "@/components/codes";
import uploadFile from "@/components/upload_file";
export default {
  components: {
    BlockRadius,
    CesTable,
    "v-apaas-code": Codes,
    uploadFile
  },
  data: () => ({
    btnList: [
      { icon: "", text: "数据服务", id: 0 },
      { icon: "", text: "时空服务", id: 1 },
      { icon: "", text: "视频服务", id: 2 },
      { icon: "", text: "感知服务", id: 3 },
      { icon: "", text: "综合服务", id: 4 }
    ],
    activeBtn: 0,
    serviceUrl: "",
    select: "GET",
    optionType: [
      { label: "GET", value: "GET" },
      { label: "POST", value: "POST" },
      { label: "PUT", value: "PUT" },
      { label: "DELETE", value: "DELETE" }
    ],
    activeName: 0,
    activeZh: 0,
    sjfwQqcs: [
      {
        label: "请求字段编码",
        prop: "requestEncoding",
        type: "input",
        align: "left"
      },
      { label: "请求值", prop: "requestValue", type: "input", align: "left" }
    ],
    sjfwQqcstx: [
      { label: "字段编码", prop: "name", type: "", align: "left" },
      { label: "示例值", prop: "example", type: "input", align: "left" },
      {
        label: "字段类型",
        prop: "show_type",
        type: "",
        align: "left",
        width: "140"
      },
      {
        label: "字段名称*",
        prop: "label",
        type: "input",
        align: "left"
      },
      {
        label: "是否必须*",
        prop: "is_must",
        type: "select",
        align: "left",
        width: 100,
        selectArr: [
          { label: "是", value: "1" },
          { label: "否", value: "0" }
        ]
      },
      { label: "字段说明", prop: "descript", type: "input", align: "left" },
      {
        label: "操作",
        type: "Button",
        align: "center",
        width: 100,
        btnList: [
          {
            type: "primary-del",
            label: "删除"
          }
        ]
      }
    ],
    sjfwFhcstx: [
      { label: "字段编码", prop: "name", type: "", align: "left" },
      { label: "示例值", prop: "example", type: "input", align: "left" },
      { label: "字段类型", prop: "show_type", type: "", align: "left" },
      {
        label: "字段名称*",
        prop: "label",
        type: "input",
        align: "left"
      },
      { label: "字段说明", prop: "descript", type: "input", align: "left" },
      {
        label: "操作",
        type: "Button",
        align: "center",
        width: 100,
        btnList: [
          {
            type: "primary-del",
            label: "删除"
          }
        ]
      }
    ],
    zhfwQqcsForm: [
      { label: "请求字段编码", prop: "key", type: "input", align: "left" },
      {
        label: "参数类型",
        prop: "field_type",
        type: "select",
        align: "center",
        width: 100,
        selectArr: [
          { label: "Text", value: "text" },
          { label: "File", value: "file" }
        ]
      },
      { label: "请求值", prop: "val", type: "upload", align: "center" },
      {
        label: "操作",
        type: "Button",
        align: "center",
        width: 100,
        btnList: [
          {
            type: "primary-del",
            label: "删除"
          }
        ]
      }
    ],
    datasZhForm: [],
    datasZhwww: [],
    emptyText: "暂无数据",
    resultShow: false,
    resSuccess: false,
    optionsSq: [{ label: "Bearer Token", value: "Bearer" }],
    sqfsVal: "",
    tokenVal: "",
    sjfwQqt: "JSON",
    zhfwQqt: "JSON",
    skfwRadios: [
      "ArcGIS Server Web",
      "文档",
      "KML",
      "OGC(WMS)",
      "OGS(WMTS)",
      "OGS(WFS)",
      "OGS(WCS)"
    ],
    optionsZhyy: [
      { label: "模型算法类", value: 0 },
      { label: "查询验证类", value: 1 },
      { label: "流程类", value: 2 },
      { label: "应用类", value: 3 }
    ],
    zhyyVal: 0,
    jcxxtx: false,
    form: {
      name: "",
      desc: "",
      area: "",
      origin: "1",
      code: "自动生成",
      resource: 0
    },
    imgList: [],
    optionsArea: [
      { label: "经济建设", value: 0 },
      { label: "城市管理", value: 1 },
      { label: "城市建设", value: 2 },
      { label: "道路交通", value: 3 },
      { label: "环境资源", value: 4 },
      { label: "民生服务", value: 5 },
      { label: "空间地理", value: 6 },
      { label: "文化休闲", value: 7 },
      { label: "社会团体", value: 8 },
      { label: "教育机构", value: 9 },
      { label: "其他", value: 10 }
    ],
    optionsOrganization: [],
    datasSj: [],
    datasZh: [],
    datasQqcs: [],
    datasFhcs: [],
    request_fields: [],
    response_fields: [],
    cover: "",
    noSearchUrl: "",
    requestRules: 0,
    responseRules: 0
  }),
  computed: {},
  watch: {},
  methods: {
    clickBtn(val) {
      this.resultShow = false;
      this.activeBtn = val;
      this.select = "GET";
      this.serviceUrl = "";
      this.noSearchUrl = "";
    },
    getUrl(enUrl) {
      let url = decodeURI(enUrl);
      let arr = [];
      if (url.indexOf("?") != -1) {
        this.noSearchUrl = url.substring(0, url.indexOf("?"));
        let search = url.substring(url.indexOf("?") + 1);
        let vars = search.split("&");
        for (let i = 0; i < vars.length; i++) {
          if (vars[i] != "") {
            let pair = vars[i].split("=");
            arr[i] = {};
            arr[i].requestEncoding = pair[0] ? pair[0] : "";
            arr[i].requestValue = pair[1] ? pair[1] : "";
          }
        }
      } else {
        this.noSearchUrl = enUrl;
      }
      this.serviceUrl = url;
      if (this.activeBtn == 0) {
        this.datasSj = arr;
      } else if (this.activeBtn == 4) {
        this.datasZh = arr;
      }
    },
    clickFwcs() {
      let headers = {};
      let requestData = {};
      if (this.activeBtn == 0) {
        if (this.sqfsVal != "") {
          headers.Authorization = [];
          headers.Authorization[0] = this.sqfsVal + " " + this.tokenVal;
        }
        let request = this.$refs.fwcs_sjfw_qq.getTableData();
        for (let i = 0; i < request.length; i++) {
          if (
            request[i] &&
            request[i].requestEncoding &&
            request[i].requestValue &&
            request[i].requestEncoding != "" &&
            request[i].requestValue != ""
          ) {
            if (
              Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
            ) {
              requestData[request[i].requestEncoding] = [];
              requestData[request[i].requestEncoding][0] =
                request[i].requestValue;
            } else {
              requestData[request[i].requestEncoding].push(
                request[i].requestValue
              );
            }
          }
        }
      } else if (this.activeBtn == 1) {
      } else if (this.activeBtn == 4) {
        let request = this.$refs.fwcs_zhfw_qq.getTableData();
        for (let i = 0; i < request.length; i++) {
          if (
            request[i] &&
            request[i].requestEncoding &&
            request[i].requestValue &&
            request[i].requestEncoding != "" &&
            request[i].requestValue != ""
          ) {
            if (
              Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
            ) {
              requestData[request[i].requestEncoding] = [];
              requestData[request[i].requestEncoding][0] =
                request[i].requestValue;
            } else {
              requestData[request[i].requestEncoding].push(
                request[i].requestValue
              );
            }
          }
        }
      }
      let bodys = "";
      let contentType = "";
      if (this.activeBtn == 0) {
        bodys = this.$refs.jsonCodes.getCodesVal();
        contentType = this.sjfwQqt;
      } else if (this.activeBtn == 4) {
        if (this.activeZh == 1) {
          contentType = this.zhfwQqt;
          if (this.zhfwQqt == "JSON") {
            bodys = this.$refs.zhfwJsonCodes.getCodesVal();
          } else if (this.zhfwQqt == "form-data") {
            let request = this.$refs.fwcs_zhfw_qq_form.getTableData();
            bodys = JSON.stringify(request);
          } else if (this.zhfwQqt == "x-www-form-urlencoded") {
            let request = this.$refs.fwcs_zhfw_www.getTableData();
            bodys = JSON.stringify(request);
          }
        }
      }
      let query = {
        method: this.select,
        url: this.serviceUrl,
        headers: headers,
        params: requestData,
        body: bodys,
        content_type: contentType
      };
      this.$api.workbench.fwzcFwcs(query).then(response => {
        console.log(response);
        if (response.data.success == 1) {
          let data = response.data.data;
          if (this.activeBtn == 0 && this.activeName == 1) {
            this.datasQqcs = data.body_fields;
          } else if (this.activeBtn == 0) {
            this.datasQqcs = data.param_fields;
          }
          this.datasFhcs = data.response_fields;
          this.resSuccess = true;
          this.resultShow = true;
        } else {
          this.resSuccess = false;
          this.resultShow = true;
          console.log(response.data.console.error);
        }
      });
    },
    clickTab() {},
    resetSjfw() {
      this.clickFwcs();
    },
    nextJcxx() {
      let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
      let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
      this.requestRules = 0;
      this.responseRules = 0;
      this.checkTable(requestData, 0);
      this.checkTable(responseData, 1);
      if (this.requestRules == 0 && this.responseRules == 0) {
        this.request_fields = requestData;
        this.response_fields = responseData;
        this.jcxxtx = true;
      } else if (this.requestRules != 0) {
        this.$message.error("请完善请求参数信息中的字段名称");
      } else if (this.responseRules != 0) {
        this.$message.error("请完善返回参数信息中的字段名称");
      }
    },
    checkTable(arr, rule) {
      let self = this;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name && arr[i].name != "") {
          if (!arr[i].label || arr[i].label == "") {
            if (rule == 0) {
              this.requestRules = 1;
            } else if (rule == 1) {
              this.responseRules = 1;
            }
            return false;
          }
        }
        if (arr[i].children && arr[i].children.length != 0) {
          self.checkTable(arr[i].children, rule);
        }
      }
    },
    // edit form
    getNewList(val) {
      this.cover = val;
    },
    previous() {
      this.datasQqcs = this.request_fields;
      this.datasFhcs = this.response_fields;
      this.jcxxtx = false;
    },
    registe() {
      let query = {
        name: this.form.name,
        sectors: this.form.area,
        organization: this.form.origin,
        cover: this.cover[0].url,
        openness: this.form.resource,
        descript: this.form.desc,
        data_service_type1: this.activeBtn,
        data_service_type2:
          this.activeBtn == 1
            ? this.skfwRadios
            : this.activeBtn == 4
            ? this.zhyyVal
            : 0,
        encode_method: this.form.code,
        method: this.select,
        url: this.serviceUrl,
        request_fields: this.request_fields,
        response_fields: this.response_fields
      };
      let url = `/apaas/service/v3/service/manager`;
      this.$api.workbench.serviceAdd(query).then(response => {
        if (response.data.success == 1) {
          this.$message.success("服务注册成功");
        } else {
          console.log(response.data.errMsg);
          this.$message.success(response.data.errMsg);
        }
      });
    },
    changeTable(val) {
      let search = "?";
      for (let i = 0; i < val.length; i++) {
        if (val[i].requestEncoding != "") {
          search =
            search +
            val[i].requestEncoding +
            "=" +
            (val[i].requestValue ? val[i].requestValue : "") +
            "&";
        }
      }
      let searchDel = search.substring(0, search.length - 1);
      this.serviceUrl = this.noSearchUrl + searchDel;
    },
    delItemQq(val) {
      let arr = this.$refs.fwcs_sjfw_qqcs.getTableData();
      this.delById(arr, val.id);
    },
    delItemFh(val) {
      let arr = this.$refs.fwcs_sjfw_fhcs.getTableData();
      this.delById(arr, val.id);
    },
    delById(arr, id) {
      let self = this;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
          arr.splice(i, 1);
          return false;
        }
        if (arr[i].children && arr[i].children.length != 0) {
          self.delById(arr[i].children, id);
        }
      }
    },
    changeZhType(val) {
      this.resultShow = false;
      this.resSuccess = false;
    },
    changeZhfwQqt() {}
  },
  mounted() {}
};
</script>

<style scoped>
.fwcs {
  width: 1200px;
  margin: 0 auto;
  margin-top: -157px;
  margin-bottom: 20px;
}
.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;
}
.btn_footer .previous {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
.btn_footer .registe {
  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%;
}
.fwcs_add .formname {
  color: #58617a;
  font-size: 14px;
  margin-left: 10px;
}
.form_in {
  width: 1000px;
}
</style>
<style>
.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>
