<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的应用 / 部署的应用 /
      <span>应用详情</span>
    </p> 
    <div class="info_contain">
      <service-header :data="service_header_arr" @debuggerfunc="debuggerfunc"></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 v-if="now_service == 0" :list_arr="introductionArr">
            <mavon-editor
              slot="markdown"
              v-model="markdown"
              :boxShadow="false"
              :toolbarsFlag="false"
              :subfield="false"
              defaultOpen="preview"
              :editable="false"
              v-if="now_service == 0"
            />
            
          </info-list>
          <div class="apass_button" v-if="now_service == 0&&public_flag">
            <el-button type="primary" @click="public_service">服务发布</el-button>
          </div>
          <div v-if="now_service==2" class="info_contain2">
            <info-list :list_arr="fwfw_arr">
              <div class="appcode" v-html="appcode" slot="app_code"></div>
              <table-um
                slot="fw_table"
                :headers="header_fw_arr"
                url="fw_rank_arr"
                :stripe="true"
                :paginationShow="true"
                @detail="detail"
              ></table-um>
            </info-list>

            <div
              @click="public_form = true"
              v-if="public && now_service == 0"
              class="addimage"
              title="将该应用以服务的形式发布至服务超市"
            >服务发布</div>
            <el-form
              :model="formInline"
              label-width="0px"
              :rules="rules1"
              ref="ruleForm"
              v-if="public_form"
            >
              <el-form-item prop="area">
                <p class="formname">服务领域：</p>
                <el-select v-model="formInline.area" placeholder="请选择">
                  <el-option
                    v-for="item in area_arr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="resource">
                <p class="formname">开放程度：</p>
                <el-radio-group v-model="formInline.resource">
                  <el-radio label="共享"></el-radio>
                  <el-radio label="受限"></el-radio>
                  <el-radio label="敏感"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <div class="savebtn">
                  <div class="btnsty" @click="public_form = false">取消</div>
                  <div class="btnsty" @click="saveInfo('ruleForm')">保存</div>
                </div>
              </el-form-item>
            </el-form>
          </div>

          <!-- <div v-if="now_service == 1&&image_arr.length"> -->
          <div v-if="now_service == 1">
            <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;">
                    <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>
            <p class="service_title" style="margin-top:20px;">
              <span></span>微服务
            </p>
            <div style="overflow:hidden;height:700px;" class="limit-elscroll">
              <el-scrollbar class="service_list">
                <div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}} <span v-if="item.is_unhealth" class="service_tips">故障</span> </div>
              </el-scrollbar>
              <div class="service_detail">
                <nor-card title="服务概况" flag="true">
                  <template>
                    <div style="overflow:hidden;height:160px;padding-top:10px;">
                      <div style="height:115px;padding-top:10px;" class="service_card_box">
                        <p
                          style="color: #707693;font-size: 16px;text-align:center;"
                        >服务状态</p>
                        <waveIcon :state="micor_state.state" style="margin:10px auto;"></waveIcon>
                        <p
                          style="color: #58617a;font-size: 16px;text-align:center;"
                        >{{ micor_state.state }}</p>
                      </div>

                      <div style="height:115px;" class="service_num service_card_box">
                        <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
                        <p>{{ micor_state.averageTime }}</p>
                        <p>最大响应时间：{{ micor_state.maxTime }}</p>
                      </div>

                      <div style="height:115px;" class="service_num service_card_box">
                        <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span>
                        <p>{{ micor_state.averageTraffic }}</p>
                        <p>最大吞吐率：{{ micor_state.maxTraffic }}</p>
                      </div>

                      <div style="height:115px;padding-top:30px;" class="service_num service_card_box">
                        <span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span>
                        <p>{{ micor_state.memory }}</p>
                      </div>

                    </div>
                  </template>
                </nor-card>

                <nor-card title="服务设置" flag="true">
                  <div class="addimage">多版本回滚</div>
                  <p class="imagebox">
                    <span
                      @click="image_select = index;getImageInfo()"
                      :style="
                        image_select == index
                          ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
                          : {}
                      "
                      v-for="(item, index) in image_arr"
                      :key="index + 6000"
                    >{{ item.name }}</span>
                  </p>
                  <el-table
                    :data="image_arr[index].data"
                    v-for="(item, index) in image_arr"
                    :key="index+7000"
                    v-show="image_select == index"
                    stripe
                    height="300"
                    style="width: 100%">
                    <el-table-column
                      prop="tag"
                      align="center"
                      label="版本号">
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      align="center"
                      label="在线日期">
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      align="center"
                      width="300">
                      <template slot-scope="scope">
                        <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">升级</el-button>
                        <el-button @click="update(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index>Math.max(...now_image_version)">回滚</el-button>
                        <el-button @click="together(scope.row)" type="text" size="small" :disabled="up_flag" v-if="(!scope.row.subsets)&&scope.$index<Math.min(...now_image_version)">蓝绿发布</el-button>
                        <el-button type="text" size="small" :disabled="true" v-if="scope.row.subsets">当前版本</el-button>
                        <el-button @click="delete_ver(scope.row)" style="color:#830f53;font-weight:600;" type="text" size="small" :disabled="up_flag" v-if="scope.row.subsets&&now_image_version.length>=2">删除</el-button>
                      </template>
                    </el-table-column>
                    
                  </el-table>
                </nor-card>
              </div>
            </div>
          </div>
        </div>
      </div>
      <apass-dialog
        ref="actiondialog"
        title="综合应用服务发布"
        width="520px"
      >
        <template slot="content">
          <div class="dialog-content">
            <el-form :model="publicForm" :rules="public_rules" ref="publicForm" class="demo-ruleForm">
              <p class="formname">服务领域：</p>
              <el-form-item prop="area">
                <el-select v-model="publicForm.area" placeholder="请选择服务领域">
                  <el-option
                      v-for="item in area_arr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <p class="formname">开放程度：</p>
              <el-form-item prop="open">
                <el-radio-group v-model="publicForm.open">
                  <el-radio label="共享"></el-radio>
                  <el-radio label="受限"></el-radio>
                  <el-radio label="敏感"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template slot="action">
            <el-button
              size="mini"
              v-text="'取消'"
              @click="dialogCancel"
            >
            </el-button>
            <el-button
              type="primary"
              size="mini"
              v-text="'发布'"
              @click="save_file"
            >
            </el-button>
        </template>
      </apass-dialog>
    </div>
    <dialog-action ref="myConfirm" :confirmOptions="tipsOptions"></dialog-action>
    
  </div>
</template>

<script>
import infoList from "@/components/infoList";
import serviceHeader from "@/components/service-header";
import dialogAction from "@/components/dialog-action";
import uploadFile from "@/components/general/upload_file";
import norCard from "@/components/card";
import waveIcon from "@/components/general/wave_icon";
import Topology from "@/components/topology.vue";
import apassDialog from '@/components/apass-dialog'
import { getRole } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
export default {
  components: {
    infoList,
    serviceHeader,
    dialogAction,
    uploadFile,
    norCard,
    Topology,
    waveIcon,
    apassDialog
  },
  data() {
    return {
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      buy_style: 0,
      image_select: 0,
      oldpag_name: "镜像文件002.rar",
      imgList: [],
      imgList1: [],
      header_data:"",
      service_list_arr:[],
      publicForm:{
        area:'',
        open:''
      },
      public_rules:{
        area:[{ required: true, message: '请选择服务领域', trigger: 'change' }],
        open:[{ required: true, message: '请选择开放程度', trigger: 'change' }],
      },
      yx_state: {
        state: "",
        averageTime: "",
        maxTime: "",
        averageTraffic: "",
        maxTraffic: "",
        memory: ""
      },
      micor_state: {
        state: "",
        averageTime: "",
        maxTime: "",
        averageTraffic: "",
        maxTraffic: "",
        memory: ""
      },
      public_flag:false,
      now_micor_service:0,
      image_arr: [],
      area_arr: [
        {
          label: "经济建设",
          value: 0
        },
        {
          label: "城市管理",
          value: 1
        },
        {
          label: "城市建设",
          value: 2
        },
        {
          label: "道路交通",
          value: 3
        },
        {
          label: "环境资源",
          value: 4
        },
        {
          label: "民生服务",
          value: 5
        },
        {
          label: "空间地理",
          value: 6
        },
        {
          label: "文化休闲",
          value: 7
        },
        {
          label: "社会团体",
          value: 8
        },
        {
          label: "教育机构",
          value: 9
        },
        {
          label: "其他",
          value: 10
        }
      ],
      now_image_version:[],
      form: {
        name: "",
        fileList: "",
        taps: ""
      },
      formInline: {
        area: "",
        resource: ""
      },
      fileList: "",
      rules: {
        name: [{ required: true, message: "请输入镜像名称", trigger: "blur" }],
        taps: [{ required: true, message: "请输入镜像标签", trigger: "blur" }]
      },
      rules1: {
        area: [
          { required: true, message: "请选择服务领域", trigger: "change" }
        ],
        resource: [
          { required: true, message: "请选择开放程度", trigger: "change" }
        ]
      },
      header_fw_arr: [
        {
          prop: "rank",
          label: "服务排名",
          width: "150px",
          align: "center",
          type: "rank"
        },
        {
          prop: "name",
          label: "服务名称",
          minWidth: "40%",
          align: "left",
          type: "hot"
        },
        {
          prop: "address",
          label: "服务地址",
          minWidth: "60%",
          align: "left"
        },
        {
          prop: "times",
          label: "外部调用次数(次)",
          width: "250px",
          align: "center"
        },
        {
          prop: "time",
          label: "平均调用时长(h)",
          width: "250px",
          align: "center"
        },
        {
          label: "操作",
          type: "Button",
          width: "250px",
          align: "center",
          btnList: [
            {
              type: "detail",
              label: "查看监控日志"
            }
          ]
        }
      ],
      tipsOptions: {
        title: "",
        message: "",
        btnSubmitText: "",
        btnCancelText: "",
        position: ""
      },
      service_arr: [
        ["基本信息", "运行状态"],
        ["基本信息", "运行状态"],
        ["基本信息", "运行状态", "服务访问排名"]
      ],
      service_header_arr: {
        name: "",
        first: [
          {
            name: "业务类型",
            text: ""
          },
          {
            name: "业务领域",
            text: ""
          }
        ],
        second: [
          {
            name: "上架区域",
            text: ""
          },
          {
            name: "工作区域",
            text: ""
          },
          {
            name: "部署时间",
            text: ""
          }
        ],
        yydebugger: false,
        yydev:false,
        url: ""
      },
      now_service: 0,
      header_arr: [
        {
          prop: "jxmc",
          label: "镜像名称",
          minWidth: "33.33%",
          align: "center"
        },
        {
          prop: "bbh",
          label: "版本号",
          minWidth: "33.33%",
          align: "center"
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          minWidth: "33.33%",
          btnList: [
            {
              type: "actiondelete",
              label: "删除"
            }
          ]
        }
      ],
      introductionArr: [
        {
          title: "应用简介：",
          info: ""
        },
        {
          title: "功能简介：",
          info: ""
        },
        {
          title: "应用场景：",
          info: ""
        },
        {
          title: "应用参数：",
          info: "",
          type: "solt",
          solt_name: "markdown"
        },
        {
          title: "使用说明：",
          info: ""
        },
      ],
      markdown: "",
      fwfw_arr: [
        {
          title: "访问排名",
          info: "",
          prop: "title",
          type: "solt",
          solt_name: "fw_table"
        }
      ],
      appcode: "",
      showPass: false,
      public: false,
      public_form: false,
      now_tag:'',
      up_flag:false,
    };
  },
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"])
  },
  watch: {},
  created() {
    if (this.userInfo) {
      this.now_user = this.level;
    } else {
      this.getCurrentUser();
    }
    this.getServiceInfo();
    this.getServiceBaseInfo();
    this.get_service_list();
    this.get_app_generl();
    if (this.$route.query.showstate) {
      this.now_service = 1;
    }
  },
  mounted() {
    
  },
  methods: {
    public_service(){
      this.$refs.actiondialog.show();
    },
    dialogCancel(){
      this.$refs.actiondialog.hide();
    },
    save_file(){
      this.$refs['publicForm'].validate((valid) => {
          if (valid) {
            this.$refs.actiondialog.hide();
            this.$router.push('/fwzc/fwcs')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    event_source(){
      //更新版本时请求版本状态
      var _this = this
      const se = new EventSource(`/apaas/istio/service/${this.header_data.namespace}/versions/events/${this.service_list_arr[this.now_micor_service].service}/${this.now_tag}/subscribe`, { withCredentials: true }) // 后端接口，要配置允许跨域属性
      se.onopen=function(e){}
      se.onmessage=function(e){
        console.log(e.data)
          se.close()
          setTimeout(() => {
            _this.get_micro_service()
            _this.$message.success('更新完成')
          }, 100);
        
      }
      se.onerror=function(e){}
    },
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          console.log("--- user info ---");
          console.log(data.data);
          console.log("--- user info ---");
          this.$store.commit("userInfofun", data.data);
          this.now_user = this.level;
          console.log(this.level);
        } else {
          console.log(data.errMsg);
        }
      });
    },
    detail(val) {
      console.log(val);
    },
    //更新
    update(val) {
      this.up_flag = true
      this.$message.success('开始更新版本')
      this.$http
        .post(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/update`,{
          tag:val.tag
        })
        .then(response => {
          if(response.data.success){
            this.get_micro_service(true)
          }
        })
    },
    //蓝绿发布
    together(val){
      this.up_flag = true
      this.$http
        .post(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/publish`,{
          tag:val.tag
        }).then(response => {
          this.up_flag = false
          this.get_micro_service()
        })
    },
    //删除
    delete_ver(val){
      this.up_flag = true
      this.$http
        .post(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/unpublish`,{
          tag:val.tag
        }).then(response => {
          this.up_flag = false
          this.get_micro_service(true,val.subsets)
        })
    },
    rollback(val) {
      console.log(val);
    },
    grouppublic(val) {
      console.log(val);
    },
    online(val) {
      console.log(val);
    },
    debuggerfunc(){
      this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/appdebugger?namespace=${this.header_data.namespace}&app=${this.header_data.deploy_name}`)
    },
    get_app_generl(){
      this.$http
        .get(`/apaas/hubApi/market/status/overview/${this.$route.params.deploy_id}`)
        .then(response => {
          let data = response.data.data
          this.yx_state= {
            state: data.appState,
            averageTime: data.respTime.avg,
            maxTime: data.respTime.max,
            averageTraffic: data.throughput.avg,
            maxTraffic: data.throughput.max,
            memory: data.resource.memory
          }
        })
    },
    get_micro_service(val,type){
      this.$http
        .get(`/apaas/istio/service/${this.header_data.namespace}/overview/${this.service_list_arr[this.now_micor_service].service}`)
        .then(response => {
          if(response.data.success){
            let data = response.data.data
            this.image_arr = []
            data.imageNames.forEach(e => {
              this.image_arr.push({
                name:e,
                data:[]
              })
            });
            this.micor_state= {
              state: data.appState,
              averageTime: data.respTime.avg,
              maxTime: data.respTime.max,
              averageTraffic: data.throughput.avg,
              maxTraffic: data.throughput.max,
              memory: data.resource.memory
            }
            this.getImageInfo(val,type)
          }
        })
    }, 
    change_micor(n){
      this.now_micor_service = n
      this.get_micro_service()
    },
    compare(property){
        return function(a,b){
            var value1 = a[property];
            var value2 = b[property];
            return value2 - value1;
            // return value1 - value2;
        }
    },
    getImageInfo(val,type) {
      this.$http
        .get(`/apaas/istio/service/${this.header_data.namespace}/image/${this.service_list_arr[this.now_micor_service].service}/${this.image_arr[this.image_select].name}/versions`)
        .then(response => {
          console.log(response);
          var _this = this
          let data = response.data.data;
          data.list.forEach(e => {
            data.runnings.forEach(el => {
              if(e.tag==el.tag){
                e['subsets'] = el.subsets
              }
            });
          });
          data.list.forEach(e => {
            e['num']=parseInt(e.date.replace(/-/g,'').replace(/:/g,'').replace(' ',''))
          });
          var temp_arr = data.list.sort(this.compare('num'))
          console.log(temp_arr);
          this.$set(this.image_arr[this.image_select],'data',temp_arr)
          this.now_image_version = []
          this.image_arr[this.image_select].data.forEach((e,idx)=> {
            if(e.subsets){
              this.now_image_version.push(idx)
            }
          });
          if(val){
            //删除
            if(type){
              var temp = ''
              this.now_tag.forEach(e => {
                if(type==e){

                }else{
                  temp = e
                }
              });
              this.now_tag = temp
            }
            //调用监听
            this.event_source()
          }else{
            if(data.runnings.length==1){
              this.now_tag = data.runnings[0].subsets
            }else{
              this.now_tag = [data.runnings[0].subsets,data.runnings[1].subsets]
            }
            this.up_flag = false
          }
          // console.log(Math.min(...now_image_version))
          
        })
        .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) {});
    },
    saveInfo(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    gotoview(url) {
      console.log(url);
    },
    showpass() {
      this.showPass = !this.showPass;
    },
    applymy(val) {
      console.log(val);
      this.tipsOptions = {
        title: "",
        message: "",
        btnSubmitText: "",
        btnCancelText: "",
        position: ""
      };
      this.tipsOptions.message =
        "申请密钥需要向组织管理员发送通知，由组织管理员在密钥管理中设置应用的密钥。";
      this.tipsOptions.btnSubmitText = "发送通知";
      this.tipsOptions.confirmSubmit = () => {
        console.log("deleteItem - ");
        this.$refs.myConfirm.hideModel();
      };
      this.$refs.myConfirm.showModel();
    },
    getNewList(val) {
      console.log(val);
      this.form.fileList = "";
      this.form.fileList = val
        .map((v, k) => {
          return v.url;
        })
        .join(";");
      console.log(this.form.fileList);
    },
    getNewList1(val) {
      console.log(val);
      this.fileList = "";
      this.fileList = val
        .map((v, k) => {
          return v.url;
        })
        .join(";");
      console.log(this.fileList);
    },
    actiondelete() {
      this.tipsOptions = {
        title: "",
        message: "",
        btnSubmitText: "",
        btnCancelText: "",
        position: ""
      };
      this.tipsOptions.message = "是否删除该数据";
      this.tipsOptions.confirmSubmit = () => {
        console.log("deleteItem - ");
        this.$refs.myConfirm.hideModel();
      };
      this.$refs.myConfirm.showModel();
    },
    deploy() {
      console.log("0000");
    },
    editapp() {
      console.log("11111");
    },
    getServiceInfo() {
      this.$http
        .get(`/apaas/hubApi/market/deployInfo/${this.$route.params.deploy_id}`)
        .then(response => {
          let data = response.data.data;
          this.header_data = data
          this.public_flag = false
          if(data.is_apply==0&&(data.type==2||data.type==3)){
            this.public_flag = true
          }
          this.$set(
            this.service_header_arr,
            "name",
            data.deploy_name + " " + "V" + data.app_version
          );
          this.$set(this.service_header_arr, "url", data.logo);
          this.$set(
            this.service_header_arr["first"][0],
            "text",
            data.type_name
          );
          this.$set(
            this.service_header_arr["first"][1],
            "text",
            data.business_area_name
          );
          this.$set(
            this.service_header_arr["second"][0],
            "text",
            data.upload_area
          );
          this.$set(
            this.service_header_arr["second"][1],
            "text",
            data.namespace+'('+data.workplace+')'
          );
          this.$set(this.service_header_arr["second"][2], "text", data.created);

          //应用开发调试按钮显示
          if(this.now_user==0||this.now_user==3||this.now_user==4){
            this.service_header_arr.yydebugger = true
          }else{
            this.service_header_arr.yydebugger = false
          }
          if(this.now_user==0||this.now_user==4){
            this.service_header_arr.yydev = true
          }else{
            this.service_header_arr.yydev = false
          }
        })
        .catch(function(response) {});
    },
    getServiceBaseInfo() {
      this.$api.workbench
        .getAppIntroduction({
          deploy_id: this.$route.params.deploy_id,
          app_id: this.$route.query.app_id
        })
        .then(response => {
          let data = response.data.data;
          this.introductionArr[0].info = data.yyjj;
          this.introductionArr[1].info = data.gnjj;
          this.introductionArr[2].info = data.cjsl;
          this.introductionArr[4].info = data.sysm;
        });
      this.$api.workbench
        .getAppParams({
          app_id: this.$route.query.app_id
        })
        .then(response => {
          let data = response.data.data;
          this.markdown = data;
        });
    },
    get_service_list(){
      this.$http
        .get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
        .then(response => {
          if(response.data.success){
            this.service_list_arr = response.data.data
            if(this.service_list_arr&&this.service_list_arr.length){
              this.get_micro_service()
            }
          }
        })
    }
  }
};
</script>

<style>
.elscroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
.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;
}
.info_contain2 .el-input__inner {
  background-color: #f7f8f9;
  width: 1022px;
} 
.dialog-content .el-input__inner{
  background-color: #f7f8f9;
  width: 460px;
}
.dialog-content .el-form-item{
  margin-top: 15px;
  margin-bottom: 0;
}

.service_list ::-webkit-scrollbar {
width: 0px; /*对垂直流动条有效*/
height: 0px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
.service_list ::-webkit-scrollbar-track{
background-color: rosybrown;
border-radius: 3px;
}


/*定义滑块颜色、内阴影及圆角*/
.service_list ::-webkit-scrollbar-thumb{
border-radius: 7px;
background-color: #E8E8E8;
}

/*定义两端按钮的样式*/
.service_list ::-webkit-scrollbar-button {
background-color:cyan;
}

/*定义右下角汇合处的样式*/
.service_list ::-webkit-scrollbar-corner {
background:khaki;
}

</style>
<style scoped>
.info_contain >>> .apass_dialog .el-dialog__footer{
  padding-top: 0;
}
.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%;
}

.savebtn {
  margin-top: 50px;
  overflow: hidden;
  float: right;
}
.savebtn div {
  float: left;
  width: 124px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  margin-left: 20px;
  border-radius: 8px;
  cursor: pointer;
}
.savebtn div:nth-of-type(1) {
  background-color: #e1e4fb;
  color: #0f2683;
}
.savebtn div:nth-of-type(2) {
  background-color: #0f2683;
  color: #f8f9fd;
}
.appcode {
  white-space: pre-wrap;
  width: 100%;
  background-color: #f8f9fd;
  border-radius: 8px;
  padding: 24px;
  color: #58617a;
}
.addimage {
  display: inline-block;
  color: #f8f9fd;
  font-size: 16px;
  width: 124px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #0f2683;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  cursor: pointer;
}
.use_know p {
  height: 44px;
  line-height: 44px;
  color: #1a2236;
}
.use_know p:nth-of-type(2n) {
  background-color: #f8f9fd;
}
.use_know p span {
  display: inline-block;
}
.use_know p span:nth-of-type(1) {
  width: 150px;
  font-weight: 600;
}
.use_know p span:nth-of-type(2) {
  width: 250px;
  color: #58617a;
}
.el-icon-view {
  cursor: pointer;
}
.use_know2 p {
  color: #242c43;
}
.use_know2 p span {
  width: 76px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #515fe7;
  border-radius: 8px;
  display: inline-block;
  color: #e6ebfe;
  cursor: pointer;
}
.formname {
  color: #8890a7;
}
.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;
}
.imagebox {
  overflow: hidden;
  margin-bottom: 20px;
}
.imagebox span {
  width: 165px;
  height: 34px;
  padding: 0 10px;
  line-height: 34px;
  text-align: center;
  margin-right: 10px;
  background-color: #f7f8f9;
  border-radius: 6px;
  color: #6573ae;
  cursor: pointer;
  float: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /*设置p元素最大4行，父元素需填写宽度才明显*/
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.service_list{
  float: left;
  width: 400px;
  height: 100%;
  overflow-x: hidden;
  border: 1px solid #e5f0ff;
  border-radius: 12px 0px 0px 12px;
}
.service_box{
  width: 398px;
	height: 48px;
  line-height: 48px;
  text-align: left;
  padding-left: 38px;
  border-bottom: 1px solid #e5f0ff;
  position: relative;
  cursor: pointer;
}
.service_tips{
  display: inline-block;
  position: absolute;
  font-size: 12px;
  color: #e15260;
  width: 42px;
	height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #ffefef;
	border-radius: 4px;
	border: solid 1px #d7a4a9;
  top:13px;
  right:50px;
}
.service_detail{
  float: left;
  height: 270px;
  width: calc(100% - 425px);
}
.service_card_box{
  float: left;
  border-right: 1px solid #e5f0ff;
  width: calc(25%);
}
.card_contain .service_card_box:nth-last-of-type(1){
  border-right:0;
}
.dialog-content{
  text-align: left;
}
.dialog-content .formname{
  font-size: 14px;
  color: #8890a7;
  margin-top: 25px;
}
.dialog-content .formname:nth-of-type(1){
  margin-top: 0px;
}
</style>
