集群退出添加密码

zhangzengfei

2023-10-24 6199a2238efcc2449c79aa228e40cb75c59cf663

 src/pages/ai/index/detail.vue

@@ -1,1163 +1,1117 @@
<template>

  <div class="detail-page">

    <div class="detail-top">

      <div class="title-area">

        <div class="icon-img">

          <img v-if="productDetail.logoUrl" :src="productDetail.logoUrl" alt />

        </div>

        <div class="right-info">

          <div class="right-info-1">

            <span class="name">{{ productDetail.productName }}</span>

            <el-tag type="info" size="mini" color="#fff">{{

              isSDKDetail ? "算法" : "应用"

            }}</el-tag>

          </div>

          <div class="right-info-2">

            <el-button

              size="mini"

              round

              class="update-btn"

              @click="upgradeSDKinWin"

              v-if="productDetail.isUpgrade"

              >更新</el-button

            >

            <el-button

              size="mini"

              round

              v-if="!isSDKDetail && isActive"

              @click="openApp"

              >打开</el-button

            >

            <el-button

              size="mini"

              round

              v-if="isActive && !isDefaultApp"

              @click="unloadSDKinWin"

              >卸载</el-button

            >

            <el-button

              size="mini"

              round

              v-if="!isActive && showInstallNotActive"

              @click="downloadSdkInSide"

              >安装</el-button

            >

            <!-- suffix-icon="iconfont iconchushaixuanxiang" -->

            <el-input

              class="activeInput"

              placeholder="请输入激活码"

              size="mini"

              clearable

              :autofocus="true"

              v-model="activeCode"

              v-if="!isActive && !showInstallNotActive"

            >

            </el-input>

            <el-button

              size="mini"

              round

              class="act-btn"

              v-if="!isActive && !showInstallNotActive"

              @click="actived"

              >激活</el-button

            >

            <!-- <span

              class="icon iconfont"

              v-if="!isActive && !showInstallNotActive"

              @click="activeCode = ''"

              >&#xe6cb;</span

            > -->

          </div>

        </div>

        <div class="back-btn" @click="goback">

          <span class="icon iconfont">&#xe680;</span>

          <span class="back-text">返回</span>

        </div>

      </div>

      <div class="text-area">

        <div class="text-line">

          <span class="icon iconfont" >&#xe710;</span>

          <span class="title">版本：</span>

          <span class="desc">{{ productDetail.productVersion }}</span>

        </div>

        <div class="text-line">

          <span class="icon iconfont">&#xe75b;</span>

          <span class="title">概述：</span>

          <span class="desc">{{ productDetail.description || "暂无" }}</span>

        </div>

        <div class="text-line">

          <span class="icon iconfont">&#xe716;</span>

          <span class="title">详述：</span>

          <span class="desc">{{ productDetail.summary || "暂无" }}</span>

        </div>

      </div>

    </div>

    <div class="detail-mid">

      <div class="mid-left">

        <div class="mid-title">{{ isSDKDetail ? "应用场景" : "功能特点" }}</div>

        <div

          v-for="(item, index) in productDetail.funcInfo"

          :key="index"

          class="desc-item"

        >

          <div class="title">{{ item.title }}</div>

          <div class="desc">{{ item.desc }}</div>

        </div>

      </div>

      <div class="mid-right">

        <el-carousel

          trigger="click"

          :autoplay="false"

          indicator-position="none"

          :arrow="

            productDetail.pics !== undefined

              ? productDetail.pics.length > 1

                ? 'always'

                : 'never'

              : 'never'

          "

        >

          <el-carousel-item

            v-for="(item, index) in productDetail.pics"

            :key="index"

          >

            <img

              v-if="item.type != 'video'"

              :src="item.url"

              class="cursor-pointer"

              preview

            />

            <video

              v-if="item.type == 'video'"

              :src="'/httpImage/' + item.url"

              controls

            ></video>

          </el-carousel-item>

        </el-carousel>

      </div>

    </div>

    <div class="rec-bot">

      <div class="rec-title">{{ isSDKDetail ? "推荐算法" : "推荐应用" }}</div>



      <div class="rec-items">

        <div

          class="rec-item"

          v-for="(item, index) in otherProducts"

          :key="index"

            @click="checkInWindow(item)"

        >

          <div class="icon-img">

            <img

              v-if="item.iconBlob"

              :src="

                item.iconBlob.indexOf(',') > 0

                  ? item.iconBlob

                  : `data:image/png;base64,${item.iconBlob}`

              "

              alt

            />

          </div>

          <div class="desc">

            <div class="desc-1">{{ item.name }}</div>

            <div class="desc-2">版本 {{ item.productVersion || "2.0.0" }}</div>

          </div>

          <div class="right-btn">

            <el-button

              size="small"

              type="primary"

             
              round

              @click="checkInWindow(item)"

              >查看</el-button

            >

          </div>

        </div>

      </div>

    </div>



    <el-dialog

      :visible.sync="showActivateSuccess"

      title="激活成功！"

      width="30%"

      class="active-Dial"

      :before-close="handleClose"

    >

      <div class="dialog-active">

        <ul class="desc">

          <li>

            <label>激活码:</label>

            <span>{{ activedSdkOrApp.activateCode }}</span>

          </li>

          <li>

            <label>产品名称:</label>

            <span>{{ activedSdkOrApp.productName }}</span>

          </li>

          <li>

            <label>配置详情:</label>

            <span>{{ activedSdkOrApp.setting }}</span>

          </li>

          <li>

            <label>服务到期日:</label>

            <span>{{ activedSdkOrApp.expireTime }}</span>

          </li>

          <li>

            <label>许可证:</label>

            <span>{{ activedSdkOrApp.licence }}</span>

          </li>

        </ul>

        <div class="text-right">

          <el-button type="primary" @click="checkMyAlgorith">确定</el-button>

          <p class="tip">提示：请在“已激活”中查看并安装算法</p>

        </div>

      </div>

    </el-dialog>

  </div>

</template>

<script>

import {

  findAllSdk,

  downloadSdk,

  installSdk,

  getInstallInfo,

  removeSdk,

} from "./api";

import {

  getApps,

  installApp,

  getAppDetail,

  removeApp,

  getUnActivedSdk,

  actPageAlg,

  getUnActivedApp,

  actApp,

} from "@/api/app";

import { getUrlKey } from "@/api/utils";

export default {

  components: {},

  computed: {

    updateNum() {

      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;

    },

    isAdmin() {

      if (

        sessionStorage.getItem("userInfo") &&

        sessionStorage.getItem("userInfo") !== ""

      ) {

        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;

        return loginName === "superadmin" || loginName === "basic";

      }



      return false;

    },

  },

  data() {

    return {

      installedList: [],

      hasNewVersionSdk: [],

      hasNewVersionApp: [],

      notInstalledList: [],

      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],

      activeName: "myAlgorithm",

      patchUpdateStatus: "",

      downloadItem: "",

      downloading: false,

      actStep: 0,

      showActivateSuccess: false,

      activeCode: "",

      isInstall: false,

      installDialogVisible: false,

      installAppPackage: null,

      installSdkPackage: null,

      isActive: true,

      isDefaultApp: false,

      unActivedSDKList: [],

      unActivedAppList: [],

      isSDKDetail: true,

      actType: "",

      actId: "",

      input3: "",

      select: "",

      activedSdkOrApp: {

        activateCode: "",

        productName: "",

        setting: "",

        expireTime: "",

        licence: "",

        devIds: "",

      },

      installedApps: [],

      storeApps: [],

      installFile: {},

      appUpgreading: true,

      sdkUpgreading: true,

      autoRefresh: true,

      productDetailVisible: false,

      isUpgrading: false,

      productDetail: {},

      otherProducts: [],

      backStack: [],

      toUpdateArr: [],

      toUpdateArr1: [],

      forwardStack: [],

      backDisable: true,

      forwardDisable: true,

      showInputCode: false,

      needToUpgradeInWin: false,

      showInstallNotActive: false,

    };

  },

  props: {

    detailType: {

      type: String,

    },

    detailProductID: {

      type: String,

    },

  },

  directives: {

    focus: {

      inserted: function (el) {

        el.querySelector("input").focus();

      },

    },

  },

  mounted() {

    this.getDetail();

    this.autoRefreshAppAndSdkState();

    this.getUnActivedList();

    this.getUnActivedAppList();

  },

  beforeDestroy() {

    this.autoRefresh = false;

  },

  methods: {

    getDetail(id) {

      getAppDetail({ id: id || this.detailProductID })

        .then((res) => {

          if (res.success) {

            this.productDetail = res.data.detail;

            this.otherProducts = res.data.randoms;



            this.isSDKDetail = this.productDetail.productTypeName == "SDK";

            this.isDefaultApp = this.productDetail.productBaseId.length < 10;

          } else {

            this.$message.error(res.msg);

          }

        })

        .catch((err) => {

          this.$message.error(err.msg);

        });

      this.isActive = this.detailType == "active";

      this.showInstallNotActive = this.detailType == "activeNotInstall";

    },

    goback() {

      this.productDetail = {};

      this.$emit("goback");

    },

    isShow(authority) {

      return (

        this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1

      );

    },

    closeDial() {

      this.productDetailVisible = false;

      this.productDetail = {};

      this.otherProducts = [];

    },



    resetStack() {

      this.forwardStack = [];

      this.backStack = [];

      this.backDisable = true;

      this.forwardDisable = true;

    },

    checkInWindow(item) {

      getAppDetail({ id: item.id }).then((res) => {

        this.productDetail = res.data.detail;

        this.productDetail.iconBlob = item.iconBlob;

        this.actId = this.productDetail.productBaseId;

        this.isSDKDetail = this.productDetail.productTypeName == "SDK";

        this.isDefaultApp = this.productDetail.productBaseId.length < 10;



        this.otherProducts = res.data.randoms;

      });

    },

    checkIsDefOrNot(id) {

      if (id.length > 10) {

        this.isDefaultApp = false;

      } else {

        this.isDefaultApp = true;

      }

    },

    backwards() {

      if (this.backStack.length == 0) {

        this.backDisable = true;

        return;

      }

      this.forwardStack.push([this.productDetail, this.otherProducts]);

      let item = this.backStack.pop();

      this.productDetail = item[0];

      this.checkIsDefOrNot(this.productDetail.productBaseId);

      this.otherProducts = item[1];

      this.forwardDisable = false;

      if (this.backStack.length == 0) {

        this.backDisable = true;

      }

    },

    forwards() {

      if (this.forwardStack.length == 0) {

        this.forwardDisable = true;

        return;

      }



      this.backStack.push([this.productDetail, this.otherProducts]);

      this.backDisable = false;

      let item = this.forwardStack.pop();



      this.productDetail = item[0];

      this.otherProducts = item[1];

      if (this.forwardStack.length == 0) {

        this.forwardDisable = true;

      }

    },

    //离线安装

    offlineInstall() {

      this.installDialogVisible = false;

      this.isInstall = true;

      //安装

      installSdk(this.installFile)

        .then((res) => {

          if (res.success) {

            this.isInstall = false;

            this.$message({

              type: "success",

              message: '安装成功,将跳转至"已激活"中查看',

            });

            setTimeout(() => {

              this.getAllSdk();

              window.parent.postMessage(

                {

                  msg: "AppUpdate",

                },

                "*"

              );

              this.activeName = "myAlgorithm";

            }, 3000);

          }

        })

        .catch((e) => {

          this.isInstall = false;

          this.$message({

            type: "error",

            message: e.data,

          });

        });

    },

    downloadApp(app, action) {

      if (action == "upgrade") {

        app.upgradeLoading = true;

      } else {

        app.installLoading = true;

      }

      let _this = this;



      installApp({ path: app.id })

        .then((res) => {

          if (res && res.success) {

            _this.$notify({

              title: "成功",

              message: "安装应用成功",

              type: "success",

            });

            setTimeout(() => {

              if (action == "upgrade") {

                app.upgradeLoading = false;

              } else {

                app.installLoading = false;

              }

              window.parent.postMessage(

                {

                  msg: "AppUpdate",

                },

                "*"

              );

            }, 3000);

          } else {

          }

        })

        .catch((e) => {

          _this.$notify({

            title: "安装失败",

            message: e.data,

            type: "warning",

          });

          if (action == "upgrade") {

            app.upgradeLoading = false;

          } else {

            app.installLoading = false;

          }

        });



      // 开启自动刷新

      this.appUpgreading = true;

    },

    async getAllApps() {

      let iArry = [],

        sArry = [],

        nArry = [];

      let rsp = await getApps();

      if (rsp && rsp.success) {

        // 遍历app的过程重置

        this.appUpgreading = false;



        rsp.data.forEach((item) => {

          let obj = Object.assign(

            { unloadLoading: false, upgradeLoading: false },

            item

          );

          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {

            obj.upgradeLoading = true;



            this.appUpgreading = true;

          }



          if (obj.upgradeDone) {

            this.$notify({

              type: "success",

              message: 1 ? "算法安装成功" : "算法升级成功",

            });

          }



          item.installed ? iArry.push(obj) : sArry.push(obj);

          item.isUpgrade && nArry.push(obj);

        });

      }

      this.installedApps = iArry;

      this.storeApps = sArry;

      this.hasNewVersionApp = nArry;

    },

    unLoad(app) {

      let _this = this;

      this.$confirm("确定要卸载该应用吗?", "提示")

        .then(() => {

          _this.productDetailVisible = false;

          app.unloadLoading = true;

          removeApp({ appId: app.id })

            .then((res) => {

              if (res && res.success) {

                app.unloadLoading = false;

                // _this.getAllApps();

                this.$emit("flushApp")

                window.parent.postMessage(

                  {

                    msg: "AppUpdate",

                  },

                  "*"

                );

                _this.$notify({

                  title: "成功",

                  message: "卸载应用成功",

                  type: "success",

                });

              }

            })

            .catch((e) => {

              app.unloadLoading = false;

            });

        })

        .catch((e) => {});

    },

    actSdkOrApp(item, type = "sdk") {

      this.checkDetail(item, "inactive");

      this.actType = type;

      this.actId = item.id;

      this.actStep = 0;

      this.activeCode = "";

      this.activedSdkOrApp = this.newActInfo();

    },

    cancelActivate() {

      this.showInputCode = false;

      this.activeCode = "";

    },

    newActInfo() {

      return {

        activateCode: "",

        productName: "",

        setting: "",

        expireTime: "",

        licence: "",

        devIds: "",

      };

    },

    getUnActivedList() {

      getUnActivedSdk().then((res) => {

        if (res.code == 200) {

          this.unActivedSDKList = res.data;

        }

      });

    },

    getUnActivedAppList() {

      getUnActivedApp().then((res) => {

        if (res.code == 200) {

          this.unActivedAppList = res.data;

        }

      });

    },

    actived() {

      let _this = this;

      if (this.activeCode.trim() == "") {

        this.$notify({

          type: "error",

          message: "激活码不能为空",

        });

        return;

      }

      if (this.actType == "sdk") {

        //激活算法

        actPageAlg(this.actId, this.activeCode)

          .then((res) => {

            if (res.data.isSuccess) {

              this.productDetailVisible = false;

              _this.activedSdkOrApp = res.data.successMsg;

              this.showActivateSuccess = true;

              _this.actStep++;

              _this.getUnActivedList();

              _this.getAllSdk();

            } else {

              _this.$notify({

                type: "error",

                message: res.data.failMsg.failMsg,

              });

            }

          })

          .catch((e) => {

            console.log(e);

          });

      } else if (this.actType == "app") {

        //激活应用

        actApp(this.actId, this.activeCode)

          .then((res) => {

            if (res.data.isSuccess) {

              this.productDetailVisible = false;

              _this.activedSdkOrApp = res.data.successMsg;

              this.showActivateSuccess = true;

              _this.actStep++;

              _this.getUnActivedAppList();

              _this.getAllApps();

            } else {

              _this.$notify({

                type: "error",

                message: res.data.failMsg.failMsg,

              });

            }

          })

          .catch((e) => {

            console.log(e);

          });

      }

    },

    checkMyAlgorith() {

      this.showActivateSuccess = false;

      this.goback();

      this.activeName = "已激活";

    },

    onFileUpload(file) {

      this.patchFile = { ...file };

      this.fileAdded = true;

      const h = this.$createElement;

      //上传完成获取安装信息

      let _this = this;

      getInstallInfo(file)

        .then((res) => {

          _this.installFile = file;

          if (res.success) {

            _this.installDialogVisible = true;

            if (res.data.apps.length > 0) {

              _this.installAppPackage = {

                appId: res.data.apps[0].appId,

                version: res.data.apps[0].version,

                productName: res.data.productName,

                installContent: res.data.apps[0].installContent,

              };

            }

            if (res.data.sdks.length > 0) {

              _this.installSdkPackage = {

                appId: res.data.sdks[0].sdkId,

                version: res.data.sdks[0].version,

                productName: res.data.productName,

                installContent: res.data.sdks[0].installContent,

              };

            }

          } else {

            this.$message({

              type: "error",

              message: res.msg,

            });

          }

        })

        .catch((e) => {

          this.$message({

            type: "error",

            message: e.msg,

          });

        });

    },

    openApp() {

      window.parent.postMessage(

        { msg: "toOpenApp?" + this.productDetail.productBaseId },

        "*"

      );

    },

    onFileAdded(f) {

      this.patchUpdateStatus = "";

    },

    async getAllSdk() {

      let installedList = [];

      let unInstalledList = [];

      let hasNewVersionList = [];

      let res = await findAllSdk();

      if (res && res.success) {

        this.sdkUpgreading = false;



        res.data.forEach((item) => {

          let obj = Object.assign(

            { unloadLoading: false, upgradeLoading: false },

            item

          );

          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {

            obj.upgradeLoading = true;



            this.sdkUpgreading = true;

          }



          //算法软件 已安装其中包含待升级 未安装

          item.installed ? installedList.push(obj) : unInstalledList.push(obj);

          item.isUpgrade ? hasNewVersionList.push(obj) : null;

        });

      }

      this.installedList = installedList;

      this.notInstalledList = unInstalledList;

      this.toUpdateArr = this.installedList.slice(0, 4);

      this.hasNewVersionSdk = hasNewVersionList;

    },

    unloadSDKinWin() {

      let appToUnload;

      let sdkToUnload;

      if (this.productDetail.productTypeName == "应用") {

        appToUnload = this.installedApps.find((item) => {

          return item.id == this.productDetail.productBaseId;

        });

        this.unLoad(appToUnload);

      } else {

        sdkToUnload = this.installedList.find((item) => {

          return item.id == this.productDetail.productBaseId;

        });

        this.unLoadSdk(sdkToUnload);

      }

    },

    //卸载算法

    unLoadSdk(sdk) {

      let _this = this;

      this.$confirm("确定要卸载该算法吗?", "提示")

        .then(() => {

          _this.productDetailVisible = false;

          sdk.unloadLoading = true;

          removeSdk({ sdkId: sdk.id })

            .then((res) => {

              if (res && res.success) {

                sdk.unloadLoading = false;

                this.$notify.success("卸载完成");

                // _this.getAllSdk();

                this.$emit("flushSdk")

                window.parent.postMessage({ msg: "AppUpdate" }, "*");

              }

            })

            .catch((e) => {

              sdk.unloadLoading = false;

            });

        })

        .catch((e) => {});

    },

    upgradeSDKinWin() {

      this.isUpgrading = !this.isUpgrading;

      if (this.productDetail.productTypeName == "应用") {

        installApp({ path: this.productDetail.productBaseId })

          .then((res) => {

            if (res && res.success) {

              this.$notify.success("升级完成");

              this.needToUpgradeInWin = false;

              this.productDetail.isUpgrade = false;

              this.isUpgrading = !this.isUpgrading;

            }

          })

          .catch((e) => {

            this.$notify.error("升级失败");

            this.isUpgrading = !this.isUpgrading;

          });



        // 开启自动刷新

        this.appUpgreading = true;

      } else {

        downloadSdk({ path: this.productDetail.productBaseId })

          .then((res) => {

            this.needToUpgradeInWin = false;

            this.productDetail.isUpgrade = false;

            this.isUpgrading = !this.isUpgrading;

            this.$notify.success("升级完成");

          })

          .catch((err) => {

            this.$notify.error("升级失败");

            this.isUpgrading = !this.isUpgrading;

          });

        this.sdkUpgreading = true;

      }

    },

    downloadSdkInSide() {

      this.downloadItem = this.productDetail.productBaseId;

      this.isUpgrading = true;

      downloadSdk({ path: this.productDetail.productBaseId })

        .then((rsp) => {

          this.productDetailVisible = false;

          this.downloadItem = "";

          this.$notify.success("算法已安装");

          this.isUpgrading = false;

        })

        .catch((err) => {

          this.$notify.warning(err.data);

          this.downloadItem = "";

          this.isUpgrading = false;

        });

      // 开启自动刷新

      this.sdkUpgreading = true;

    },

    donwload(item, typ) {

      item.upgradeLoading = true;

      this.downloadItem = item.id;

      downloadSdk({ path: item.id })

        .then((rsp) => {

          item.upgradeLoading = false;

          this.downloadItem = "";

          window.parent.postMessage(

            {

              msg: "AppUpdate",

            },

            "*"

          );

        })

        .catch((err) => {

          this.$notify({

            type: "warning",

            message: err.data,

          });

          item.upgradeLoading = false;

          this.downloadItem = "";

        });

      // 开启自动刷新

      this.sdkUpgreading = true;

    },

    inputBlur(item) {

      this.$set(item, "isEdit", false);

    },

    autoRefreshAppAndSdkState() {

      // 关闭后退出

      if (!this.autoRefresh) {

        return;

      }

      if (this.appUpgreading) {

        this.getAllApps();

      }

      if (this.sdkUpgreading) {

        this.getAllSdk();

      }

      let _this = this;

      setTimeout(() => {

        _this.autoRefreshAppAndSdkState();

      }, 500);

    },

  },

};

</script>

<style lang="scss">

.detail-page {

  width: 100% !important;

  height: 100%;

  box-sizing: border-box;

  text-align: left;

  //   min-width: 1106px;

  .detail-top {

    padding: 35px 60px;

    padding-bottom: 20px;

    border-bottom: 3px solid #f2f2f2;

    .title-area {

      display: flex;

      margin-bottom: 10px;

      position: relative;

      .back-btn {

        position: absolute;

        right: 0;

        top: 0;

        width: 51px;

        height: 20px;

        line-height: 20px;

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

        .icon {

          margin-right: 3px;

          font-size: 18px;

        }

        .back-text {

          font-size: 14px;

          letter-spacing: 0.5px;

        }

      }

      .icon-img {

        height: 60px;

        width: 60px;

        margin-right: 20px;

        img {

          width: 60px;

          height: 60px;

        }

      }

      .right-info {

        .right-info-1 {

          display: flex;

          align-items: center;

          margin-bottom: 10px;



          .name {

            font-size: 16px;

            font-weight: bold;

            letter-spacing: 0.5px;

            line-height: 26px;

            margin-right: 12px;

          }

          .el-tag {

            line-height: 18px;

            height: 18px;

            padding: 0 5px;

            color: #bdbdbd;

            border: 1px solid #e0e0e0;

          }

        }

        .right-info-2 {

          display: flex;

          align-items: center;

          .activeInput {

            .el-input__suffix {

              display: flex;

              align-items: center;

              .el-input__suffix-inner {

                border-color: none;

                .el-icon-circle-close:before {

                  content: "\e79d" !important;

                  font-size: 14px;

                }

              }

            }

          }

          .iconfont {

            margin-left: 10px;

            font-size: 15px;

            cursor: pointer;

          }

          .el-input {

            margin-right: 12px;

            width: 224px;

            font-size: 12px;

            .el-input__inner {

              border: 1px solid #bdbdbd;

              border-radius: 20px;

              height: 22px;

              line-height: 22px;

            }

          }

          .el-button {

            padding: 3px 13px;

            color: #4f4f4f;

            font-weight: bold;

            letter-spacing: 0.5px;

            background: #f2f2f7;

            border: 1px solid #f2f2f7;

          }

          .update-btn {

            border-color: #23d7ee;

            background-color: rgba(29, 212, 236, 0.1);

          }

          .act-btn {

            background: #23d7ee;

            border: 1px solid #23d7ee;

            color: #f2f2f2;

          }

          // .act-btn:hover {

          //   background: #089fb3 !important;

          //   border-color: #089fb3 !important;

          // }

          // .el-button:hover {

          //   border-color: #23d7ee;

          //   background-color: rgba(29, 212, 236, 0.1);

          // }

          .el-button + .el-button {

            margin-left: 12px;

          }

        }

      }

    }

    .text-area {

      .text-line {

        line-height: 17px;

        height: 25px;

        .icon {

          font-size: 14px;

           margin-right: 4px;



        }

        .title {

          font-size: 12px;

          font-weight: bold;

          letter-spacing: 0.5px;

        }

        .desc {

          letter-spacing: 0.5px;

        }

      }

    }

  }

  .detail-mid {

    padding: 20px 60px;

    display: flex;

    justify-content: space-between;

    border-bottom: 3px solid #f2f2f2;

    .mid-left {

      max-width: 560px;



      .mid-title {

        font-size: 16px;

        font-weight: bold;

        letter-spacing: 0.5px;

        line-height: 26px;

        margin-bottom: 10px;

      }

      .desc-item {

        margin-bottom: 10px;



        .title {

          width: 80px;

          height: 20px;

          letter-spacing: 0.5px;

          font-size: 12px;

          color: #828282;

          display: flex;

          align-items: center;

          justify-content: center;

          font-weight: bold;

          border: 1px solid;

          border: 1px solid #e0e0e0;

          box-sizing: border-box;

          border-radius: 22px;

        }

        .desc {

          margin-left: 20px;

          color: #4f4f4f;

          font-size: 12px;

          line-height: 17px;

        }

      }

    }

    .mid-right {

      width: 460px;

      .el-carousel__container {

        position: relative;

        height: 280px;

        .el-carousel__item {

          display: flex;

          align-items: center;

          img {

            width: 100%;

          }

        }

      }

      .imgwrap {

        img {

          width: 100%;

        }

      }

    }

  }

  .rec-bot {

    padding: 20px 60px;

    .rec-title {

      font-size: 16px;

      font-weight: bold;

      letter-spacing: 0.5px;

      line-height: 26px;

      margin-bottom: 20px;

    }

  }

  .rec-items {

    .rec-item {

      cursor: pointer;

      float: left;

      display: flex;

      margin: 0 15px;

      margin-bottom: 30px;

      padding: 2px 0;

      height: 62px;

      box-sizing: border-box;

      width: 248px;

      .icon-img {

        width: 58px;

        height: 58px;

        img {

          width: 58px;

          height: 58px;

        }

      }

      .desc {

        box-sizing: border-box;

        padding: 0 12px;



        width: 100%;

        .desc-1 {

          font-size: 14px;

          font-weight: bold;

          line-height: 28px;

          height: 28px;

          letter-spacing: 0.1px;

          color: #4f4f4f;

        }

        .desc-2 {

          font-size: 12px;

          color: #828282;

        }

      }

      .right-btn {

        padding: 5px 0;

        .el-button {

          padding: 3px 12px;

          border-radius: 22px;

            background-color: #f2f2f7 !important;

                border-color: #f2f2f7 !important;

                color: #4f4f4f;

                font-size: 12px;

                font-weight: bold;

        }

        // .el-button--primary:hover {

        //   background: #089fb3 !important;

        //   border-color: #089fb3 !important;

        // }

      }

    }

  }

  .rec-items:after {

    content: "";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

  }

}

</style>



<template>
  <div class="detail-page">
    <div class="detail-top">
      <div class="title-area">
        <div class="icon-img">
          <img v-if="productDetail.logoUrl" :src="productDetail.logoUrl" alt />
        </div>
        <div class="right-info">
          <div class="right-info-1">
            <span class="name">{{ productDetail.productName }}</span>
            <el-tag type="info" size="mini" color="#fff">{{ isSDKDetail ? "算法" : "应用" }}</el-tag>
          </div>
          <div class="right-info-2">
            <el-button size="mini" round class="update-btn" @click="upgradeSDKinWin" v-if="productDetail.isUpgrade"
              >更新</el-button
            >
            <el-button size="mini" round v-if="!isSDKDetail && isActive" @click="openApp">打开</el-button>
            <el-button size="mini" round v-if="isActive && !isDefaultApp" @click="unloadSDKinWin">卸载</el-button>
            <el-button
              size="mini"
              round
              v-if="!isActive && (!detailPrice || showInstallNotActive)"
              @click="downloadSdkInSide"
              >安装</el-button
            >
            <!-- suffix-icon="iconfont iconchushaixuanxiang" -->
            <el-input
              class="activeInput"
              placeholder="请输入激活码"
              size="mini"
              clearable
              :autofocus="true"
              v-model="activeCode"
              v-if="!isActive && !showInstallNotActive && detailPrice"
            >
            </el-input>
            <el-button
              size="mini"
              round
              class="act-btn"
              v-if="!isActive && !showInstallNotActive && detailPrice"
              @click="actived"
              >激活</el-button
            >
            <!-- <span
              class="icon iconfont"
              v-if="!isActive && !showInstallNotActive"
              @click="activeCode = ''"
              >&#xe6cb;</span
            > -->
          </div>
        </div>
        <!-- <div class="back-btn" @click="goback">
          <span class="icon iconfont">&#xe680;</span>
          <span class="back-text">返回</span>
        </div> -->
      </div>
      <div class="text-area">
        <div class="text-line">
          <span class="icon iconfont">&#xe710;</span>
          <span class="title">版本：</span>
          <span class="desc">{{ productDetail.productVersion }}</span>
        </div>
        <div class="text-line">
          <span class="icon iconfont">&#xe75b;</span>
          <span class="title">概述：</span>
          <span class="desc">{{ productDetail.description || "暂无" }}</span>
        </div>
        <div class="text-line">
          <span class="icon iconfont">&#xe716;</span>
          <span class="title">详述：</span>
          <span class="desc">{{ productDetail.summary || "暂无" }}</span>
        </div>
      </div>
    </div>
    <div class="detail-mid">
      <div class="mid-left">
        <div class="mid-title">{{ isSDKDetail ? "应用场景" : "功能特点" }}</div>
        <div v-for="(item, index) in productDetail.funcInfo" :key="index" class="desc-item">
          <div class="title">{{ item.title }}</div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
      <div class="mid-right">
        <el-carousel
          trigger="click"
          :autoplay="false"
          indicator-position="none"
          :arrow="productDetail.pics !== undefined ? (productDetail.pics.length > 1 ? 'always' : 'never') : 'never'"
        >
          <el-carousel-item v-for="(item, index) in productDetail.pics" :key="index">
            <img v-if="item.type != 'video'" :src="item.url" class="cursor-pointer" preview />
            <video v-if="item.type == 'video'" :src="'/httpImage/' + item.url" controls></video>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="rec-bot">
      <div class="rec-title">{{ isSDKDetail ? "推荐算法" : "推荐应用" }}</div>

      <div class="rec-items">
        <div class="rec-item" v-for="(item, index) in otherProducts" :key="index" @click="checkInWindow(item)">
          <div class="icon-img">
            <img
              v-if="item.iconBlob"
              :src="item.iconBlob.indexOf(',') > 0 ? item.iconBlob : `data:image/png;base64,${item.iconBlob}`"
              alt
            />
          </div>
          <div class="desc">
            <el-tooltip :content="item.name" effect="light">
              <div class="desc-1">{{ item.name }}</div>
            </el-tooltip>
            <div class="desc-2">版本 {{ item.productVersion || "2.0.0" }}</div>
          </div>
          <div class="right-btn">
            <el-button size="small" type="primary" round @click="checkInWindow(item)">查看</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="showActivateSuccess" title="激活成功！" width="30%" class="active-Dial">
      <div class="dialog-active">
        <ul class="desc">
          <li>
            <label>激活码:</label>
            <span>{{ activedSdkOrApp.activateCode }}</span>
          </li>
          <li>
            <label>产品名称:</label>
            <span>{{ activedSdkOrApp.productName }}</span>
          </li>
          <li>
            <label>配置详情:</label>
            <span>{{ activedSdkOrApp.setting }}</span>
          </li>
          <li>
            <label>服务到期日:</label>
            <span>{{ activedSdkOrApp.expireTime }}</span>
          </li>
          <li>
            <label>许可证:</label>
            <span>{{ activedSdkOrApp.licence }}</span>
          </li>
        </ul>
        <div class="text-right">
          <el-button type="primary" @click="checkMyAlgorith">确定</el-button>
          <p class="tip">提示：请在“已激活”中查看并安装算法</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findAllSdk, downloadSdk, installSdk, getInstallInfo, removeSdk } from "./api"
import {
  getApps,
  installApp,
  getAppDetail,
  removeApp,
  getUnActivedSdk,
  actPageAlg,
  getUnActivedApp,
  actApp
} from "@/api/app"
import { getUrlKey } from "@/api/utils"
export default {
  components: {},
  computed: {
    updateNum() {
      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length
    },
    isAdmin() {
      if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username
        return loginName === "superadmin" || loginName === "basic"
      }

      return false
    }
  },
  data() {
    return {
      installedList: [],
      hasNewVersionSdk: [],
      hasNewVersionApp: [],
      notInstalledList: [],
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      activeName: "myAlgorithm",
      patchUpdateStatus: "",
      downloadItem: "",
      downloading: false,
      actStep: 0,
      showActivateSuccess: false,
      activeCode: "",
      isInstall: false,
      installDialogVisible: false,
      installAppPackage: null,
      installSdkPackage: null,
      isActive: true,
      isDefaultApp: false,
      unActivedSDKList: [],
      unActivedAppList: [],
      isSDKDetail: true,
      actType: "",
      actId: "",
      select: "",
      activedSdkOrApp: {
        activateCode: "",
        productName: "",
        setting: "",
        expireTime: "",
        licence: "",
        devIds: ""
      },
      installedApps: [],
      storeApps: [],
      installFile: {},
      appUpgreading: false,
      sdkUpgreading: false,
      autoRefresh: true,
      productDetailVisible: false,
      isUpgrading: false,
      productDetail: {},
      otherProducts: [],
      backStack: [],
      toUpdateArr: [],
      toUpdateArr1: [],
      forwardStack: [],
      backDisable: true,
      forwardDisable: true,
      showInputCode: false,
      needToUpgradeInWin: false,
      showInstallNotActive: false
    }
  },
  props: {
    detailType: {
      type: String
    },
    detailProductID: {
      type: String
    },
    detailPrice: {},
    isSdk: {}
  },
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector("input").focus()
      }
    }
  },
  mounted() {
    this.getDetail()
    this.autoRefreshAppAndSdkState()
    // this.getUnActivedList();
    // this.getUnActivedAppList();
    this.showBackBtn()
    this.addBackListener()
  },
  beforeDestroy() {
    this.autoRefresh = false
    this.hiddenBackBtn()
  },
  methods: {
    getDetail(id) {
      getAppDetail({ id: id || this.detailProductID })
        .then((res) => {
          if (res.success) {
            this.productDetail = res.data.detail
            this.otherProducts = res.data.randoms

            this.isSDKDetail = this.productDetail.productTypeName == "SDK"
            this.isDefaultApp = this.productDetail.productBaseId.length < 10
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((err) => {
          this.$message.error(err.msg)
        })
      this.isActive = this.detailType == "active"
      this.showInstallNotActive = this.detailType == "activeNotInstall"
    },
    goback() {
      this.productDetail = {}
      this.$emit("goback")
    },
    isShow(authority) {
      return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
    },
    closeDial() {
      this.productDetailVisible = false
      this.productDetail = {}
      this.otherProducts = []
    },

    resetStack() {
      this.forwardStack = []
      this.backStack = []
      this.backDisable = true
      this.forwardDisable = true
    },
    checkInWindow(item) {
      getAppDetail({ id: item.id }).then((res) => {
        this.productDetail = res.data.detail
        this.productDetail.iconBlob = item.iconBlob
        this.actId = this.productDetail.productBaseId
        this.isSDKDetail = this.productDetail.productTypeName == "SDK"
        this.isDefaultApp = this.productDetail.productBaseId.length < 10

        this.otherProducts = res.data.randoms
      })
    },
    checkIsDefOrNot(id) {
      if (id.length > 10) {
        this.isDefaultApp = false
      } else {
        this.isDefaultApp = true
      }
    },
    backwards() {
      if (this.backStack.length == 0) {
        this.backDisable = true
        return
      }
      this.forwardStack.push([this.productDetail, this.otherProducts])
      let item = this.backStack.pop()
      this.productDetail = item[0]
      this.checkIsDefOrNot(this.productDetail.productBaseId)
      this.otherProducts = item[1]
      this.forwardDisable = false
      if (this.backStack.length == 0) {
        this.backDisable = true
      }
    },
    forwards() {
      if (this.forwardStack.length == 0) {
        this.forwardDisable = true
        return
      }

      this.backStack.push([this.productDetail, this.otherProducts])
      this.backDisable = false
      let item = this.forwardStack.pop()

      this.productDetail = item[0]
      this.otherProducts = item[1]
      if (this.forwardStack.length == 0) {
        this.forwardDisable = true
      }
    },
    //离线安装
    offlineInstall() {
      this.installDialogVisible = false
      this.isInstall = true
      //安装
      installSdk(this.installFile)
        .then((res) => {
          if (res.success) {
            this.isInstall = false
            this.$message({
              type: "success",
              message: '安装成功,将跳转至"已激活"中查看'
            })
            setTimeout(() => {
              this.getAllSdk()
              window.parent.postMessage(
                {
                  msg: "AppUpdate"
                },
                "*"
              )
              this.activeName = "myAlgorithm"
            }, 3000)
          }
        })
        .catch((e) => {
          console.log(e)
          this.isInstall = false
          this.$message({
            type: "error",
            message: e.msg
          })
        })
    },
    downloadApp(app, action) {
      if (action == "upgrade") {
        app.upgradeLoading = true
      } else {
        app.installLoading = true
      }
      let _this = this

      installApp({ path: app.id })
        .then((res) => {
          if (res && res.success) {
            _this.$notify({
              title: "成功",
              message: "安装应用成功",
              type: "success"
            })
            setTimeout(() => {
              if (action == "upgrade") {
                app.upgradeLoading = false
              } else {
                app.installLoading = false
              }
              window.parent.postMessage(
                {
                  msg: "AppUpdate"
                },
                "*"
              )
            }, 3000)
          } else {
          }
        })
        .catch((e) => {
          _this.$notify({
            title: "安装失败",
            message: e.data,
            type: "warning"
          })
          if (action == "upgrade") {
            app.upgradeLoading = false
          } else {
            app.installLoading = false
          }
        })

      // 开启自动刷新
      this.appUpgreading = true
    },
    async getAllApps() {
      let iArry = [],
        sArry = [],
        nArry = []
      let rsp = await getApps()
      if (rsp && rsp.success) {
        // 遍历app的过程重置
        this.appUpgreading = false

        rsp.data.forEach((item) => {
          let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
            obj.upgradeLoading = true
            this.appUpgreading = true
          }

          if (obj.upgradeDone) {
            this.$notify({
              type: "success",
              message: 1 ? "算法安装成功" : "算法升级成功"
            })
          }

          item.installed ? iArry.push(obj) : sArry.push(obj)
          item.isUpgrade && nArry.push(obj)
        })
      }
      this.installedApps = iArry
      this.storeApps = sArry
      this.hasNewVersionApp = nArry
    },
    unLoad(app) {
      let _this = this
      this.$confirm("确定要卸载该应用吗?", "提示")
        .then(() => {
          _this.productDetailVisible = false
          app.unloadLoading = true
          removeApp({ appId: app.id })
            .then((res) => {
              if (res && res.success) {
                app.unloadLoading = false
                this.$emit("flushApp")
                window.parent.postMessage(
                  {
                    msg: "AppUpdate"
                  },
                  "*"
                )
                _this.$notify({
                  title: "成功",
                  message: "卸载应用成功",
                  type: "success"
                })
                this.goback()
              }
            })
            .catch((e) => {
              app.unloadLoading = false
            })
        })
        .catch((e) => {})
    },
    actSdkOrApp(item, type = "sdk") {
      this.checkDetail(item, "inactive")
      this.actType = type
      this.actId = item.id
      this.actStep = 0
      this.activeCode = ""
      this.activedSdkOrApp = this.newActInfo()
    },
    cancelActivate() {
      this.showInputCode = false
      this.activeCode = ""
    },
    newActInfo() {
      return {
        activateCode: "",
        productName: "",
        setting: "",
        expireTime: "",
        licence: "",
        devIds: ""
      }
    },
    getUnActivedList() {
      getUnActivedSdk().then((res) => {
        if (res.code == 200) {
          this.unActivedSDKList = res.data
        }
      })
    },
    getUnActivedAppList() {
      getUnActivedApp().then((res) => {
        if (res.code == 200) {
          this.unActivedAppList = res.data
        }
      })
    },
    actived() {
      let _this = this
      if (this.activeCode.trim() == "") {
        this.$notify({
          type: "error",
          message: "激活码不能为空"
        })
        return
      }
      if (this.isSdk) {
        //激活算法
        actPageAlg(this.detailProductID, this.activeCode)
          .then((res) => {
            if (res.data.isSuccess) {
              this.productDetailVisible = false
              _this.activedSdkOrApp = res.data.successMsg
              this.showActivateSuccess = true
              _this.actStep++
              _this.getUnActivedList()
              _this.getAllSdk()
            } else {
              _this.$notify({
                type: "error",
                message: res.data.failMsg.failMsg
              })
            }
          })
          .catch((e) => {
            this.$notify({
              type: "error",
              message: e.msg
            })
          })
      } else {
        //激活应用
        actApp(this.detailProductID, this.activeCode)
          .then((res) => {
            if (res.data.isSuccess) {
              this.productDetailVisible = false
              _this.activedSdkOrApp = res.data.successMsg
              this.showActivateSuccess = true
              _this.actStep++
              _this.getUnActivedAppList()
              _this.getAllApps()
            } else {
              _this.$notify({
                type: "error",
                message: res.data.failMsg.failMsg
              })
            }
          })
          .catch((e) => {
            this.$notify({
              type: "error",
              message: e.msg
            })
          })
      }
    },
    checkMyAlgorith() {
      this.showActivateSuccess = false
      this.goback()
      this.activeName = "已激活"
    },
    onFileUpload(file) {
      this.patchFile = { ...file }
      this.fileAdded = true
      const h = this.$createElement
      //上传完成获取安装信息
      let _this = this
      getInstallInfo(file)
        .then((res) => {
          _this.installFile = file
          if (res.success) {
            _this.installDialogVisible = true
            if (res.data.apps.length > 0) {
              _this.installAppPackage = {
                appId: res.data.apps[0].appId,
                version: res.data.apps[0].version,
                productName: res.data.productName,
                installContent: res.data.apps[0].installContent
              }
            }
            if (res.data.sdks.length > 0) {
              _this.installSdkPackage = {
                appId: res.data.sdks[0].sdkId,
                version: res.data.sdks[0].version,
                productName: res.data.productName,
                installContent: res.data.sdks[0].installContent
              }
            }
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: e.msg
          })
        })
    },
    openApp() {
      window.parent.postMessage({ msg: "toOpenApp?" + this.productDetail.productBaseId }, "*")
    },
    onFileAdded(f) {
      this.patchUpdateStatus = ""
    },
    async getAllSdk() {
      let installedList = []
      let unInstalledList = []
      let hasNewVersionList = []
      let res = await findAllSdk()
      if (res && res.success) {
        this.sdkUpgreading = false

        res.data.forEach((item) => {
          let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
            obj.upgradeLoading = true
            this.sdkUpgreading = true
          }

          //算法软件 已安装其中包含待升级 未安装
          item.installed ? installedList.push(obj) : unInstalledList.push(obj)
          item.isUpgrade ? hasNewVersionList.push(obj) : null
        })
      }
      this.installedList = installedList
      this.notInstalledList = unInstalledList
      this.toUpdateArr = this.installedList.slice(0, 4)
      this.hasNewVersionSdk = hasNewVersionList
    },
    unloadSDKinWin() {
      let appToUnload
      let sdkToUnload
      if (this.productDetail.productTypeName == "应用") {
        appToUnload = this.installedApps.find((item) => {
          return item.id == this.productDetail.productBaseId
        })
        this.unLoad(appToUnload)
      } else {
        sdkToUnload = this.installedList.find((item) => {
          return item.id == this.productDetail.productBaseId
        })
        this.unLoadSdk(sdkToUnload)
      }
    },
    //卸载算法
    unLoadSdk(sdk) {
      let _this = this
      this.$confirm("确定要卸载该算法吗?", "提示")
        .then(() => {
          _this.productDetailVisible = false
          sdk.unloadLoading = true
          removeSdk({ sdkId: sdk.id })
            .then((res) => {
              if (res && res.success) {
                sdk.unloadLoading = false
                this.$notify.success("卸载完成")
                // _this.getAllSdk();
                this.$emit("flushSdk")
                window.parent.postMessage({ msg: "AppUpdate" }, "*")
                this.goback()
              }
            })
            .catch((e) => {
              console.log(e)
              sdk.unloadLoading = false
            })
        })
        .catch((e) => {
          console.log("取消", e)
        })
    },
    upgradeSDKinWin() {
      this.isUpgrading = !this.isUpgrading
      if (this.productDetail.productTypeName == "应用") {
        installApp({ path: this.productDetail.productBaseId })
          .then((res) => {
            if (res && res.success) {
              this.$notify.success("升级完成")
              this.needToUpgradeInWin = false
              this.productDetail.isUpgrade = false
              this.isUpgrading = !this.isUpgrading
            }
          })
          .catch((e) => {
            this.$notify.error("升级失败")
            this.isUpgrading = !this.isUpgrading
          })

        // 开启自动刷新
        this.appUpgreading = true
      } else {
        downloadSdk({ path: this.productDetail.productBaseId })
          .then((res) => {
            this.needToUpgradeInWin = false
            this.productDetail.isUpgrade = false
            this.isUpgrading = !this.isUpgrading
            this.$notify.success("升级完成")
          })
          .catch((err) => {
            this.$notify.error("升级失败")
            this.isUpgrading = !this.isUpgrading
          })
        this.sdkUpgreading = true
      }
    },
    downloadSdkInSide() {
      this.downloadItem = this.productDetail.productBaseId
      this.isUpgrading = true
      downloadSdk({ path: this.productDetail.productBaseId })
        .then((rsp) => {
          this.productDetailVisible = false
          this.downloadItem = ""
          this.$notify.success("算法已安装")
          this.isUpgrading = false
        })
        .catch((err) => {
          this.$notify.warning(err.data)
          this.downloadItem = ""
          this.isUpgrading = false
        })
      // 开启自动刷新
      this.sdkUpgreading = true
    },
    donwload(item, typ) {
      item.upgradeLoading = true
      this.downloadItem = item.id
      downloadSdk({ path: item.id })
        .then((rsp) => {
          item.upgradeLoading = false
          this.downloadItem = ""
          window.parent.postMessage(
            {
              msg: "AppUpdate"
            },
            "*"
          )
        })
        .catch((err) => {
          this.$notify({
            type: "warning",
            message: err.data
          })
          item.upgradeLoading = false
          this.downloadItem = ""
        })
      // 开启自动刷新
      this.sdkUpgreading = true
    },
    inputBlur(item) {
      this.$set(item, "isEdit", false)
    },
    autoRefreshAppAndSdkState() {
      this.getAllApps()
      this.getAllSdk()
      if (!this.autoRefresh) {
        return
      }
      setTimeout(() => {
        if (this.appUpgreading) {
          this.getAllApps()
        }
        if (this.sdkUpgreading) {
          this.getAllSdk()
        }
      }, 1000)
    },
    showBackBtn() {
      window.parent.postMessage(
        {
          msg: "showBack"
        },
        "*"
      )
    },
    hiddenBackBtn() {
      window.parent.postMessage(
        {
          msg: "hiddenBack"
        },
        "*"
      )
    },
    addBackListener() {
      window.addEventListener("message", (e) => {
        if (e.data.msg === "返回应用中心") {
          this.goback()
        }
      })
    }
  }
}
</script>
<style lang="scss">
.detail-page {
  width: 100% !important;
  height: 100%;
  box-sizing: border-box;
  text-align: left;
  //   min-width: 1106px;
  .detail-top {
    padding: 35px 60px;
    padding-bottom: 20px;
    border-bottom: 3px solid #f2f2f2;
    .title-area {
      display: flex;
      margin-bottom: 10px;
      position: relative;
      .back-btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 51px;
        height: 20px;
        line-height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .icon {
          margin-right: 3px;
          font-size: 18px;
        }
        .back-text {
          font-size: 14px;
          letter-spacing: 0.5px;
        }
      }
      .icon-img {
        height: 60px;
        width: 60px;
        margin-right: 20px;
        img {
          width: 60px;
          height: 60px;
        }
      }
      .right-info {
        .right-info-1 {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .name {
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 0.5px;
            line-height: 26px;
            margin-right: 12px;
          }
          .el-tag {
            line-height: 18px;
            height: 18px;
            padding: 0 5px;
            color: #bdbdbd;
            border: 1px solid #e0e0e0;
          }
        }
        .right-info-2 {
          display: flex;
          align-items: center;
          .activeInput {
            .el-input__suffix {
              display: flex;
              align-items: center;
              .el-input__suffix-inner {
                border-color: none;
                .el-icon-circle-close:before {
                  content: "\e79d" !important;
                  font-size: 14px;
                }
              }
            }
          }
          .iconfont {
            margin-left: 10px;
            font-size: 15px;
            cursor: pointer;
          }
          .el-input {
            margin-right: 12px;
            width: 224px;
            font-size: 12px;
            .el-input__inner {
              border: 1px solid #bdbdbd;
              border-radius: 20px;
              height: 22px;
              line-height: 22px;
            }
          }
          .el-button {
            padding: 3px 13px;
            color: #4f4f4f;
            font-weight: bold;
            letter-spacing: 0.5px;
            background: #f2f2f7;
            border: 1px solid #f2f2f7;
          }
          .update-btn {
            border-color: #23d7ee;
            background-color: rgba(29, 212, 236, 0.1);
          }
          .act-btn {
            background: #23d7ee;
            border: 1px solid #23d7ee;
            color: #f2f2f2;
          }
          // .act-btn:hover {
          //   background: #089fb3 !important;
          //   border-color: #089fb3 !important;
          // }
          // .el-button:hover {
          //   border-color: #23d7ee;
          //   background-color: rgba(29, 212, 236, 0.1);
          // }
          .el-button + .el-button {
            margin-left: 12px;
          }
        }
      }
    }
    .text-area {
      .text-line {
        line-height: 17px;
        height: 25px;
        .icon {
          font-size: 14px;
          margin-right: 4px;
        }
        .title {
          font-size: 12px;
          font-weight: bold;
          letter-spacing: 0.5px;
        }
        .desc {
          letter-spacing: 0.5px;
        }
      }
    }
  }
  .detail-mid {
    padding: 20px 60px;
    display: flex;
    justify-content: space-between;
    border-bottom: 3px solid #f2f2f2;
    .mid-left {
      max-width: 560px;

      .mid-title {
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 0.5px;
        line-height: 26px;
        margin-bottom: 10px;
      }
      .desc-item {
        margin-bottom: 10px;

        .title {
          display: inline-block;
          line-height: 20px;
          padding: 0px 10px;
          letter-spacing: 0.5px;
          font-size: 12px;
          color: #828282;
          font-weight: bold;
          border: 1px solid #e0e0e0;
          box-sizing: border-box;
          border-radius: 22px;
        }
        .desc {
          margin-left: 20px;
          color: #4f4f4f;
          font-size: 12px;
          line-height: 17px;
        }
      }
    }
    .mid-right {
      width: 460px;
      .el-carousel__container {
        position: relative;
        height: 280px;
        .el-carousel__item {
          display: flex;
          align-items: center;
          img {
            width: 100%;
          }
        }
      }
      .imgwrap {
        img {
          width: 100%;
        }
      }
    }
  }
  .rec-bot {
    padding: 20px 60px;
    .rec-title {
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 0.5px;
      line-height: 26px;
      margin-bottom: 20px;
    }
  }
  .rec-items {
    .rec-item {
      cursor: pointer;
      float: left;
      display: flex;
      margin: 0 15px;
      margin-bottom: 30px;
      padding: 2px 0;
      height: 62px;
      box-sizing: border-box;
      width: 248px;
      .icon-img {
        width: 58px;
        height: 58px;
        img {
          width: 58px;
          height: 58px;
        }
      }
      .desc {
        box-sizing: border-box;
        padding: 0 12px;

        width: 100%;
        .desc-1 {
          font-size: 14px;
          font-weight: bold;
          line-height: 28px;
          width: 116px;
          height: 28px;
          letter-spacing: 0.1px;
          color: #4f4f4f;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .desc-2 {
          font-size: 12px;
          color: #828282;
        }
      }
      .right-btn {
        padding: 5px 0;
        .el-button {
          padding: 3px 12px;
          border-radius: 22px;
          background-color: #f2f2f7 !important;
          border-color: #f2f2f7 !important;
          color: #4f4f4f;
          font-size: 12px;
          font-weight: bold;
        }
        // .el-button--primary:hover {
        //   background: #089fb3 !important;
        //   border-color: #089fb3 !important;
        // }
      }
    }
  }
  .rec-items:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
</style>