<template>
  <!-- 设备中台首页 -->
  <div class="fullHeight">
    <vhead :titleName="headerName" :showR="true"></vhead>
    <div class="pageContainer">
      <div class="pageDataContainer">
        <vue-scroll>
        <div class="projectIndexBox">
          <div class="module_title">{{$t('message.homeLayout.existingProducts')}}</div>
          <div class="projectIndex">
            <div
              class="module canclick"
              :class="{hovers:item.operation}"
              v-for="(item,index) in list"
              :key="index"
              @click="itemClick(item)"
              v-if="item.operation&&item.moduleType==2&&item.moduleEquipment==1"
            >
              <img v-if="iconType == 1" :src="require('../../assets/images/menu/'+item.moduleIcon+'.png')" class="icon" />
              <img
                    v-if="iconType == 2 && item.bigModuleIcon"
                    :src="
                      require('../../assets/images/menu/' +
                        item.bigModuleIcon +
                        '.png')
                    "
                    style="margin-bottom: 10px"
                    class="icon"
                  />
              <div class="title_wrap">
                <div class="head1">{{item.moduleName}}</div>
                <div class="subhead">{{item.moduleDesc}}</div>
                <!-- {{$t('message.projectIndex.moudleName1')}} -->
              </div>
            </div>
          </div>
          <div class="module_title" v-if="showNotBuyMoudle">{{$t('message.homeLayout.ununlockedProducts')}}</div>
          <div class="projectIndex">
            <div
              class="module"
              :class="{hovers:item.operation}"
              v-for="(item,index) in list"
              :key="index"
              @click="itemClick(item)"
              v-if="!item.operation&&item.moduleType==2&&item.moduleEquipment==1&&showNotBuyMoudle"
            >
              <img v-if="iconType == 1" :src="require('../../assets/images/menu/'+item.moduleIcon2+'.png')" class="icon" />
              <img
                    v-if="iconType == 2 && item.bigModuleIcon"
                    :src="
                      require('../../assets/images/menu/' +
                        item.bigModuleIcon +
                        '.png')
                    "
                    style="margin-bottom: 10px;opacity: 0.2;"
                    class="icon"
                  />
              <div class="title_wrap grey">
                <div class="head1">{{item.moduleName}}</div>
                <div class="subhead">{{item.moduleDesc}}</div>
                <!-- {{$t('message.projectIndex.moudleName1')}} -->
              </div>
            </div>
          </div>
        </div>
        </vue-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import vhead from "@/components/header";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
import { getProjectModuleList,getAllModuleApi, getNewUserAllModulePageApi } from "@/assets/js/api/jxjadmin.js";
export default {
  name: "projectIndex",
  components: { vhead },
  data() {
    return {
      headerName:this.$t('message.homeLayout.devPageTitle'),
      list: [
        {
          moduleName: this.$t('message.middleGround.moduleName1'), // 视频监控
          subhead: this.$t('message.middleGround.subhead1'), // 摄像头新增、编辑、删除，设置厂商
          operation: true,
          id: 3,
          url: "",
          openedUrl: require("../../assets/images/menu/spjk_active.png"),
          shutUrl: require("../../assets/images/menu/spjk.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName2'), // 摄像机列表
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/cameraList",
            },
          ],
        },
        {
          moduleName: this.$t('message.middleGround.moduleName3'), // 劳务管理
          subhead: this.$t('message.middleGround.subhead3'), // 劳务实名制设备新增、编辑、删除
          operation: true,
          id: 2,
          openedUrl: require("../../assets/images/menu/lwgl_active.png"),
          shutUrl: require("../../assets/images/menu/lwgl.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/laborDevManage",
            },
            {
              menuName: "门禁分组", // 门禁分组
              subhead: "门禁分组", // 门禁分组
              operation: true,
              id: 21,
              path: "/equipmentCenter/accessGroup",
            },
          ],
        },
        {
          moduleName: this.$t('message.middleGround.moduleName5'), // 标养室管理
          subhead: "",
          operation: true,
          id: 2,
          openedUrl: require("../../assets/images/menu/markRoom_active.png"),
          shutUrl: require("../../assets/images/menu/markRoom.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/markingRoomDevManage",
            },
          ],
        },
        {
          moduleName: this.$t('message.middleGround.moduleName7'), // 绿色施工
          subhead: this.$t('message.middleGround.subhead7'), // 扬尘设备新增、编辑、删除
          operation: true,
          id: 4,
          openedUrl: require("../../assets/images/menu/lssg_active.png"),
          shutUrl: require("../../assets/images/menu/lssg.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName8'), // 扬尘设备管理
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/envirDevManage",
            },{
              menuName: this.$t('message.middleGround.moduleName9'), // 雾炮喷淋设备管理
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/sprayDevManage",
            },{
              menuName: '喷淋设备管理', // 喷淋设备管理
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/sprayDevManageRT",
            },
          ],
        },{
          moduleName: this.$t('message.middleGround.moduleName7'), // 绿色施工
          subhead: this.$t('message.middleGround.subhead7'), // 扬尘设备新增、编辑、删除
          operation: true,
          id: 4,
          openedUrl: require("../../assets/images/menu/lssg_active.png"),
          shutUrl: require("../../assets/images/menu/lssg.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName8'), // 扬尘设备管理
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/rainfallManage",
            },
          ],
        },{
          moduleName: this.$t('message.middleGround.moduleName10'), // 电箱管理
          subhead: this.$t('message.middleGround.subhead10'), // 电箱设备新增、编辑、删除
          operation: true,
          id: 11,
          openedUrl: require("../../assets/images/menu/dxgl_active.png"),
          shutUrl: require("../../assets/images/menu/lssg.png"),
          children: [

            {
              menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
              subhead: this.$t('message.middleGround.moduleName4'), // 设备管理
              operation: true,
              id: 43,
              path: "/equipmentCenter/electricDevManage",
            },
          ],
        },{
          moduleName: this.$t('message.middleGround.moduleName12'), // 车辆管理
          subhead: this.$t('message.middleGround.subhead12'), // 查看实时环境数据、历史数据以及报警新增
          operation: true,
          id: 12,
          openedUrl: require("../../assets/images/menu/clgl_active.png"),
          shutUrl: require("../../assets/images/menu/lssg.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName13'), // 车辆闸门管理
              subhead: this.$t('message.middleGround.subhead13'), // 车辆黑白名单管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/carGateDev",
            },{
              menuName: this.$t('message.middleGround.moduleName14'), // 车辆相机管理
              subhead: this.$t('message.middleGround.subhead13'), // 车辆黑白名单管理
              operation: true,
              id: 21,
              path: "/equipmentCenter/carCameraDev",
            }
          ],
        },
        {
          moduleName: this.$t('message.middleGround.moduleName15'), // 塔吊管理
          subhead: this.$t('message.middleGround.subhead15'), // 项目塔吊设备使用、施工管理
          operation: true,
          id: 5,
          openedUrl: require("../../assets/images/menu/jdgl_active.png"),
          shutUrl: require("../../assets/images/menu/jdgl.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
              operation: true,
              id: 11,
              path: "/equipmentCenter/basicInfo",
            },
          ],
        },
        {
          moduleName: this.$t('message.middleGround.moduleName17'), // 升降机管理
          subhead: this.$t('message.middleGround.subhead17'), // 管理人员可以实时看到现场的设备及人员情况
          operation: true,
          id: 6,
          openedUrl: require("../../assets/images/menu/lifter_active.png"),
          shutUrl: require("../../assets/images/menu/lifter.png"),
           children: [
            {
              menuName: this.$t('message.middleGround.moduleName4'), // 设备管理
              operation: true,
              id: 11,
              path: "/equipmentCenter/lifterBasicInfo",
            }
          ],
        },
        {
          moduleName: this.$t('message.middleGround.moduleName18'), // 龙门吊管理
          subhead: this.$t('message.middleGround.subhead18'), // 塔吊、升降机等设备的管理
          operation: false,
          id: 7,
          openedUrl: require("../../assets/images/menu/tzsb_active.png"),
          shutUrl: require("../../assets/images/menu/tzsb.png"),
        },
        {
          moduleName: this.$t('message.middleGround.moduleName19'), // 地磅管理
          subhead: this.$t('message.middleGround.subhead19'), // 通过AI分析未戴安全帽、未穿防护服等行为
          operation: false,
          id: 8,
          openedUrl: require("../../assets/images/menu/aifx_active.png"),
          shutUrl: require("../../assets/images/menu/aifx.png"),
        },
        {
          moduleName: this.$t('message.middleGround.moduleName20'), // 人员定位
          subhead: this.$t('message.middleGround.subhead20'), // 查看人员所在位置
          operation: false,
          id: 9,
          openedUrl: require("../../assets/images/menu/rydw_active.png"),
          shutUrl: require("../../assets/images/menu/rydw.png"),
          children: [
            {
              menuName: this.$t('message.middleGround.moduleName21'), // 基站管理
              subhead: this.$t('message.middleGround.moduleName21'), // 基站管理
              operation: true,
              id: 91,
              path: "/project/personnelPosition/cardManage",
            },
            {
              menuName: this.$t('message.middleGround.subhead2'), // 人员管理
              subhead: this.$t('message.middleGround.subhead2'), // 人员管理
              operation: true,
              id: 91,
              path: "/project/personnelPosition/beaconManage",
            },
            {
              menuName: this.$t('message.middleGround.moduleName22'),// 地图管理
              subhead: this.$t('message.middleGround.moduleName22'), // 地图管理
              operation: true,
              id: 92,
              path: "/project/personnelPosition/mapManage",
            },
          ],
        },
        {
          moduleName: this.$t('message.middleGround.moduleName23'), // 系统管理
          subhead: this.$t('message.middleGround.subhead23'), // 项目角色管理、菜单管理
          operation: false,
          id: 10,
          openedUrl: require("../../assets/images/menu/xtgl_active.png"),
          shutUrl: require("../../assets/images/menu/xtgl.png"),
        },
      ],
      showNotBuyMoudle:showNotBuyMoudle,
      iconType: '1'
    };
  },
  mounted(){
    if(localStorage.getItem('systemInfo')){
      this.iconType = JSON.parse(localStorage.getItem('systemInfo')).iconType ? JSON.parse(localStorage.getItem('systemInfo')).iconType:'1'
    }
    console.log(this.iconType)
    // this.headerName = '智慧工地云 - 设备中台'
    // console.log('this.$store.state.currentProDetail')
    // console.log(this.$store.state.currentProDetail)
    // if(this.$store.state.currentProDetail){
    //   this.headerName += ' - ' + this.$store.state.currentProDetail.projectName
    // }
    this.getDataDateils()
    // if(this.$store.state.currentMoudle){
    //   this.headerName += ' - ' + this.$store.state.currentMoudle.name
    // }
var arr = this.$store.state.userInfo.menuAuthority.moduleList
      this.getAllModule(arr)
  },
  methods: {
    //获取详情
    getDataDateils() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getProjectDetail(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.projectName = res.result.projectName;
          this.headerName += ' - ' + res.result.projectName
          this.$store.commit('setProDetail',res.result)
        }
      });
    },
    getAllModule(half){
      // getAllModuleApi({moduleType:2, styleType: this.$store.state.userInfo.styleType}).then(res => {
      //     if (res.success) {
      //         var all = res.result
      //         // console.log(res)
      //         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
      //             }
      //           });
      //         });
      //         this.list=all
      //     }
      // })
      // 新用户功能模块
      if(this.$store.state.userInfo.accountType == 10){
        getNewUserAllModulePageApi({
        projectSn: this.$store.state.projectSn,
        userId: this.$store.state.userInfo.userId,
        moduleType: 2,
      }).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) => {
              if (element2.moduleId == element.moduleId) {
                all[index].operation = true;
              }
            });
          });
          console.log("all111", all);
          this.list = all;
        }
      });
      } else {
        getAllModuleApi({
        moduleType: 2,
        styleType: this.$store.state.userInfo.styleType,
      }).then((res) => {
        if (res.success) {
          var all = res.result;
          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;
              }
            });
          });
          this.list = all;
        }
      });
      }
    },
    itemClick(item) {
      console.log(item)
      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==1){
            arr2.push(element)
          }
        });
        this.$store.commit("setMenuList", arr2);
        this.$store.commit("setIsShowBackIndex", true);
        this.$store.commit("setMoudle", item);
        this.$router.push(arr2[0].path);
      } else {
        if (item.url) {
          let routeUrl = this.$router.resolve({
            path: item.url,
          });
          window.open(routeUrl.href, "_blank");
        } else {
          this.$message.error(this.$t('message.projectIndex.tips1'));
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.pageContainer {
  height: calc(100% - 61px);
  background: rgba(247, 249, 255, 0.9);
  font-family: '思源黑体';
}
.projectIndexBox {
  max-width: 1370px;
  margin: auto;
  width: 100%;
}
// @media screen and (max-width: 1630px) {
//   .projectIndex .module {
//     margin-right: 26px !important;
//   }
// }
.projectIndex {
  width: 100%;

  display: flex;
  align-items: center;
  //   justify-content: space-around;
  box-sizing: border-box;
  // padding: 0 100px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  .module:nth-child(4n) {
    margin-right: 0;
  }
}
.module_title {
  margin-left: -10px;
  border-left: 2px solid #4a8bff;
  padding-left: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}
.module {
  width: 320px;
  // height: 124px;
  box-sizing: border-box;
  // border-radius: 3px;
  // box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.07);
  // display: flex;
  // align-items: center;
  margin-bottom: 24px;
  padding: 30px 10px 32px;
  font-size: 17px;
  margin-right: 30px;
  text-align: center;

  border: 1px solid rgba(18, 41, 75, 0.1);
  height: 174px;
  &.canclick:hover{
     cursor: pointer;
    // border-color: rgba(74, 139, 255, 0.9);
    background-color: rgba(196, 208, 255, 0.17);
    // box-shadow: 0px 5px 9px 3px rgba(74, 139, 255, 0.2);
  }

  .head1{
    // opacity: 0.8;
    font-weight: bold;
    font-size: 16px;
  }
  .icon {
    width: 56px;
    height: 56px;
    // width: 45px;
    // height: 45px;
    // margin-right: 20px;
    display: block;
    margin: 0 auto 0px;
  }
  .subhead {
    opacity: 0.8;
    font-size: 12px;
    margin-top: 15px;
  }
  .grey *{
    opacity: 0.3;
  }
}
.hovers {
  cursor: pointer;

}
</style>
