<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的应用 / 部署的应用 /
      <span>应用详情</span>
    </p>
    <div class="info_contain">
      <service-header :data="service_header_arr" @applymy="applymy"></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 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">
            <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;">
              <el-scrollbar class="service_list">
                <div class="service_box" 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="yx_state.state" style="margin:10px auto;"></waveIcon>
                        <p
                          style="color: #58617a;font-size: 16px;text-align:center;"
                        >{{ yx_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>{{ yx_state.averageTime }}</p>
                        <p>最大响应时间：{{ yx_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>{{ yx_state.averageTraffic }}</p>
                        <p>最大吞吐率：{{ yx_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>{{ yx_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"
                      :style="
                        image_select == index
                          ? { backgroundColor: '#8390ee', color: '#f8f9fd' }
                          : {}
                      "
                      v-for="(item, index) in image_arr"
                      :key="index + 6000"
                    >{{ item.name }}</span>
                  </p> -->
                  <table-um
                    v-for="(item, index) in image_arr"
                    :key="index+7000"
                    v-show="image_select == index"
                    :headers="header_image_arr"
                    :datas="image_arr[index].data"
                    :stripe="true"
                    :paginationShow="true"
                    @update="update"
                    @rollback="rollback"
                    @grouppublic="grouppublic"
                    @online="online"
                  ></table-um>
                </nor-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <dialog-action ref="myConfirm" :confirmOptions="tipsOptions"></dialog-action>
  </div>
</template>

<script>
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
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 { getRole } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
export default {
  components: {
    infoList,
    tableUm,
    serviceHeader,
    dialogAction,
    uploadFile,
    norCard,
    Topology,
    waveIcon
  },
  data() {
    return {
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      buy_style: 0,
      image_select: 0,
      oldpag_name: "镜像文件002.rar",
      imgList: [],
      imgList1: [],
      service_list_arr:[
        {
          service:'cemplat-api1',
          is_unhealth:1
        },
        {
          service:'cemplat-api1',
          is_unhealth:1
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
        {
          service:'cemplat-api1',
          is_unhealth:0
        },
      ],
      yx_state: {
        state: "",
        averageTime: "",
        maxTime: "",
        averageTraffic: "",
        maxTraffic: "",
        memory: ""
      },
      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
        }
      ],
      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_image_arr: [
        {
          prop: "vision",
          label: "版本号",
          minWidth: "20%",
          align: "center"
        },
        {
          prop: "state",
          label: "状态",
          minWidth: "20%",
          align: "center"
        },
        {
          prop: "date",
          label: "在线日期",
          minWidth: "30%",
          align: "center"
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          minWidth: "30%",
          btnList: [
            {
              type: "update",
              label: "升级"
            },
            {
              type: "rollback",
              label: "回退"
            },
            {
              type: "grouppublic",
              label: "蓝绿发布"
            },
            {
              type: "online",
              label: "下线"
            }
          ]
        }
      ],
      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: ""
          }
        ],
        bsdetail: true,
        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"
        }
      ],
      markdown: "",
      fwfw_arr: [
        {
          title: "访问排名",
          info: "",
          prop: "title",
          type: "solt",
          solt_name: "fw_table"
        }
      ],
      appcode: "",
      showPass: false,
      public: false,
      public_form: false
    };
  },
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"])
  },
  watch: {},
  created() {
    if (this.userInfo) {
      this.now_user = this.level;
    } else {
      this.getCurrentUser();
    }
    this.getServiceInfo();
    this.getServiceBaseInfo();
    this.getServiceyxztInfo();
    this.getImageInfo();
    this.get_service_list();
    if (this.$route.query.showstate) {
      this.now_service = 1;
    }
  },
  mounted() {},
  methods: {
    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) {
      console.log(val);
    },
    rollback(val) {
      console.log(val);
    },
    grouppublic(val) {
      console.log(val);
    },
    online(val) {
      console.log(val);
    },
    getImageInfo() {
      this.$http
        .get("./static/deployappdetail.json")
        .then(response => {
          console.log(response);
          let data = response.data.data;
          this.image_arr = data.imagearr;
        })
        .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.$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
          );
          this.$set(this.service_header_arr["second"][2], "text", data.created);
        })
        .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.$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
          }
        })
    }
  }
};
</script>

<style>
.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;
} 

</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%;
}

.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: 400px;
	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;
}
</style>
