<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"
              :datas="res_data"
              slot="zd_table"
            ></table-um>
            <v-apaas-code :datas="code_arr" 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"
              :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"
              :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 == 1 ? 'primary' : ''"
              @click="buy_style = 1"
              >按月购买</el-button
            >
            <el-button
              v-if="now_user == 1&&sizeset_flag"
              :type="buy_style == 2 ? 'primary' : ''"
              @click="buy_style = 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>
      </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/example_icon";
import Topology from "@/components/topology.vue";
import serviceHeader from "@/components/service-header";
import dialogAction from "@/components/dialog-action";
import { getRole,formatDateTime_date } 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: 1,
      responseParamUrl: "",
      codeExampleUrl: "",
      yx_state: {
        state: "",
        averageTime: "",
        maxTime: "",
        averageTraffic: "",
        maxTraffic: "",
        memory: "",
      },
      res_data:[],//响应参数
      buy_type:'',
      sizeset_flag:false,//规格设置是否显示
      code_arr:'',
      service_arr: [
        ["服务基本信息", "接口详细信息", "服务运行状态"],
        ["服务基本信息", "接口详细信息", "服务运行状态", "服务计费规则"],
        ["服务基本信息", "接口详细信息", "服务运行状态", "服务规格"],
      ],
      service_size_data:[],//服务规格数组
      service_header_arr: {
        url:'',
        name: "",
        first: [
                {
                    "name": "服务类型",
                    "text": ""
                },
                {
                    "name": "申请次数",
                    "text": '',
                },
                {
                    "name": "调用次数",
                    "text": '',
                },
                {
                    "name": "服务状态",
                    "text": ""
                }
        ],
        second: [
          {
            "name": "服务接口地址",
            "text": ""
          }
        ],
        fixed: true,
        fixedurl:''
      },
      now_service: 0,
      datas: {},
      header_arr: [
        {
          prop: "name",
          label: "字段名称",
          minWidth: "20%",
          align: "left",
        },
        {
          prop: "field_type",
          label: "字段编码",
          width: "100px",
          align: "center",
        },
        {
          prop: "show_type",
          label: "字段类型",
          width: "100px",
          align: "center",
        },
        {
          prop: "descript",
          label: "字段说明",
          minWidth: "30%",
          align: "left",
        },
        {
          prop: "example",
          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: "count",
          label: "访问次数（次/日）",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "pv",
          label: "访问量（PV/日）",
          minWidth: "33.33%",
          align: "center",
        },
        {
          prop: "des",
          label: "规格说明",
          minWidth: "33.33%",
          align: "left",
        },
      ],
      edit_size_arr: [
        {
          prop: "count",
          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: "pv",
          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: "des",
          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: "",
        },
        {
          title: "请求示例：",
          info: "",
        },
        {
          title: "编码格式：",
          info: "",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "zd_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "zd_code",
        },
      ],
      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": ""
            }
      ],
    };
  },
  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.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("/apaas/service/v3/service/manager?service_id="+this.$route.params.id)
        .then((response) => {
          let data = response.data.data;
          console.log(data);
          this.$set(this.service_header_arr, "name", data.name);
          this.$set(this.service_header_arr['first'][0], 'text', this.service_type_arr[data.data_service_type1-1]);
          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);
          this.$set(this.service_header_arr, "fixedurl", this.$route.path.replace('servicedetail','serviceedit'));
          this.$set(this.list_arr[0], "info", data.descript);
          this.$set(this.list_arr[1], "info", this.scrvice_area_arr[data.sectors-1]);
          this.$set(this.list_arr[2], "info", data.organization);
          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.$set(this.servicead_arr[1], "info", data.req_query?data.req_query:'无');
          this.$set(this.servicead_arr[2], "info", data.req_fields);
          this.$set(this.servicead_arr[3], "info", data.encode_method);
          this.code_arr = data.res_fields
          this.res_data = JSON.parse(data.res_fields)
          this.service_size_data = data.request_spcs_info
          this.size_arr_down = data.request_spcs_info
          this.buy_type = data.request_spcs_info[0].type
        })
        .catch(function(response) {});
    },
    now_size_data(val){
      console.log(val);
      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);
          this.service_size_data = data.data
          this.buy_type = data.data[0].type
        })
        .catch(function(response) {});
    },
    change_service_size(){
      let temp = []
      this.size_arr_down.forEach(e => {
        if(e.pv&&e.count){
          if(e.flag){
            e.id = 0
          }
          e.type = this.buy_style
          delete e.undefined
          delete e.flag
          temp.push(e)
        }
      });
      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.success('保存失败')
          }
        })
    },
   
    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>
