<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的服务 / 注册发布的服务 / <span>服务详情</span>
    </p>
    <div class="info_contain">
      <service-header :data="service_header_arr"></service-header>
      <div class="type_box">
        <div class="type_title">
          <div
            v-for="(item, index) in service_arr[now_user]"
            :key="index + 1000"
            class="type_select"
            @click="now_service = index"
            :style="
              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
            "
          >
            {{ item }}
          </div>
        </div>
        <div class="type_box_select">
          <info-list
            :list_arr="now_service == 0 ? list_arr : servicead_arr"
            v-if="now_service == 0 || now_service == 1"
          >
            <table-um
              :headers="header_arr"
              :url="responseParamUrl"
              :paginationShow="true"
              slot="zd_table"
            ></table-um>
            <v-apaas-code :url="codeExampleUrl" slot="zd_code"></v-apaas-code>
          </info-list>
          <div v-show="now_service == 2">
            <p class="service_title"><span></span>服务运行概况</p>
            <div class="service_title_card">
              <nor-card title="服务状态" class="service_card">
                <template>
                  <div style="height:115px;padding-top:10px;">
                    <example-icon style="margin:10px auto;"></example-icon>
                    <p
                      style="color: #58617a;font-size: 16px;text-align:center;"
                    >
                      {{ yx_state.state }}
                    </p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="平均响应时间" class="service_card">
                <template>
                  <div style="height:115px;" class="service_num">
                    <p>{{ yx_state.averageTime }}</p>
                    <p>最大响应时间：{{ yx_state.maxTime }}</p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="吞吐率" class="service_card">
                <template>
                  <div style="height:115px;" class="service_num">
                    <p>{{ yx_state.averageTraffic }}</p>
                    <p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="资源使用" class="service_card">
                <template>
                  <div
                    style="height:115px;padding-top:30px;"
                    class="service_num"
                  >
                    <p>{{ yx_state.memory }}</p>
                  </div>
                </template>
              </nor-card>
            </div>
            <nor-card title="服务调用拓扑图" class="service_card_charts">
              <Topology :datas="datas" />
            </nor-card>
            <p class="service_title"><span></span>服务调用列表</p>
            <table-um
              :headers="header_use_arr"
              url="params_use_arr"
              :paginationShow="true"
            ></table-um>
          </div>
          <div v-show="now_service == 3">
            <p style="color: #8890a7;">服务规格：</p>
            <table-um
              :stripe="true"
              :headers="service_size_arr"
              url="service_size_arr"
            ></table-um>
            <p style="color: #8890a7;">购买方式：</p>
            <p style="color: #242c43;margin:10px 0px;">按月购买&按年购买</p>
            <div class="editbtn" v-if="now_user == 1">编辑</div>
            <p v-if="now_user == 1" style="color: #8890a7;margin-bottom:10px;">
              规格设置：
            </p>
            <table-um
              v-if="now_user == 1"
              :headers="edit_size_arr"
              headerCellClassName="th_pink"
              :border="true"
              :autoAdd="true"
              :couldNotEdit="false"
              :radius="true"
              :isIndex="true"
              url="service_size_arr"
            >
            </table-um>
            <p v-if="now_user == 1" style="color: #8890a7;margin:10px 0;">
              购买方式：
            </p>
            <el-button
              v-if="now_user == 1"
              :type="buy_style == 0 ? 'primary' : ''"
              @click="buy_style = 0"
              >按月购买</el-button
            >
            <el-button
              v-if="now_user == 1"
              :type="buy_style == 1 ? 'primary' : ''"
              @click="buy_style = 1"
              >按年购买</el-button
            >
            <div class="savebtn" v-if="now_user == 1">
              <el-button>保存</el-button>
              <el-button>取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <dialog-action ref="myConfirm"></dialog-action>
  </div>
</template>

<script>
import infoList from "../components/infoList";
import tableUm from "../components/table-um";
import codes from "@/components/codes";
import norCard from "@/components/card";
import exampleIcon from "@/pages/example_icon";
import Topology from "@/components/topology.vue";
import serviceHeader from "../components/service-header";
import dialogAction from "@/components/dialog-action";
import { getRole } from "../utils/common";
export default {
  components: {
    infoList,
    tableUm,
    "v-apaas-code": codes,
    norCard,
    exampleIcon,
    Topology,
    serviceHeader,
    dialogAction,
  },
  data() {
    return {
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      buy_style: 0,
      responseParamUrl: "",
      codeExampleUrl: "",
      yx_state: {
        state: "",
        averageTime: "",
        maxTime: "",
        averageTraffic: "",
        maxTraffic: "",
        memory: "",
      },
      service_arr: [
        ["服务基本信息", "接口详细信息", "服务运行状态"],
        ["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
        ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
      ],
      service_header_arr: {
        name: "",
        first: [],
        second: [],
        fixed: true,
      },
      now_service: 0,
      datas: {},
      header_arr: [
        {
          prop: "zdmc",
          label: "字段名称",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "zdbm",
          label: "字段编码",
          width: "100px",
          align: "center",
        },
        {
          prop: "zdlx",
          label: "字段类型",
          width: "100px",
          align: "center",
        },
        {
          prop: "zdsm",
          label: "字段说明",
          minWidth: "30%",
          align: "left",
        },
        {
          prop: "zdsl",
          label: "字段示例数值",
          width: "120px",
          align: "left",
        },
      ],
      header_use_arr: [
        {
          prop: "dydw",
          label: "调用单位",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "dyr",
          label: "调用人",
          width: "100px",
          align: "center",
        },
        {
          prop: "dyyw",
          label: "调用业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "ywxt",
          label: "业务系统网址",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "cjms",
          label: "场景描述",
          minWidth: "40%",
          align: "left",
        },
        {
          prop: "sqsj",
          label: "申请调用时间",
          width: "160px",
          align: "right",
        },
      ],
      service_size_arr: [
        {
          prop: "fwcs",
          label: "访问次数（次/日）",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "fwl",
          label: "访问量（PV/日）",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "ggsm",
          label: "规格说明",
          minWidth: "33.33%",
          align: "left",
        },
      ],
      edit_size_arr: [
        {
          prop: "fwcs",
          label: "访问次数（次/日）",
          minWidth: "33.33%",
          align: "center",
          type: "select",
          selectArr: [
            {
              label: 10,
              value: 10,
            },
            {
              label: 20,
              value: 20,
            },
            {
              label: 30,
              value: 30,
            },
            {
              label: 40,
              value: 40,
            },
            {
              label: 50,
              value: 50,
            },
            {
              label: 60,
              value: 60,
            },
            {
              label: 70,
              value: 70,
            },
            {
              label: 80,
              value: 80,
            },
            {
              label: 90,
              value: 90,
            },
            {
              label: 100,
              value: 100,
            },
            {
              label: 200,
              value: 200,
            },
            {
              label: 300,
              value: 300,
            },
            {
              label: 400,
              value: 400,
            },
            {
              label: 500,
              value: 500,
            },
          ],
        },
        {
          prop: "fwl",
          label: "访问量（PV/日）",
          minWidth: "33.33%",
          align: "center",
          type: "select",
          selectArr: [
            {
              label: 100,
              value: 100,
            },
            {
              label: 200,
              value: 200,
            },
            {
              label: 300,
              value: 300,
            },
            {
              label: 400,
              value: 400,
            },
            {
              label: 500,
              value: 500,
            },
            {
              label: 600,
              value: 600,
            },
            {
              label: 700,
              value: 700,
            },
            {
              label: 800,
              value: 800,
            },
            {
              label: 900,
              value: 900,
            },
            {
              label: 1000,
              value: 1000,
            },
            {
              label: 2000,
              value: 2000,
            },
            {
              label: 3000,
              value: 3000,
            },
            {
              label: 4000,
              value: 4000,
            },
            {
              label: 5000,
              value: 5000,
            },
          ],
        },
        {
          prop: "ggsm",
          label: "规格说明",
          minWidth: "33.33%",
          align: "left",
          type: "input",
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 140,
          btnList: [
            {
              type: "action-delete",
              label: "删除",
              local: true,
            },
          ],
        },
      ],
      servicead_arr: [
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "请求参数：",
          info: "",
        },
        {
          title: "请求示例：",
          info: "",
        },
        {
          title: "编码格式：",
          info: "",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "zd_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "zd_code",
        },
      ],
      list_arr: [],
    };
  },
  watch: {
    now_service(n, o) {
      if (n == 2) {
        this.getData();
      }
    },
  },
  created() {
    this.now_user = this.$store.state.role;
    getRole().then((data) => {
      this.now_user = data;
      this.$store.commit("rolefun", data);
      this.getServiceInfo();
      this.getInterfaceInfo();
      this.getServiceBaseInfo();
      this.getServiceyxztInfo();
    });
  },
  mounted() {},
  methods: {
    getData() {
      let url = "/static/antv.json";
      this.$http
        .get(url)
        .then((response) => {
          this.datas = response.data.elements;
        })
        .catch(function(response) {});
    },
    getServiceInfo() {
      this.$http
        .get("/static/servicedetail1.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(this.service_header_arr, "name", data.serviceInfo.name);
          this.$set(this.service_header_arr, "first", data.serviceInfo.first);
          this.$set(this.service_header_arr, "second", data.serviceInfo.second);
        })
        .catch(function(response) {});
    },
    getInterfaceInfo() {
      this.$http
        .get("/static/servicedetail1.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(
            this.servicead_arr[0],
            "info",
            data.serviceinterfaceinfo.type
          );
          this.$set(
            this.servicead_arr[1],
            "info",
            data.serviceinterfaceinfo.requestParam
          );
          this.$set(
            this.servicead_arr[2],
            "info",
            data.serviceinterfaceinfo.example
          );
          this.$set(
            this.servicead_arr[3],
            "info",
            data.serviceinterfaceinfo.format
          );
          this.responseParamUrl = data.serviceinterfaceinfo.responseParamUrl;
          this.codeExampleUrl = data.serviceinterfaceinfo.codeExampleUrl;
        })
        .catch(function(response) {});
    },
    getServiceBaseInfo() {
      this.$http
        .get("/static/servicedetail1.json")
        .then((response) => {
          let data = response.data.data;
          this.list_arr = data.servicebaseinfo;
        })
        .catch(function(response) {});
    },
    getServiceyxztInfo() {
      this.$http
        .get("/static/servicedetail1.json")
        .then((response) => {
          console.log(response);
          let data = response.data.data;
          this.yx_state = data.serviceyxzt;
        })
        .catch(function(response) {});
    },
  },
};
</script>

<style>
.savebtn .el-button {
  float: right;
  margin-left: 20px;
  letter-spacing: 2px;
}
.savebtn .el-button:nth-of-type(1) {
  background-color: #0f2683;
  color: #f8f9fd;
}
.savebtn .el-button:nth-of-type(2) {
  background-color: #c3caf8;
  color: #0f2683;
}
</style>
<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 20px;
  height: calc(100% - 55px);
}
.info_contain {
  padding: 25px 20px;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
  min-height: calc(100% - 20px);
  margin-bottom: 20px;
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.type_box {
  width: 100%;
}
.type_title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  border-bottom: 2px solid #f4f7fc;
}
.type_select {
  float: left;
  width: auto;
  margin-right: 40px;
  height: 65px;
  cursor: pointer;
}
.type_box_select {
  padding: 30px 10px 10px 10px;
  width: 100%;
}
.service_title {
  font-size: 16px;
  font-weight: bold;
  color: #58617a;
  text-align: left;
  height: 40px;
  line-height: 40px;
  margin-top: -10px;
  margin-bottom: 20px;
}
.service_title span {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  float: left;
  margin-top: 13px;
  margin-right: 15px;
}
.service_title_card {
  width: 100%;
  overflow: hidden;
}
.service_card {
  width: calc((100% - 120px) / 4);
  margin-right: 40px;
  float: left;
}
.service_title_card .service_card:nth-last-of-type(1) {
  margin-right: 0px;
}
.service_num {
  text-align: center;
  padding-top: 10px;
}
.service_num p:nth-of-type(1) {
  font-size: 36px;
  color: #3f4f9c;
  margin-bottom: 10px;
}
.service_num p:nth-of-type(2) {
  font-size: 16px;
  color: #58617a;
}
.service_card_charts {
  width: 100%;
  margin-top: 30px;
}
.editbtn {
  width: 124px;
  height: 44px;
  line-height: 44px;
  background-color: #0f2683;
  border-radius: 8px;
  font-size: 16px;
  color: #f8f9fd;
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px;
}
.savebtn {
  margin-top: 50px;
  overflow: hidden;
}
</style>
