<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">
          <div v-if="now_service == 0||now_service==2" class="info_contain2">
            <info-list :list_arr="now_service == 0?list_arr:fwfw_arr">
              <div class="appcode" v-html="appcode" slot="app_code"></div>
              <div slot="use_know0">
                访问地址:
                <a :href="list_arr[4].url" target="_blank">{{
                  list_arr[4].url
                }}</a>
              </div>
              <div slot="use_know1" class="use_know">
                <p>
                  <span>主机名或IP地址</span
                  ><span>{{ list_arr[4].url.ip }}</span>
                </p>
                <p>
                  <span>端口</span><span>{{ list_arr[4].url.port }}</span>
                </p>
                <p>
                  <span>用户名</span><span>{{ list_arr[4].url.user }}</span>
                </p>
                <p>
                  <span>密码</span
                  ><span>{{
                    showPass ? list_arr[4].url.password : this.list_arr[4].url1
                  }}</span>
                  <i @click="showpass" class="el-icon-view"></i>
                </p>
              </div>
              <div slot="use_know2" class="use_know2">
                <p>
                  {{ list_arr[4].url.text }}
                  <span @click="gotoview(list_arr[4].url.url)">浏览文件</span>
                </p>
              </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;">
                    <example-icon style="margin:10px auto;"></example-icon>
                    <p
                      style="color: #58617a;font-size: 16px;text-align:center;"
                    >
                      {{ yx_state.state }}
                    </p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="平均响应时间" class="service_card">
                <template>
                  <div style="height:115px;" class="service_num">
                    <p>{{ yx_state.averageTime }}</p>
                    <p>最大响应时间：{{ yx_state.maxTime }}</p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="吞吐率" class="service_card">
                <template>
                  <div style="height:115px;" class="service_num">
                    <p>{{ yx_state.averageTraffic }}</p>
                    <p>最大吞吐率：{{ yx_state.maxTraffic }}</p>
                  </div>
                </template>
              </nor-card>
              <nor-card title="资源使用" class="service_card">
                <template>
                  <div
                    style="height:115px;padding-top:30px;"
                    class="service_num"
                  >
                    <p>{{ yx_state.memory }}</p>
                  </div>
                </template>
              </nor-card>
            </div>
            <p class="service_title" style="margin-top:20px;">
              <span></span>应用设置
            </p>
            <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>
          </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/upload_file";
import norCard from "@/components/card";
import exampleIcon from "@/pages/example/example_icon";
import Topology from "@/components/topology.vue";
import { getRole } from "@/utils/common";
export default {
  components: {
    infoList,
    tableUm,
    serviceHeader,
    dialogAction,
    uploadFile,
    norCard,
    Topology,
    exampleIcon,
  },
  data() {
    return {
      now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
      buy_style: 0,
      image_select: 0,
      oldpag_name: "镜像文件002.rar",
      imgList: [],
      imgList1: [],
      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: [],
        second: [],
        bsdetail: true,
      },
      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: "删除",
            },
          ],
        },
      ],

      list_arr: [
        {
          title: "应用简介：",
          info: "",
        },
        {
          title: "功能简介：",
          info: "",
        },
        {
          title: "应用场景：",
          info: "",
        },
        {
          title: "应用参数：",
          info: "",
          type: "solt",
          solt_name: "app_code",
        },
        {
          title: "使用说明：",
          url: "",
          url1: "",
          type: "solt",
          solt_name: "use_know",
        },
      ],
      fwfw_arr:[
        {
          title: "访问排名",
          info: "",
          prop:"title",
          type: "solt",
          solt_name: "fw_table",
        },
      ],
      appcode: "",
      showPass: false,
      public: false,
      public_form: false,
    };
  },
  watch: {},
  created() {
    this.now_user = this.$store.state.role;
    getRole().then((data) => {
      this.now_user = data;
      this.$store.commit("rolefun", data);
      this.getServiceInfo();
      this.getServiceBaseInfo();
      this.getServiceyxztInfo();
      this.getImageInfo();
    });
  },
  mounted() {},
  methods: {
      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 = url
        .map((v, k) => {
          return v.url;
        })
        .join(";");
      console.log(this.form.fileList);
    },
    getNewList1(val) {
      console.log(val);
      this.fileList = "";
      this.fileList = url
        .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("/static/deployappdetail.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(this.service_header_arr, "name", data.appInfo.name);
          this.$set(this.service_header_arr, "first", data.appInfo.first);
          this.$set(this.service_header_arr, "second", data.appInfo.second);
        })
        .catch(function(response) {});
    },

    getServiceBaseInfo() {
      this.$http
        .get("/static/deployappdetail.json")
        .then((response) => {
          let data = response.data.data;
          this.$set(this.list_arr[0], "info", data.appbaseinfo.intorduce);
          this.$set(this.list_arr[1], "info", data.appbaseinfo.action);
          this.$set(this.list_arr[2], "info", data.appbaseinfo.use);
          this.$set(
            this.list_arr[4],
            "solt_name",
            "use_know" + data.appbaseinfo.state
          );
          if (data.appbaseinfo.state == 0) {
            this.$set(this.list_arr[4], "url", data.appbaseinfo.url);
          } else if (data.appbaseinfo.state == 1) {
            this.$set(this.list_arr[4], "url", data.appbaseinfo.url1);
            var temp = "";
            data.appbaseinfo.url1.password.split("").forEach((e) => {
              temp = temp + "*";
            });
            this.$set(this.list_arr[4], "url1", temp);
          } else if (data.appbaseinfo.state == 2) {
            this.$set(this.list_arr[4], "url", data.appbaseinfo.url2);
            this.public = data.appbaseinfo.public;
          }
          this.appcode = data.appbaseinfo.appcode;
        })
        .catch(function(response) {});
    },
  },
};
</script>

<style>
.savebtn .el-button {
  float: right;
  margin-left: 20px;
  letter-spacing: 2px;
}
.savebtn .el-button:nth-of-type(1) {
  background-color: #0f2683;
  color: #f8f9fd;
}
.savebtn .el-button:nth-of-type(2) {
  background-color: #c3caf8;
  color: #0f2683;
}
.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;
  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;
}
</style>
