<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">
            <div slot="markdown" style="white-space: pre-wrap;background-color:rgb(251,251,251);padding:15px;border-radius:5px;">{{markdown}}</div>

          </info-list>
          <div class="apaas_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" :datas="fw_data" :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-show="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=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon>
                    <p style="color: #58617a;font-size: 16px;text-align:center;">{{ yx_state.state=='running'?'运行中':'停止' }}</p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="平均响应时间" class="service_card">
                <template>
                  <div style="height:115px;" class="service_num">
                    <p>{{ yx_state.averageTime }}ms</p>
                    <p>最大响应时间：{{ yx_state.maxTime }}ms</p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="吞吐率" class="service_card">
                <template>
                  <div style="height:115px;" class="service_num">
                    <p>{{ yx_state.averageTraffic }}dps</p>
                    <p>最大吞吐率：{{ yx_state.maxTraffic }}dps</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 }}MB</p>
                  </div>
                </template>
              </nor-card>
            </div>
            <p class="service_title" style="margin-top:20px;">
              <span></span>微服务
              <el-select v-model="now_micor_service" ref="select_icon" @change="iconChange" placeholder="请选择">
                <el-option v-for="item in service_list_arr" :key="item.service" :label="item.service" :value="item.index">
                  <span v-if="item.is_unhealth" :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.service}}
                </el-option>
              </el-select>
            </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_type_ab">
                <div v-for="item in mesh_options"  @click="mesh_value=item.value" :key="item.value" :style="mesh_value==item.value?{backgroundColor:'#515fe7',color:'#f4f7fc',}:''">
                  {{item.label}}
                </div>
              </div>
              <div class="service_detail">
                <div class="service_title_card">
                  <nor-card title="服务状态" class="service_card" bgc="#e4f4fb">
                    <template>
                      <div style="height:125px;padding-top:10px;">
                        <waveIcon :state="micor_state.state=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon>
                        <p style="color: #58617a;font-size: 16px;text-align:center;">{{ micor_state.state=='running'?'运行中':'停止' }}</p>
                      </div>
                    </template>
                  </nor-card>
                  <nor-card title="服务平均响应时间" class="service_card" bgc="#e4f4fb">
                    <template>
                      <div style="height:125px;padding-top:20px;" class="service_num">
                        <p>{{ micor_state.averageTime }}ms</p>
                        <p>最大响应时间：{{ micor_state.maxTime }}ms</p>
                      </div>
                    </template>
                  </nor-card>
                  <nor-card title="吞吐率" class="service_card" bgc="#e4f4fb">
                    <template>
                      <div style="height:125px;padding-top:20px;" class="service_num">
                        <p>{{ micor_state.averageTraffic }}dps</p>
                        <p>最大吞吐率：{{ micor_state.maxTraffic }}dps</p>
                      </div>
                    </template>
                  </nor-card>
                  <nor-card title="内存使用" class="service_card" bgc="#e4f4fb">
                    <template>
                      <div style="height:125px;padding-top:40px;" class="service_num">
                        <p>{{ micor_state.memory }}MB</p>
                      </div>
                    </template>
                  </nor-card>
                </div>

                <!-- <nor-card title="服务设置" flag="true" v-show="is_current_user"> -->
                  <!-- <div class="addimage">
                    <el-select v-model="mesh_value" placeholder="请选择">
                      <el-option v-for="item in mesh_options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div> -->
                  <div v-show="is_current_user" class="tag_ox">
                    <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="376" 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>
                  </div>
                <!-- </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.id" :label="item.name" :value="item.id"></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="1">共享</el-radio>
                  <el-radio :label="2">受限</el-radio>
                  <el-radio :label="3">敏感</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 tableUm from "@/components/table/table-um";
import { getRole } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
export default {
  components: {
    infoList,
    serviceHeader,
    dialogAction,
    uploadFile,
    norCard,
    Topology,
    waveIcon,
    apassDialog,
    tableUm
  },
  data() {
    return {
      mesh_value: 0,
      mesh_options: [
        {
          value: 0,
          label: "多版本回滚"
        },
        {
          value: 1,
          label: "AB测试"
        },
        {
          value: 2,
          label: "权重管理"
        }
      ],
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      buy_style: 0,
      image_select: 0,
      oldpag_name: "镜像文件002.rar",
      fw_data: [],
      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: '',
      image_arr: [],
      area_arr: [],
      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: "\n访问地址：\nhttp://tomcat.wodcloud.com/"
        }
      ],
      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,
      is_current_user: 0
    };
  },
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"])
  },
  watch: {},
  created() {
    console.log(this.$route);
    if (this.userInfo) {
      this.now_user = this.level;
    } else {
      this.getCurrentUser();
    }
    this.getServiceInfo();
    this.getServiceBaseInfo();
    this.get_service_list();
    this.get_app_generl();
    this.get_service_arae();
    if (this.$route.query.showstate) {
      this.now_service = 1;
    }
  },
  mounted() {},
  methods: {
    iconChange(val){
      this.now_micor_service = 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(this.service_list_arr[val].is_unhealth==0){
        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;line-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.get_micro_service();
    },
    get_service_arae() {
      this.$http
        .get("/apaas/service/v3/service/manager/servarea")
        .then(response => {
          let data = response.data.data;
          this.area_arr = data;
        })
        .catch(function(response) {});
    },
    public_service() {
      this.$refs.actiondialog.show();
    },
    dialogCancel() {
      this.$refs.actiondialog.hide();
    },
    service_public() {
      this.$http
        .post(`/apaas/service/v3/service/manager/apptoserv`, {
          sectors: this.publicForm.area,
          deply_id: parseInt(this.$route.params.deploy_id),
          openness: this.publicForm.open
        })
        .then(response => {
          if (response.data.success) {
            this.$message.success(response.data.errMsg);
          } else {
            this.$message.error(response.data.errMsg);
          }
        });
    },
    save_file() {
      this.$refs["publicForm"].validate(valid => {
        if (valid) {
          this.$refs.actiondialog.hide();
          this.service_public();
        } 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) {
          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/${this.$route.params.deploy_id}?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;
          this.is_current_user = data.is_current_user;
          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 + " " + 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 == 2) {
            this.service_header_arr.yydebugger = true;
          } else {
            this.service_header_arr.yydebugger = false;
          }
          if (this.now_user == 0) {
            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;
          let sysm = data.sysm;
          if (String(sysm).slice(0, 1) == "\n") {
            this.introductionArr[4].info = sysm.slice(1);
          } else {
            this.introductionArr[4].info = sysm;
          }
          console.log(this.introductionArr[4].info);
        });
      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) {
            var temp = []
            response.data.data.forEach((e,idx) => {
              temp.push({
                ...e,
                index:idx
              })
            });
            this.service_list_arr = temp;
            setTimeout(()=>{
              this.iconChange(0)
            },2000)
            // 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;
}

.addimage .el-input__inner {
  width: 110px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #707693;
}
.addimage .el-input__icon {
  line-height: 28px;
}
.service_title .el-input__inner{
  background-color: #f7f8f9;
  height: 32px;
  line-height: 32px;
}
.tag_ox .el-table thead{
  color: #1a2236;
}
</style>
<style scoped>
.service_title .el-select{
  margin-left: 10px;
}
.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 {
  position: absolute;
  right: 20px;
  top: -36px;
}
.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;
  font-weight: 600;
  margin-bottom: 10px;
}
.service_num p:nth-of-type(2) {
  font-size: 16px;
  color: #58617a;
}
.imagebox {
  padding-top: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  padding-left: 40px;
  margin-top: 20px;
}
.imagebox span {
  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: 100%;
  /* 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;
}
.service_type_ab{
  height: 48px;
  width: 300px;
  background-color: #f6f7fb;
	border-radius: 8px;
  overflow: hidden;
  margin: 0px 0 10px 0px;
  padding: 6px;
  box-sizing: border-box;
}
.service_type_ab div{
  float: left;
  height: 36px;
  width: 33.3%;
  line-height: 36px;
  text-align: center;
  color: #58617a;
  cursor: pointer;
  font-weight: 600;
  border-radius: 6px;
}
</style>
