<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" :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="params_arr" :paginationShow="true" slot="zd_table"></table-um>
                      <v-apaas-code url="/static/data.json" 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;">运行中</p>
                                </div>
                            </template>
                        </nor-card>
                        <nor-card title="平均响应时间" class="service_card">
                            <template>
                                <div style="height:115px;" class="service_num">
                                    <p>1200ms</p> 
                                    <p>最大响应时间：180000ms</p>
                                </div>
                            </template>
                        </nor-card>
                        <nor-card title="吞吐率" class="service_card">
                            <template>
                                <div style="height:115px;" class="service_num">
                                    <p>39dps</p> 
                                    <p>最大吞吐率：120dps</p> 
                                </div>
                            </template>
                        </nor-card>
                        <nor-card title="资源使用" class="service_card">
                            <template>
                                <div style="height:115px;padding-top:30px;" class="service_num">
                                    <p>300MB</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>
          </div>
      </div>
  </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'
export default {
  components:{
      infoList,
      tableUm,
      "v-apaas-code": codes,
      norCard,
      exampleIcon,
      Topology,
      serviceHeader
  },
  data() {
    return {
        service_arr:['服务基本信息','接口详细信息','服务运行状态'],
        service_header_arr:{
            name:'地市GDP基础数据',
            first:[
                {
                    name:'服务类型',
                    text:'数据服务',
                },
                {
                    name:'申请次数',
                    text:39,
                },
                {
                    name:'调用次数',
                    text:319,
                },
                {
                    name:'服务状态',
                    text:'上架中',
                },
            ],
            second:[
                {
                    name:'服务接口地址',
                    text:'http://localhost:8084/cszh/rest/yxtz/zdrylx?code=430100000000',
                },
            ],
            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',
            },
        ],
        servicead_arr:[
            {
                title:'请求方式：',
                info:'get'
            },
            {
                title:'请求参数：',
                info:'无请求参数'
            },
            {
                title:'请求示例：',
                info:'无请求示例'
            },
            {
                title:'编码格式：',
                info:'UTF-8'
            },
            {
                title:'响应参数：',
                info:'',
                type:'solt',
                solt_name:'zd_table'
            },
            {
                title:'响应示例：',
                info:'',
                type:'solt',
                solt_name:'zd_code'
            },
            
        ],
        list_arr:[
            {
                title:'服务描述：',
                info:'提供贵州省2019年各市州的GDP数据。'
            },
            {
                title:'服务领域：',
                info:'经济建设'
            },
            {
                title:'所属组织：',
                info:'北京比格大数据有限公司'
            },
            {
                title:'开放程度：',
                info:'共享'
            },
            {
                title:'接口编码：',
                info:'chart'
            },
            {
                title:'注册发布时间：',
                info:'2019-02-17 21:09:23'
            },
        ],
    }
  },
  watch:{
      now_service(n,o){
          if(n == 2){
              this.getData()
          }
      }
  },
  mounted(){
      console.log(this.$store.state.role);
  },
  methods:{
      getData() {
      let url = "./static/antv.json";
      this.$http
        .get(url)
        .then(response => {
          this.datas = response.data.elements;
        })
        .catch(function(response) {
          this.error = true;
        });
    },
  }
};
</script>

<style scoped>
.detail_contain{
    width: 100%;
    padding: 0 20px;
    margin-bottom: 20px;
}
.info_contain{
    padding: 25px 20px;
    background-color: #fff;
    width: 100%;
    box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
	border-radius: 12px;
}
.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;
}
</style>

