<template>
  <div class="appList">
    <div class="apps">
      <div @click="helpDoc" class="app_item view">
        <a-badge :count="1">
          <app :info="help" />
        </a-badge>
      </div>
      <template v-for="(item, index) in dingApp">
        <div
          :key="index"
          :class="['app_item', mode]"
          @click="clickApp(item, index)"
        >
          <a-badge :count="resolveAppTag(item.tag)">
            <app :info="item" />
          </a-badge>
          <!-- <app v-else :info="item" /> -->
        </div>
      </template>
    </div>
    <div class="tools">
      <a-icon @click="goMenu('market')" class="icon-more" type="more" />
      <img
        @click="goMenu('settings')"
        class="user_avatar"
        v-if="userInfo"
        referrer="no-referrer"
        :src="userInfo.UserAvatar"
        alt=""
      />
    </div>
  </div>
</template>
<script>
import app from "./components/app.vue";
import { shell } from "electron";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  components: {
    app
  },
  computed: {
    ...mapState("main", ["mode", "installs", "userInfo", "devPlugins"]),
    isEditMode() {
      return this.mode === "edit";
    },
    help() {
      return {
        pluginName: "帮助",
        name: "帮助",
        url: "https://yre5673znb.feishu.cn/docs/doccnMnLv3iZ3epFvjXprnPum3b",
        icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Felement%2F40053%2F1100.png_860.png%21%2Ffw%2F562&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642577880&t=84032418744ad3e05d175dd6dd309c99"
      };
    },
    dingApp() {
      return [
        ...this.devPlugins.filter(plugin => {
          return plugin.ding === true;
        })
      ];
    }
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions("main", ["showMainUI", "openPlugin"]),
    ...mapMutations("main", [
      "uninstallApp",
      "saveUninstalls",
      "commonUpdate",
      "dingProdPlugin"
    ]),
    helpDoc() {
      shell.openExternal(
        "https://yre5673znb.feishu.cn/docs/doccnMnLv3iZ3epFvjXprnPum3b"
      );
    },
    clickApp(item, index) {
      if (this.isEditMode) {
        this.dingProdPlugin({
          payload: item,
          status: false
        });
        return;
      }
      this.openPlugin({
        cmd: item.pluginName,
        plugin: item,
        // feature: item,
        router: this.$router
      });
      // const url = item.url;
      // if (!url) return;
      // shell.openExternal(url);
      // window.open(url);
    },
    goMenu(key) {
      this.showMainUI();
      this.changePath({ key });
    },
    changePath({ key }) {
      const path = `/home/${key}`;
      // 避免重复点击导致跳转相同路由而爆红
      if (this.$router.history.current.fullPath != path) {
        this.$router.push({ path });
        this.commonUpdate({
          current: [key]
        });
      }
    },
    resolveAppTag(tag) {
      return this.isEditMode ? "×" : tag;
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/style/varable.less";
@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-1px, 0, 0) rotateZ(4deg);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(1px, 0, 0) rotateZ(-4deg);
  }
}

.edit {
  /deep/.app_icon {
    animation: shake 2s infinite;
  }
  &:nth-child(even) {
    /deep/.app_icon {
      animation-delay: 0.2s;
    }
  }
}

.appList {
  display: flex;
  justify-content: space-between;
  // justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  .apps {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    min-height: 84px;
  }
  /deep/.app_item {
    cursor: pointer;
    position: relative;
    &:not(:first-child) {
      margin-left: 24px;
    }
    &.view:hover {
      .app_icon {
        bottom: 0;
        z-index: 4;
      }
      .app_name,
      .ant-badge-count {
        opacity: 1;
        top: 10px;
      }
      .app_menu {
        z-index: 3;
        opacity: 1;
        .menu {
          &:nth-child(1) {
            transform: translate(-80px, 10px);
          }
          &:nth-child(2) {
            transform: translate(-50%, 40px);
          }
          &:nth-child(3) {
            transform: translate(26px, 10px);
          }
        }
      }
    }
    &.edit {
      pointer-events: none;
      .ant-badge-count {
        pointer-events: auto;
        opacity: 1;
        top: 30px;
        cursor: pointer;
      }
    }
    .ant-badge-count {
      opacity: 0;
      transition: all 0.3s;
      top: 0px;
      z-index: 4;
      background: @primary-color;
    }
  }
  .tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 6px;

    .icon-more {
      font-size: 26px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;
    }
    .user_avatar {
      width: 54px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
  }
}
</style>
