<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的服务 /
      {{
        now_user == 0 || now_user == 4
          ? "注册发布的服务"
          : now_user == 1
          ? "组织服务管理"
          : "平台服务管理"
      }}
      /
      <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' } : {}
            "
            v-if="index<3||in_origin_ser"
          >
            {{ 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&&!workflows_id&&!perception_in&&!process_in_up)"
          >
            <table-um
              :headers="req_header_arr"
              :datas="req_data"
              :stripe="true"
              slot="req_table"
            ></table-um>
            <v-apaas-code :datas="req_code_arr" slot="req_code" :readOnly="true"></v-apaas-code>
            <table-um
              :headers="res_header_arr"
              :datas="res_data"
              :stripe="true"
              slot="res_table"
            ></table-um>
            <v-apaas-code :datas="res_code_arr" slot="res_code" :readOnly="true"></v-apaas-code>
          </info-list>
          <p v-if="now_service == 1&&(workflows_id&&!process_in_up)">
            流程服务接口说明见文档中心流程服务接口文档
          </p>
          <info-list :list_arr="process_in_up_arr" v-if="now_service == 1&&!workflows_id&&process_in_up">
            <div slot="service_port" class="service_port">
              <el-select v-model="port_select" placeholder="" @change="change_port">
                <el-option
                  v-for="item in port_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <div class="port_bg_box" style="padding:20px;background-color:#f8f9fd;margin-top:10px;">
                <info-list :list_arr="port_solt_arr">
                  <table-um
                    :headers="req_solt_header_arr"
                    :datas="req_solt_data"
                    :stripe="true"
                    slot="request_table"
                  ></table-um>
                  <v-apaas-code :datas="req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
                  <table-um
                    :headers="res_solt_header_arr"
                    :datas="res_solt_data"
                    :stripe="true"
                    slot="response_table"
                  ></table-um>
                  <v-apaas-code :datas="res_solt_code_arr" slot="response_code" :readOnly="true"></v-apaas-code>
                </info-list>
              </div>
            </div>
          </info-list>
          <info-list :list_arr="gz_solt_arr" v-if="now_service == 1&&perception_in">
            <table-um
              :headers="req_gz_header_arr"
              :datas="req_gz_solt_data"
              :stripe="true"
              slot="request_table"
            ></table-um>
            <v-apaas-code :datas="req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
            <table-um
              :headers="res_gz_header_arr"
              :datas="res_gz_solt_data"
              :stripe="true"
              slot="response_table"
            ></table-um>
            <v-apaas-code :datas="res_solt_code_arr" slot="response_code" :readOnly="true"></v-apaas-code>
          </info-list>
          <div v-show="now_service == 2">
            <p class="service_title"><span></span>服务运行概况</p>
            <div class="service_port" style="margin-bottom:20px;" v-if="process_in_up">
              <el-select v-model="port_select_server" placeholder="" ref="select_icon" @change="iconChange">
                <el-option
                  v-for="item in port_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value+','+item.able">
                  <span v-if="!item.able" :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',marginLeft:'-10px',borderRadius:'4px',backgroundColor:'#e15260',lineHeight:'18px',textAlign:'center'}">故障</span>
                  <span v-else :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',borderRadius:'4px',marginLeft:'-10px',}"></span>
                  {{item.label}}
                </el-option>
              </el-select>
            </div>
            <div>
              <div class="service_title_card">
                <nor-card title="服务状态" class="service_card">
                  <template>
                    <div style="height:115px;padding-top:10px;">
                      <waveIcon
                        :state="yx_state.state"
                        style="margin:10px auto;"
                      ></waveIcon>
                      <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>
            </div>
            <p class="service_title"><span></span>服务调用列表</p>
            <table-um
              v-if="!process_in_up&&!perception_in"
              :headers="header_use_arr"
              :datas="service_use_arr"
            ></table-um>
            <table-um
              v-if="process_in_up"
              :headers="header_process_arr"
              :datas="service_use_arr"
            ></table-um>
            <table-um
              v-if="perception_in"
              :headers="header_gz_process_arr"
              :datas="service_use_arr"
            ></table-um>
            <list-pagination
              :total="listTotal"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              :current-page="currentPage"
              @size-change="changePageSize"
              @current-change="changeCurrentPage"
            ></list-pagination>
          </div>
          <div v-show="now_service == 3">
            <p style="color: #8890a7;">服务规格：</p>
            <table-um
              :stripe="true"
              :headers="service_size_arr"
              :datas="service_size_data"
            ></table-um>
            <!-- <p style="color: #8890a7;">购买方式：</p>
            <p style="color: #242c43;margin:10px 0px;">
              {{
                buy_type == 1
                  ? "按月购买"
                  : buy_type == 2
                  ? "按年购买"
                  : "按月购买&按年购买"
              }}
            </p> -->
            <div
              class="editbtn"
              v-if="now_user == 1"
              @click="sizeset_flag = true"
            >
              编辑
            </div>
            <p
              v-if="now_user == 1 && sizeset_flag"
              style="color: #8890a7;margin-bottom:10px;"
            >
              规格设置：
            </p>
            <table-um
              v-if="now_user == 1 && sizeset_flag"
              :headers="edit_size_arr"
              headerCellClassName="th_pink"
              :border="true"
              :autoAdd="true"
              :couldNotEdit="false"
              :radius="true"
              :isIndex="true"
              :limitEditLength="2"
              :datas="service_size_data"
              @changeTable="now_size_data"
            ></table-um>
            <!-- <p
              v-if="now_user == 1 && sizeset_flag"
              style="color: #8890a7;margin:10px 0;"
            >
              购买方式：
            </p>
            <el-button
              v-if="now_user == 1 && sizeset_flag"
              :type="buy_style.indexOf(1) !== -1 ? 'primary' : ''"
              @click="change_buy(1)"
              >按月购买</el-button
            >
            <el-button
              v-if="now_user == 1 && sizeset_flag"
              :type="buy_style.indexOf(2) !== -1 ? 'primary' : ''"
              @click="change_buy(2)"
              >按年购买</el-button
            > -->
            <div class="savebtn" v-if="now_user == 1 && sizeset_flag">
              <el-button @click="change_service_size">保存</el-button>
              <el-button @click="sizeset_flag = false">取消</el-button>
            </div>
          </div>
          <div v-show="now_service == 4">
            <info-list :list_arr="trans_log_arr">
              <div slot="trans_all" class="trans_all">
                <div class="trans_box">
                  <div class="trans_middle">
                    <img src="../../../assets/imgs/ic_shouyizonge.png" alt="">
                    <p>服务收益总额</p>
                    <p>{{trans_all_obj.all}} </p>
                    <span>金币</span>
                  </div>
                </div>
                <div class="trans_box">
                  <div class="trans_middle">
                    <img src="../../../assets/imgs/ic_jiaoyizs.png" alt="">
                    <p>交易总数</p>
                    <p>{{trans_all_obj.times}} </p>
                    <span>笔</span>
                  </div>
                </div>
                <div class="trans_box">
                  <div class="trans_middle">
                    <img src="../../../assets/imgs/ic_yuejiaoyi.png" alt="">
                    <p>本月交易总数</p>
                    <p>{{trans_all_obj.month}} </p>
                    <span>笔</span>
                  </div>
                </div>
              </div>
              <div slot="trans_log" class="trans_log">
                <table-um
                  :headers="trans_log_header"
                  :datas="trans_log_data"
                ></table-um>
                <list-pagination
                  :total="translistTotal"
                  :page-sizes="pageSizes"
                  :page-size="transpageSize"
                  :current-page="transcurrentPage"
                  @size-change="transchangePageSize"
                  @current-change="transchangeCurrentPage"
                ></list-pagination>
              </div>
            </info-list>
          </div>
        </div>
      </div>
    </div>
   
    <dialog-action ref="myConfirm"></dialog-action>
  </div>
</template>

<script>
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
import codes from "@/components/general/codes";
import norCard from "@/components/card";
import waveIcon from "@/components/general/wave_icon";
import Topology from "@/components/topology.vue";
import serviceHeader from "@/components/service-header";
import ListPagination from "@/components/comments-pagination";
import dialogAction from "@/components/dialog-action";
import { getRole, formatDateTime_date } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
export default {
  components: {
    infoList,
    tableUm,
    "v-apaas-code": codes,
    norCard,
    waveIcon,
    Topology,
    serviceHeader,
    dialogAction,
    ListPagination,
  },
  data() {
    return {
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      process_in_up:false,//是否是服务注册产生的流程服务
      perception_in:false,//是否是感知服务
      in_origin_ser:false,//是否是组织内部的服务
      buy_style: [1],
      // editstr:'<h1>1221312</h1>wuqwyequ827812731731',
      listTotal: 0,
      currentPage: 1,
      pageSize: 10,
      translistTotal: 0,
      transcurrentPage: 1,
      transpageSize: 10,
      pageSizes: [10, 50, 100],
      responseParamUrl: "",
      codeExampleUrl: "",
      port_select_server:'',
      yx_state: {
        state: "",
        averageTime: "",
        maxTime: "",
        averageTraffic: "",
        maxTraffic: "",
        memory: "",
      },
      port_select:'',
      service_use_arr: [],
      req_solt_data:[],
      res_solt_data:[],
      req_gz_solt_data:[],
      res_gz_solt_data:[],
      service_gz_process_arr:[],
      trans_all_obj:{
        all:0,
        times:0,
        month:0,
      },
      trans_log_arr:[
        {
          title: "服务交易概览",
          info: "",
          prop:'title',
          type: "solt",
          solt_name: "trans_all",
        },
        {
          title: "服务交易记录",
          info: "",
          prop:'title',
          type: "solt",
          solt_name: "trans_log",
        },
      ],
      trans_log_header:[
        {
          prop: "department_name",
          label: "申请单位",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "system_name",
          label: "业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "apply_username",
          label: "申请人",
          minWidth: "20%",
          align: "center",
        },
        {
          prop: "gg",
          label: "规格",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "duration_name",
          label: "购买时长",
          width: "110px",
          align: "center",
        },
        {
          prop: "total_money",
          label: "订单总价",
          width: "150px",
          align: "center",
        },
        {
          prop: "trade_time",
          label: "交易时间",
          width: "160px",
          align: "center",
        },
      ],
      trans_log_data:[], 
      res_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_gz_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      res_gz_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      req_data: [], // 请求参数
      req_code_arr: "", // 请求示例
      res_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          minWidth: "20%",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          width: "100px",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          minWidth: "30%",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          width: "120px",
          align: "center",
          width: 240,
        },
      ], // 响应参数-header
      res_data: [], // 响应参数
      res_code_arr: "", // 响应示例
      req_solt_code_arr:'11',
      res_solt_code_arr:'11',
      buy_type: "",
      workflows_id:'',//判断是否是流程服务
      sizeset_flag: false, //规格设置是否显示
      service_arr: [
        ["服务基本信息", "接口详细信息", "服务运行状态"],
        ["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则","服务交易记录"],
        ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格","服务交易记录"],
      ],
      service_size_data: [], //服务规格数组
      service_header_arr: {
        id: "",
        isMap: false,
        isProcess: false,
        url: "",
        name: "",
        first: [
          {
            name: "服务类型",
            text: "",
          },
          {
            name: "申请次数",
            text: "",
          },
          {
            name: "调用次数",
            text: "",
          },
          {
            name: "服务状态",
            text: "",
          },
        ],
        second: [
          {
            name: "服务接口地址",
            text: "",
          },
        ],
        fixed: true,
        fixedurl: this.$route.path.replace("servicedetail", "serviceedit"),
      },
      now_service: 0,
      datas: {},
      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: "sqgg",
          label: "申请规格",
          minWidth: "40%",
          align: "center",
        },
        {
          prop: "sqsc",
          label: "申请时长",
          minWidth: "40%",
          align: "center",
        },
        {
          prop: "sqsj",
          label: "申请调用时间",
          width: "160px",
          align: "right",
        },
      ],
      header_gz_process_arr: [
        {
          prop: "dyyw",
          label: "调用业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "dydw",
          label: "调用单位",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "ywxt",
          label: "业务系统网址",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "cjms",
          label: "场景描述",
          minWidth: "40%",
          align: "left",
        },
        {
          prop: "sqgg",
          label: "申请规格",
          minWidth: "40%",
          align: "center",
        },
        {
          prop: "sqsc",
          label: "申请时长",
          minWidth: "40%",
          align: "center",
        },
        {
          prop: "sqsj",
          label: "申请调用时间",
          width: "160px",
          align: "right",
        },
      ],
      header_process_arr: [
        {
          prop: "dydw",
          label: "调用单位",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "dyyw",
          label: "调用业务系统",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "ywxt",
          label: "业务系统网址",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "jkmc",
          label: "调用接口名称",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "jkdz",
          label: "调用接口地址",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "state",
          label: "调用状态",
          minWidth: "20%",
          align: "center",
        },
        {
          prop: "time",
          label: "调用时间",
          minWidth: "20%",
          align: "center",
        },
        {
          prop: "count",
          label: "总调用次数",
          minWidth: "20%",
          align: "center",
        }
      ],
      service_process_arr:[
        {
          dydw:'比格大数据',
          dyyw:'apaas',
          ywxt:'https:www.apaas.com',
          jkmc:'地图服务',
          jkdz:'https://www.apaas.com/map',
          state:'成功',
          time:'2020-10-20 10:05:11',
          count:125
        }
      ],
      service_size_arr: [
        {
          prop: "index",
          label: "序号",
          width: "100px",
          align: "center",
        },
        {
          prop: "spcs_type",
          label: "规格类型",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "gg",
          label: "规格",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "time",
          label: "购买时长",
          width: "200px",
          align: "center",
        },
        {
          prop: "descript",
          label: "规格说明",
          minWidth: "33.33%",
          align: "left",
        },
      ],
      edit_size_arr: [
        {
          prop: "spcs_type",
          label: '规格类型<span title="计次收费规格：仅依据服务调用次数进行收费，不限时长。&#10;时长收费规格：按月为时间单位进行收费，每月使用次数不限。"><img style="margin-left:5px;vertical-align:-3px;" src="'+require('../../../assets/imgs/money_table_ico.png')+'" alt=""></span>',
          width: "180px",
          align: "center",
          type: "select",
          selectArr:[
            {
              label:'计次收费规格',
              value:1
            },
            {
              label:'时长收费规格',
              value:2
            }
          ]
        },
        {
          prop: "money",
          label: "价格/金币",
          width: "200px",
          align: "center",
          type: "inputMoney",
        },
        {
          prop: "pv",
          label: '调用次数<span title="该规格提供的服务调用次数。"><img style="margin-left:5px;vertical-align:-3px;" src="'+require('../../../assets/imgs/money_table_ico.png')+'" alt=""></span>',
          width: "150px",
          align: "center",
          type: "input",
        },
        {
          prop: "d_price",
          label: "单价",
          width: "150px",
          align: "left",
        },
        {
          prop: "time",
          label: "时长",
          width: "150px",
          align: "left"
        },
        {
          prop: "descript",
          label: "规格说明",
          minWidth: "33.33%",
          align: "left",
          type:'input'
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 140,
          btnList: [
            {
              type: "action-delete",
              label: "删除",
              local: true,
            },
          ],
        },
      ],
      size_arr_down: [],
      servicead_arr: [
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "req_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "req_code",
        },
        {
          title: "编码格式：",
          info: "",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "res_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "res_code",
        },
      ],
      process_in_up_arr:[
        {
          title: "接口文档：",
          info: "",
          url: "",
          type: "down",
        },
        {
          title: "服务接口：",
          info: "",
          type: "solt",
          solt_name: "service_port",
        }
      ],
      port_solt_arr:[
        {
          title: "服务地址：",
          info: "",
        },
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "编码格式：",
          info: "get",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "request_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "request_code",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "response_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "response_code",
        },
      ],
      gz_solt_arr:[
        {
          title: "请求方式：",
          info: "12123",
        },
        {
          title: "编码格式：",
          info: "get",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "request_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "request_code",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "response_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "response_code",
        },
      ],
      port_options:[],
      service_type_arr: [
        "数据服务",
        "时空服务",
        "视频服务",
        "感知服务",
        "综合应用",
      ],
      scrvice_area_arr: [
        "经济建设",
        "城市建设",
        "道路交通",
        "环境资源",
        "服务民生",
        "空间地理",
        "文化休闲",
        "社会团体",
        "教育机构",
        "其他",
      ],
      open_arr: ["共享", "受限", "敏感"],
      service_state_arr: ["已下架", "已上架", "审核中", "审核中"],
      request_arr: ["GET", "POST", "PUT", "DELETE"],
      list_arr: [
        {
          title: "服务描述：",
          info: "",
        },
        {
          title: "服务领域：",
          info: "",
        },
        {
          title: "所属组织：",
          info: "",
        },
        {
          title: "开放程度：",
          info: "",
        },
        {
          title: "接口编码：",
          info: "",
        },
        {
          title: "注册发布时间：",
          info: "",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"]),
  },
  watch: {
    now_service(n, o) {
      if (n == 2) {
        this.getData();
      }
    }
  },
  created() {
    if (this.userInfo) {
      this.now_user = this.level;
      if(this.now_user==1||this.now_user==2){
        this.in_origin_ser = true
      }else{
         this.in_origin_ser = false
      }
    } else {
      this.getCurrentUser();
    }
    this.getServiceInfo();
    this.getServiceyxztInfo();
    this.get_use_list();
  },
  mounted() {},
  methods: {
    change_port(val){
      this.port_options.forEach(e => {
        if(e.value == val){
          this.$set(this.port_solt_arr[0],'info',e.value)
          this.$set(this.port_solt_arr[1],'info',e.req_type)
          this.$set(this.port_solt_arr[2],'info',e.encode_method)
          this.req_solt_data = e.req_fields
          this.res_solt_data = e.res_fields
          this.req_solt_code_arr = e.req_fields_example
          this.res_solt_code_arr = e.res_fields_example
        }
      });
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.get_use_list();
    },
    transchangePageSize(value) {
      this.transpageSize = value;
      this.transcurrentPage = 1;
      this.get_trans_data()
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      this.get_use_list();
    },
    transchangeCurrentPage(value) {
      this.transcurrentPage = value;
      this.get_trans_data()
    },
    iconChange (val) {
      // el-select实际上是两层div包裹的input
      this.port_select = val;
      // 获取当前el-select标签第一层div
      const dom = this.$refs['select_icon'].$el;
      if(dom.children[0].children[0].tagName == 'SPAN'){
        dom.children[0].children[0].remove()
      }
      // 创建需要添加到其中的标签 并填充内容
      const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
      svgDom.setAttribute('class', 'el-input__prefix');
      if(val.split(',')[1]=='true'){
        svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:0px;height:18px;border-radius:4px;"></span>';
      }else{
        svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:10px;margin-left:10px;display:inline-block;width:36px;color:#fff;height:18px;border-radius:4px;background-color:#e15260;">故障</span>';
      }
      // 将创建的标签添加到父节点(第二层div)
      dom.children[0].appendChild(svgDom);
      // 得到el-select中的input标签
      const inputDom = dom.children[0].children[0];
      inputDom.setAttribute('style', 'padding-left: 60px;');
      // 将添加的标签放到input前面
      dom.children[0].insertBefore(svgDom, inputDom);

      this.getData()
    },
    get_use_list() {
      this.service_use_arr = [];
      this.$http
        .get(
          `/apaas/service/v3/service/manager/service/applys?service_id=${this.$route.params.id}&page=${this.currentPage}&size=${this.pageSize}`
        )
        .then((response) => {
          console.log(response);
          if (response.data.success) {
            this.listTotal = response.data.data.total;
            let data = response.data.data.data || [];

            data.forEach((e) => {
              this.service_use_arr.push({
                dydw: e.apply_org_name,
                dyr: e.apply_user_info.user_name,
                dyyw: e.business_name,
                ywxt: e.business_url,
                cjms: e.scene,
                sqsj: e.apply_time.split("+")[0].replace("T", " "),
                sqgg: e.request_spcs
                  ? `访问次数：${e.request_spcs.count}/日 访问量：${e.request_spcs.pv}/日`
                  : "",
                sqsc: e.duration + ["", "个月", "年"][e.duration_unit || 0],
                jkmc:e.req_name||'',
                jkdz:e.req_url||'',
                state:(e.req_status||e.req_status==0)?e.req_status==-1?'失败':'成功':'',
                time:e.last_request_time?e.last_request_time.split("+")[0].replace("T", " "):'-',
                count:e.req_num||'-'
              });
            });
          }
        })
        .catch(function(response) {});
    },
    change_buy(val) {
      if (this.buy_style.indexOf(val) !== -1) {
        this.buy_style.splice(this.buy_style.indexOf(val), 1);
      } else {
        this.buy_style.push(val);
      }
    },
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          this.$store.commit("userInfofun", data.data);
          this.now_user = this.level;
          if(this.now_user==1||this.now_user==2){
            this.in_origin_ser = true
          }else{
             this.in_origin_ser = false
          }
          console.log(this.level);
        } else {
          console.log(data.errMsg);
        }
      });
    },
    getData() {
      console.log(this.namespace)
      this.$api.workbench.getServiceRunningTopology({ namespace: this.namespace }).then((response) => {
        this.datas = response.data.elements;
      });
    },
    get_trans_data(){
      this.$http
        .get(
          `/apaas/service/v3/service/manager/service/trade/list?page=${this.currentPage}&size=${this.pageSize}&service_id=${this.$route.params.id}`
        ).then(res=>{
          console.log(res);
          // listTotal: 0,
          if(res.data.success){
            this.listTotal = res.data.total
            var temp = res.data.data||[]
            temp.forEach(e => {
              if(e.spcs_type==1){
                e.duration_name = '不限时长'
                e.gg = `${e.spcs_count}次/ ${e.single_money} 元`
              }else if(e.spcs_type==2){
                e.duration_name = e.duration+'月'
                e.gg = `${e.single_money} 元/月`
              }
            });
            this.trans_log_data = temp
          }
        })
    },
    getServiceInfo() {
      this.$http
        .get(
          "/apaas/service/v3/service/manager?service_id=" +
            this.$route.params.id
        )
        .then((response) => {
          if (response.data.success === 1) {
            let data = response.data.data;
            this.namespace = data.urls[0].namespace;
            if(data.workflows_id){
              this.workflows_id = data.workflows_id
            }else{
              this.workflows_id = false
            }
            this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
            this.$set(this.service_header_arr, "workflows_id", data.workflows_id); // 时空服务id
            this.$set(
              this.service_header_arr,
              "isMap",
              data.data_service_type1 === 6
            );
            this.$set(
              this.service_header_arr,
              "isProcess",
              data.data_service_type2 === 24
            );
            this.$set(this.service_header_arr, "name", data.name);
            this.$set(
              this.service_header_arr["first"][0],
              "text",
              data.data_service_type1_name
            );
            this.$set(
              this.service_header_arr["first"][1],
              "text",
              data.apply_num
            );
            this.$set(
              this.service_header_arr["first"][2],
              "text",
              data.request_count
            );
            this.$set(
              this.service_header_arr["first"][3],
              "text",
              this.service_state_arr[data.state]
            );
            this.$set(
              this.service_header_arr["second"][0],
              "text",
              data.req_url
            );
            this.$set(this.service_header_arr, "url", data.cover);
            if (this.now_user == 1) {
              this.$set(this.service_header_arr, "fixed", false);
            }
            this.$set(
              this.service_header_arr,
              "fixedurl",
              this.$route.path.replace("servicedetail", "serviceedit")
            );
            this.trans_all_obj={
              all:data.sale_total_money,
              times:data.sale_total,
              month:data.sale_month_total,
            }
            //判断是否是服务注册出来的流程服务
            if(data.data_service_type2 == 24&&data.workflows_id==0){
              this.process_in_up = true
              this.$set(this.process_in_up_arr[0],'info',data.doc_file.split('/')[data.doc_file.split('/').length-1])
              this.$set(this.process_in_up_arr[0],'url',data.doc_file)
              var temp_port_arr = []
              data.urls.forEach(e => {
                temp_port_arr.push({
                  label:e.req_name,
                  value:e.req_url,
                  able:e.state==-1?false:true,
                  ...e
                })
              });
              this.port_options = temp_port_arr
              if(this.port_options[0]){
                this.port_select = this.port_options[0].value
                this.$set(this.port_solt_arr[0],'info',this.port_options[0].value)
                this.$set(this.port_solt_arr[1],'info',this.port_options[0].req_type)
                this.$set(this.port_solt_arr[2],'info',this.port_options[0].encode_method)
                this.req_solt_data = this.port_options[0].req_fields
                this.res_solt_data = this.port_options[0].res_fields
                this.req_solt_code_arr = this.port_options[0].req_fields_example
                this.res_solt_code_arr = this.port_options[0].res_fields_example
              }
            }else{
              this.process_in_up = false
            }

            if(data.service_data_type_1 == 10){
              this.perception_in = true
              this.$set(this.gz_solt_arr[0],'info',data.urls[0].req_url)
              this.$set(this.gz_solt_arr[1],'info',data.urls[0].encode_method)
              this.req_gz_solt_data = data.urls[0].req_fields
              this.res_gz_solt_data = data.urls[0].res_fields
              this.req_solt_code_arr = data.urls[0].req_fields_example
              this.res_solt_code_arr = data.urls[0].res_fields_example
              
            }else{
              this.perception_in = false
            }
            console.log(this.process_in_up,this.perception_in);
            if(this.process_in_up){ 
              this.get_trans_data()
              var temp_sj = this.service_header_arr.first.pop()
              this.service_header_arr.second = []
              this.service_header_arr.second.push(temp_sj)
            }
            this.$set(this.list_arr[0], "info", data.descript);
            this.$set(this.list_arr[1], "info", data.sectors_name);
            this.$set(this.list_arr[2], "info", data.organization_name);
            this.$set(this.list_arr[3], "info", data.openness_name);
            this.$set(this.list_arr[4], "info", data.encode_method);
            this.$set(
              this.list_arr[5],
              "info",
              data.create_time.replace("T", " ").split("+")[0]
            );

            // 接口详情信息
            this.$set(
              this.servicead_arr[0],
              "info",
              this.request_arr[data.req_type - 1]
            ); // 请求方式
            this.req_data = JSON.parse(
              data.req_fields || data.req_query || "[]"
            ); // 请求参数
            if (this.req_data && this.req_data.length === 0) {
              this.$set(this.servicead_arr[1], "type", "");
              this.$set(this.servicead_arr[1], "info", "无请求参数");
            }
            this.req_code_arr =
              data.req_fields_example || data.req_query_example || ""; // 请求示例
            if (!this.req_code_arr) {
              this.$set(this.servicead_arr[2], "type", "");
              this.$set(this.servicead_arr[2], "info", "无请求示例");
            }
            this.$set(this.servicead_arr[3], "info", data.encode_method); // 编码格式
            this.res_data = JSON.parse(data.res_fields || "[]"); // 响应参数
            if (this.res_data && this.res_data.length === 0) {
              this.$set(this.servicead_arr[4], "type", "");
              this.$set(this.servicead_arr[4], "info", "无响应参数");
            }
            console.log(data.res_fields_example)
            this.res_code_arr = data.res_fields_example || ""; // 响应示例
            console.log(this.res_code_arr)
            if (!this.res_code_arr) {
              this.$set(this.servicead_arr[5], "type", "");
              this.$set(this.servicead_arr[5], "info", "无响应示例");
            }
            // 接口详情信息 end
            var temp = data.request_spcs_info||[]
            temp.forEach((e,idx) => {
              e.index = idx+1
              if(e.spcs_type==1){
                e.gg = e.money+'/'+e.spcs_count
                e.time = '不限时长'
                e.pv = e.spcs_count
                e.d_price = e.money
              }else if(e.spcs_type==1){
                e.gg = e.money+'/月'
                e.time = '1个月'
                e.pv = '不限次数'
                e.d_price = '-'
              }
            });
            this.service_size_data =temp;
            this.size_arr_down =temp;
          } else {
            this.$message({
              message: response.data.errMsg,
              type: "warning",
            });
          }
        })
        .catch(function(response) {});
    },
    now_size_data(val) {
      console.log(val);
      val.forEach(e => {
        if(e.spcs_type==1){
          if(e.pv=='不限次数'){
            e.pv = ''
            e.time = ''
            e.descript = ''
            e.money = ''
            e.d_price = ''
          }
            e.time = '不限时长'
            e.descript = '提供'+e.pv+'次服务，时长不限'
            if(e.money&&e.pv){
              e.d_price = parseInt(e.money/e.pv)+'金币/次'
            }
          }else if(e.spcs_type==2){
            e.pv = '不限次数'
            e.d_price = '-'
            e.time = '按月'
            e.descript = '每月不限调用次数'
          }
        
      });
      this.size_arr_down = val;
    },
    getsize_arr() {
      this.$http
        .get(
          "/apaas/service/v3/service/manager/request/spcs/list?service_id=" +
            this.$route.params.id
        )
        .then((response) => {
          let data = response.data.data;
          console.log(data);
          var temp = data.data||[]
          temp.forEach((e,idx) => {
              e.index = idx+1
              if(e.spcs_type==1){
                e.gg = e.money+'/'+e.spcs_count
                e.time = '不限时长'
                e.pv = e.spcs_count
                e.d_price = ''
              }else if(e.spcs_type==1){
                e.gg = e.money+'/月'
                e.time = '1个月'
                e.pv = '不限次数'
                e.d_price = '-'
              }
            });
          this.service_size_data = temp;
        })
        .catch(function(response) {});
    },
    change_service_size() {
      let temp = [];
      
      this.size_arr_down.forEach((e) => {
        if (e.pv && e.money&&e.spcs_type) {
          e.id = 0
          delete e.undefined;
          delete e.flag;
          e.spcs_count = e.spcs_type==1?parseInt(e.pv):0;
          e.money = parseFloat(e.money);
          e.duration=1
          e.duration_unit=1
          temp.push(e);
        }
      });
      console.log(this.size_arr_down);
      this.$http
        .post("/apaas/service/v3/service/manager/request/spcs/save", {
          service_id: parseInt(this.$route.params.id),
          data: temp,
        })
        .then((response) => {
          console.log(response);
          if (response.data.success) {
            this.$message.success("保存成功");
            this.sizeset_flag = false;
            this.getsize_arr();
          } else {
            this.$message.error("保存失败");
          }
        });
    },

    getServiceyxztInfo() {
      this.$http
        .get(
          `/apaas/istio/service/apaas-proxy/overview/apaas-proxy-${this.$route.params.id}`
        )
        .then((response) => {
          if (response.data.success) {
            let data = response.data.data;
            this.yx_state = {
              state: data.appState == "running" ? "运行中" : "等待中",
              averageTime: data.respTime.avg + "ms",
              maxTime: data.respTime.max + "ms",
              averageTraffic: data.throughput.avg + "dps",
              maxTraffic: data.throughput.max + "dps",
              memory: data.resource.memory + "MB",
            };
          }
        })
        .catch((response) => {
          this.yx_state = {
            state: "停止",
            averageTime: "0ms",
            maxTime: "0ms",
            averageTraffic: "0dps",
            maxTraffic: "0dps",
            memory: "0MB",
          };
        });
    },
  },
};
</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;
}
.service_port .el-input__inner{
  width: 785px;
  background-color: #f7f8f9;
}
</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%;
}
.type_box_select >>> .outlist .list p {
  word-wrap: break-word;
}
.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;
  margin-bottom: 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;
  margin-top: 20px;
}
.savebtn {
  margin-top: 50px;
  overflow: hidden;
}
.port_bg_box{
  width: 100%;
  min-height: 100px;
  background-color: #f8f9fd;
  border-radius: 8px;
  margin-top: 10px;
  padding: 20px 30px;
}
.trans_all{
  width: 100%;
  height: 128px;
	background-color: #fbfcfe;
	border-radius: 12px;
}
.trans_all .trans_box{
  width: 33.3%;
  float: left;
  height: 65px;
  line-height: 65px;
  margin-top: 30px;
  border-right: 2px solid #e6ebfe;
}
.trans_all .trans_box:nth-last-of-type(1){
  border: 0;
}
.trans_middle{
  width: 200px;
  height: 65px;
  line-height: 65px;
  margin: 0 auto;
  position: relative;
  text-align: right;
}
.trans_middle img{
  position: absolute;
  left: 0;
  top: 15px;
}
.trans_middle span{
  position: absolute;
  right: -20px;
  top: 18px;
  font-size: 16px;
	color: #242c43;
}
.trans_middle p{
  font-size: 16px;
  line-height: 32px;
	color: #58617a;
}
.trans_middle p:nth-of-type(2){
  font-size: 24px;
	font-weight: bold;
	color: #242c43;
}
.trans_all .trans_box:nth-of-type(1) .trans_middle span{
  right: -40px;
}
.trans_log{
  width: 100%;
  
}
</style>
