<template>
  <!-- 供应商管理首页 -->
  <div class="fullHeight">
    <div class="supplier-module" v-if="moduleList.length > 0">
      <div
        class="supplier-module-item"
        v-for="(item, index) in moduleList"
        :key="index"
      >
        <div class="module-item-left">
          <div class="item-left-title">
            <div class="line"></div>
            <div>{{ item.moduleName }}</div>
          </div>
          <div class="item-left-desc">{{ item.moduleDesc }}</div>
          <div class="item-left-btn" @click="jumpRoute(item, index)">进入</div>
        </div>
        <div class="module-item-right">
          <img
            :src="
              require('../../assets/images/supplierImg/' +
                item.moduleIcon +
                '.png')
            "
          />
        </div>
      </div>
    </div>
    <div class="placeholderBox" v-else>
      <img src="@/assets/images/noData.png" alt="" />
      <p>暂无数据</p>
    </div>
  </div>
</template>
<script>
import vhead from "@/components/header";
import {
  getAllModuleApi,
  getNewUserAllModulePageApi,
} from "@/assets/js/api/jxjadmin.js";
export default {
  name: "projectIndex",
  components: { vhead },
  data() {
    return {
      projectName: "",
      moduleList: [],
      defaultModuleList: [
        {
          moduleId: "1775008458351575041",
          labelName: "基础模块",
          labelSortNum: "0",
          moduleName: "我的资质",
          moduleDesc:
            "供应商在此处对基本信息、资质文件等内容进行完善，提交给项目组织审批",
          moduleEquipment: 0,
          moduleType: 6,
          moduleIcon: "icon1",
          bigModuleIcon: "",
          modulePath: "",
          moduleIcon2: "",
          disableModuleIcon: "",
          plugin: null,
          appName: "",
          appShow: 2,
          styleType: 1,
          pathType: 1,
          embedUrl: "",
          operation: true,
          menuList: [
            {
              menuEquipment: 0,
              menuList: "",
              scheme: "",
              icon: "",
              actionList: "",
              menuName: "承包资质申请",
              menuDesc: "",
              priority: "0",
              pathType: 1,
              appPath: "",
              parentId: "0",
              target: "_self",
              path: "/supplier/qualification/apply",
              authorityId: "1775009510115246081",
              companyPath: "",
              name: "承包资质申请",
              menuId: "1775009509934891010",
              moduleId: "1775008458351575041",
              status: 1,
            },
          ],
        },
      ],
      projectSn: "",
    };
  },
  created() {
    var arr = this.$store.state.userInfo.menuAuthority.moduleList;
    let groupTreeArr = this.$store.state.groupTreeList;
    // this.moduleList = this.$store.state.userInfo.menuAuthority.moduleList;
    if (groupTreeArr.length == 0) {
      this.jumpRoute(this.defaultModuleList[0]);
    }
    if (this.$store.state.projectSn) {
      this.projectSn = this.$store.state.projectSn;
      this.getModuleListFn();
    }
    // this.getAllModule(arr);
  },
  methods: {
    //为了展示未解锁产品，所以需要查询所有模块
    // getAllModule(half) {
    //   console.log(half, "101010");
    //   getAllModuleApi({
    //     moduleType: 6,
    //     styleType: this.$store.state.userInfo.styleType,
    //   }).then((res) => {
    //     if (res.success) {
    //       var all = res.result;
    //       let needArr = [];
    //       console.log("all", all);
    //       all.forEach((element, index) => {
    //         all[index].operation = false;
    //         half.forEach((element2) => {
    //           if (element2.moduleId == element.moduleId) {
    //             all[index].operation = true;
    //             all[index].menuList = element2.menuList;
    //             needArr.push(all[index]);
    //           }
    //         });
    //       });
    //       this.moduleList = needArr;
    //     }
    //   });
    // },
    getModuleListFn() {
      console.log(this.projectSn, "我的测试projectSn222");
      getNewUserAllModulePageApi({
        projectSn: this.projectSn,
        userId: this.$store.state.userInfo.userId,
        moduleType: 6,
      }).then((res) => {
        if (res.success) {
          var all = res.result.moduleList;
          console.log("all", all);
          all.forEach((element, index) => {
            all[index].operation = false;
            res.result.menuList.forEach((element2) => {
              console.log(element2, 77888);
              if (element2.moduleId == element.moduleId) {
                all[index].operation = true;
              }
            });
          });
          console.log("all111", all);
          this.moduleList = all;
        }
      });
    },
    jumpRoute(item, index) {
      // this.$router.push("/supplier/qualification/apply");
      if (!item.operation) {
        this.$message.error(this.$t("message.projectIndex.tips1"));
        return;
      }
      if (item.menuList && item.menuList.length > 0) {
        var arr = item.menuList,
          arr2 = [];
        arr.forEach((element) => {
          if (element.menuEquipment == 0) {
            arr2.push(element);
          }
        });
        this.$store.commit("setMenuList", arr2);
        this.$store.commit("setIsShowBackIndex", true);
        this.$store.commit("setMoudle", item);
        if (arr2[0].target == "_blank") {
          let routeUrl = "";
          if (arr2[0].path.indexOf("http") != -1) {
            routeUrl = arr2[0].path;
          } else {
            let url = this.$router.resolve({
              path: arr2[0].path,
            });
            routeUrl = url.href;
          }
          window.open(routeUrl, "_blank");
        } else {
          if (arr2[0].path == "" || arr2[0].path.indexOf("/") == -1) {
            this.$router.push(arr2[0].menuList[0].path);
          } else {
            this.$router.push(arr2[0].path);
          }
        }
      } else {
        this.$message.error(this.$t("message.projectIndex.tips2"));
      }
      window._paq.push([
        "trackEvent",
        "点击",
        item.moduleName,
        "进入" + item.moduleName,
      ]);
    },
  },
  watch: {
    "$store.state.projectSn": {
      handler: function(newVal, oldVal) {
        console.log(newVal, "监听projectSn变化");
        if (newVal) {
          this.projectSn = newVal;
          this.getModuleListFn();
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
.flex() {
  display: flex;
  align-items: center;
}
.flexColumn() {
  display: flex;
  flex-direction: column;
}
.fullHeight {
  background-color: #fff;
}
.supplier-module {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40px 97px;
  padding: 87px 78px 87px 63px;
  &-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 362px;
    height: 144px;
    background: #ffffff;
    box-shadow: 2px 1px 4px 1px rgba(48, 92, 200, 0.09);
    border-radius: 4px 4px 4px 4px;
    padding: 0px 10px;
    .module-item-left {
      width: 181px;
      margin-right: auto;
      .flexColumn();
      justify-content: space-between;
      .item-left-title {
        .flex();
        .line {
          width: 2px;
          height: 18px;
          background-color: #5c81ee;
          margin-left: 3px;
          margin-right: 5px;
          margin-top: 2px;
        }
        > div:nth-child(2) {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 22px;
          color: #272d45;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
      .item-left-desc {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 10px;
        color: #272d45;
        font-style: normal;
        text-transform: none;
        margin-top: 3px;
        margin-bottom: 12px;
      }
      .item-left-btn {
        width: 37px;
        height: 19px;
        line-height: 19px;
        text-align: center;
        background: #5181f6;
        border-radius: 14px 14px 14px 14px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 9px;
        color: #ffffff;
        cursor: pointer;
      }
    }
    .module-item-right {
      img {
        width: 106px;
        height: 106px;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
