<template>
  <view class="content showMap">
    <u-toast ref="uToast"></u-toast>
    <h5>业务菜单{{ _isOnline ? "" : "（当前接口为测试环境）" }}</h5>
    <view class="menuList">
      <view
        class="menuItem"
        @tap="goto('/pages/standbyVehicle/index')"
        v-if="!isSafe && !isEnergyRole && beicheBtn"
      >
        <view class="menuContent"
          ><view class="text">备车</view>
          <image
            src="/static/beiche.png"
            style="width: 95rpx; height: 56rpx"
          ></image>
          <u-badge
            v-if="todo.standByCar != 0"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.standByCar"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge
        ></view>
      </view>
      <view
        class="menuItem"
        v-if="!isEnergyRole && jiaocheBtn"
        @tap="goto('/pages/truckRent/index')"
      >
        <view class="menuContent">
          <view class="text">交车</view>
          <image
            src="/static/jiaoche.png"
            style="width: 89rpx; height: 57rpx"
          ></image>
          <u-badge
            v-if="todo.handoverCar != 0"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.handoverCar"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge>
        </view>
      </view>
      <view
        class="menuItem"
        @tap="goto('/pages/returnCar/index')"
        v-if="!isSafe && returnCarBtn"
      >
        <view class="menuContent">
          <view class="text">还车</view>
          <image
            src="/static/huanche.png"
            style="width: 89rpx; height: 57rpx"
          ></image>
          <u-badge
            v-if="todo.returnCar != 0"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.returnCar"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge>
        </view>
      </view>
      <view
        class="menuItem"
        @tap="goto('/pageSub/failure/index')"
        v-if="
          !isSafe &&
          !isBussinessRole &&
          !isFinanceRole &&
          !isEnergyRole &&
          guzhangBtn
        "
      >
        <view class="menuContent">
          <view class="text">故障台账</view>
          <image
            style="width: 80rpx; height: 50rpx"
            src="/static/fault.png"
          ></image>
          <u-badge
            v-if="todo.failureNumber != 0"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.failureNumber"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge>
        </view>
      </view>

      <view
        class="menuItem"
        v-if="!isSafe && !isEnergyRole && auditBtn"
        @tap="goto('/pages/audit/index')"
      >
        <view class="menuContent">
          <view class="text">审批</view>
          <image
            style="width: 57rpx; height: 55rpx"
            src="/static/audit.png"
          ></image>
          <u-badge
            v-if="todo.contractWaitApproval != 0"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.contractWaitApproval"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge>
        </view>
      </view>
      <!-- v-if="!isSafe && !isBussinessRole && !isFinanceRole && !isEnergyRole"   v-if="transactionManagement"-->
      <view
        class="menuItem"
        v-if="transactionManagement"
        @tap="goto('/pages/unusualActionApply/index')"
      >
        <view class="menuContent">
          <view class="text">异动管理</view>
          <image
            style="width: 48rpx; height: 55rpx"
            src="/static/yidong.png"
          ></image>
          <u-badge
            v-if="todo.transaction"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.transaction"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge>
        </view>
      </view>
      <!-- v-if="!isSafe && !isBussinessRole && !isFinanceRole && !isEnergyRole" -->
      <view
        class="menuItem"
        v-if="annualVerificationNew"
        @tap="goto('/pageSub/annualReview/index')"
      >
        <view class="menuContent">
          <view class="text">年审待办</view>
          <image
            style="width: 54rpx; height: 54rpx"
            src="/static/nianshen.png"
          ></image>
          <!-- <u-badge
            v-if="todo.vehicleAnnualInspection != 0"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.vehicleAnnualInspection"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge> -->
        </view>
      </view>
      <!-- v-if="truckPreparation" -->
      <view
        v-if="truckPreparation"
        class="menuItem"
        @tap="goto('/pageSub/truckPreparation/index')"
      >
        <view class="menuContent">
          <view class="text">车辆整备</view>
          <image
            src="/static/zhengbei.png"
            style="width: 95rpx; height: 56rpx"
          ></image>
        </view>
      </view>
      <view
        v-if="maintainTodo"
        class="menuItem"
        @tap="goto('/pages/maintain/index')"
      >
        <view class="menuContent">
          <view class="text">保养待办</view>
          <image
            src="/static/baoyang.png"
            style="width: 60rpx; height: 56rpx"
          ></image>
        </view>
      </view>
      <view
        v-if="returnCarCost"
        class="menuItem"
        @tap="goto('/pageSub/returnCarCost/index')"
      >
        <view class="menuContent">
          <view class="text">费用核算</view>
          <image
            src="/static/cost.png"
            style="width: 95rpx; height: 56rpx"
          ></image>
          <u-badge
            v-if="todo.returnCost != 0"
            slot="value"
            numberType="limit"
            type="warning"
            max="99"
            :value="todo.returnCost"
            :absolute="true"
            :offset="[-10, -10]"
            bgColor="#c2d10a"
          >
          </u-badge>
        </view>
      </view>
    </view>
    <h5>BI报表</h5>
    <view class="menuList">
      <view class="menuItem" @tap="gotoBi('car')" v-if="carBiPage">
        <view class="menuContent"
          ><view class="text">车辆统计</view>
          <image
            src="/static/bi.png"
            style="width: 60rpx; height: 56rpx"
          ></image>
        </view>
      </view>
      <view class="menuItem" @tap="gotoBi('h2')" v-if="h2BiPage">
        <view class="menuContent"
          ><view class="text">氢费统计</view>
          <image
            src="/static/hydrogen.png"
            style="width: 56rpx; height: 56rpx"
          ></image>
        </view>
      </view>
      <view class="menuItem" @tap="gotoBi('daily')" v-if="dailyBiPage">
        <view class="menuContent"
          ><view class="text">每日氢量表</view>
          <image
            src="/static/jiaqingzhan.png"
            style="width: 56rpx; height: 56rpx"
          ></image>
        </view>
      </view>
      <view class="menuItem" @tap="gotoBi('electric')" v-if="electricBiPage">
        <view class="menuContent"
          ><view class="text">每日电费表</view>
          <image
            src="/static/chongdianzhan_white.png"
            style="width: 48rpx; height: 48rpx"
          ></image>
        </view>
      </view>
      <view class="menuItem" @tap="gotoBi('mileage')" v-if="weappMileageBi">
        <view class="menuContent"
          ><view class="text">里程查询</view>
          <image
            src="/static/kachetou.png"
            style="width: 56rpx; height: 56rpx"
          ></image>
        </view>
      </view>
    </view>
    <!-- <u-collapse :value="['basic', 'bi']" :border="false">
      <u-collapse-item
        title="业务菜单"
        ref="basicCollapse"
        name="basic"
        v-if="isShowCollapse"
      >
       
      </u-collapse-item>
      <u-collapse-item title="BI报表" name="bi" v-if="biPage">
       
      </u-collapse-item>
    </u-collapse> -->

    <tab-bar></tab-bar>
  </view>
</template>

<script>
import { getUser } from "@/utils/auth.js";
import { checkPagePermission } from "@/utils/permission.js";
import { baseUrl } from "@/utils/request.js";
export default {
  options: {
    styleIsolation: "shared", // 解除样式隔离
  },
  data() {
    return {
      userInfo: {}, // 用户信息
      loading: false,
      home: {
        training: 0,
        examination: 0,
      },
      todo: {
        standByCar: 0,
      },
      isShowCollapse: false,
    };
  },
  computed: {
    _isOnline() {
      return baseUrl === "https://lnh2e.com/api/";
    },
    _userInfo() {
      console.log("---------------------");
      console.log(getUser());
      return getUser() || {};
    },
    beicheBtn() {
      return checkPagePermission("standbyVehicle");
    },
    biPage() {
      return checkPagePermission("FineBI");
    },
    carBiPage() {
      return checkPagePermission("truckOptBI");
    },
    h2BiPage() {
      return checkPagePermission("hydrogenBill");
    },
    dailyBiPage() {
      return checkPagePermission("dailyHydrogenOrderBI");
    },
    electricBiPage() {
      return checkPagePermission("bi_ele_daily_summary");
    },
    weappMileageBi() {
      return checkPagePermission("weappMileageBi");
    },
    //utils\permission.js记得改 不然没有外链接
    jiaocheBtn() {
      return checkPagePermission("applicationForDelivery");
    },
    returnCarBtn() {
      return checkPagePermission("carapplicationForDelivery");
    },
    auditBtn() {
      return checkPagePermission("contract");
    },
    guzhangBtn() {
      return checkPagePermission("faultManagement");
    },
    returnCarCost() {
      return checkPagePermission("returnCarCost");
    },
    maintainTodo() {
      return checkPagePermission("maintain");
    },
    truckPreparation() {
      return checkPagePermission("truckPreparation");
    },
    //年审待办
    annualVerificationNew() {
      return checkPagePermission("annualVerificationNew");
    },
    transactionManagement() {
      return checkPagePermission("transactionManagement");
    },
    // isOutServiceRole() {
    //   const ids = this.userInfo?.roles?.map((item) => item.id) || [];
    //   if (ids.includes("202306091251370002")) {
    //     console.log("运维外勤");
    //     return true; //运维外勤
    //   } else {
    //     return false; //其他
    //   }
    // },
    currRole() {
      const ids = this.userInfo?.roles?.map((item) => item.id) || [];
      if (ids.includes("1076403008717209600")) {
        return 2; //安全经理
      } else if (ids.includes("1012435145369616384")) {
        return 1; //安全员
      } else {
        return 0; //其他
      }
    },
    isSafe() {
      return [1, 2].includes(this.currRole);
    },
    isEnergyRole() {
      //const ids = this.userInfo?.roles?.map((item) => item.id) || [];
      if (this.userInfo.depCode === "0502") {
        console.log("能源部");
        return true; //
      } else {
        return false; //其他
      }
    },
    isFinanceRole() {
      //const ids = this.userInfo?.roles?.map((item) => item.id) || [];
      if (this.userInfo.depCode === "02") {
        console.log("财务部");
        return true; //财务部
      } else {
        return false; //其他
      }
    },
    isBussinessRole() {
      console.log(this.userInfo);
      if (this.userInfo.depCode === "0501") {
        console.log("业务服务组-业务助理");
        return true; //业务服务组-业务助理
      } else {
        return false; //其他
      }
    },
  },
  onShow() {
    // 这样数据是不会刷新的
    this.userInfo = getUser() || {};
    console.log(this.$store.state.resources);
    this.getTodo();
    if (this.$store.state?.resources?.length === 0) this.getUserMenu();
    console.log(this.userInfo);
  },
  onPullDownRefresh(event) {
    if (this.$store.state?.resources?.length === 0) this.getUserMenu();
    this.getTodo()
      .then((res) => {
        uni.stopPullDownRefresh();
      })
      .catch((err) => {
        uni.stopPullDownRefresh();
      });
  },
  mounted() {
    // this.$api.login
    //   .getUrl()
    //   .then((res) => {
    //     console.log("12312312312333#########################");
    //     console.log(res);
    //   })
    //   .catch((err) => {
    //     console.log("12312312312333#########################");
    //     console.log(err);
    //   });
    this.$store.state.current = "index";
    if (this._userInfo.id == "1131365259079106560") {
      setTimeout(() => {
        this.$store.state.current = "map";
        uni.switchTab({
          url: "/pages/map/index",
        });
      }, 500);
    } else {
      this.isShowCollapse = false;
      setTimeout(() => {
        this.isShowCollapse = true;
      }, 100);
    }
  },
  methods: {
    async getUserMenu() {
      await this.$api.login
        .getUserMenu()
        .then((res) => {
          console.log(res);
          this.$store.dispatch("setResources", res);
        })
        .catch((err) => {
          console.log("error");
        });
    },
    async getTodo() {
      this.$api.standbyVehicle.getTodo().then((res) => {
        this.todo.standByCar = res.standByCar;
        this.todo.handoverCar = res.handoverCar;
        this.todo.returnCar = res.returnCar;
        this.todo.failureNumber = res.failureNumber;
        this.todo.contractWaitApproval = res.contractWaitApproval;
        this.todo.transaction = res.transaction || 0;
        //this.todo.vehicleAnnualInspection = res.vehicleAnnualInspection || 0;
        console.log(`this.home.standByCar:\n`, this.home.standByCar);
      });
      this.$api.returnCost.getCostToDo().then((res) => {
        console.log(res.data);
        this.todo.returnCost = res.data;
      });
    },
    showToast(type, message) {
      this.$refs.uToast.show({
        type,
        icon: false,
        message,
      });
    },
    goto(url) {
      // uni.navigateTo({ url: e.target.dataset.url });可以用dataset取data-url   <!-- data-url="/pages/annualReview/index"
      uni.navigateTo({ url: url });
    },
    gotoBi(type) {
      //carBiPage, h2BiPage,dailyBiPage 都是用的系统菜单配置的外链接
      switch (type) {
        case "car":
          uni.navigateTo({
            //https://wxaurl.cn/YIKi8duNbCh 根据地图路劲生成的url link
            url: `/pages/webview/index?url=` + this.carBiPage,
          });
          break;
        case "h2":
          uni.navigateTo({
            url: `/pages/webview/index?url=` + this.h2BiPage,
          });
          break;
        case "mileage":
          uni.navigateTo({
            url: `/pages/webview/index?url=` + this.weappMileageBi,
          });
          break;
        case "electric":
          uni.navigateTo({
            url: `/pages/webview/index?url=` + this.electricBiPage,
          });
          break;
        default:
          uni.navigateTo({
            url: `/pages/webview/index?url=` + this.dailyBiPage,
          });
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  height: 30vh;
  width: 100%;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.login-btn {
  margin: 30rpx 0rpx;
}

.wexin-but::after {
  border: unset !important;
}

.wexin-but {
  border: unset !important;
  border-radius: unset;
  box-sizing: unset;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
}

/deep/.u-cell__body {
  padding: 10px 15px !important;
}
// 或者直接覆盖 u-collapse-item 的样式
/deep/ .u-cell--clickable {
  background-color: #e1eae5 !important;
}
/deep/ .u-cell__title-text {
  font-size: unset !important;
  line-height: unset !important;
  color: unset !important;
}

/deep/ .u-cell__body {
  font-size: unset !important;
  color: unset !important;
}

/deep/ .u-cell__right-icon-wrap text {
  font-size: 32rpx !important;
}

.content {
  background: #e1eae5;
  height: calc(100vh - 50px);
  //   h3 {
  //     font-weight: normal;
  //     text-align: center;
  //     border-bottom: 1rpx solid silver;
  //     padding: 20rpx 0;
  //   }
  h5 {
    padding: 10px;
  }

  .menuList {
    display: flex;
    flex-wrap: wrap;
    // .menuItem:last-child {
    //   margin-right: auto;
    // }
    .menuItem {
      padding: 18rpx;
      flex: 0 0 33.3%;
      box-sizing: border-box;

      //   margin-right: 56.6rpx;
      //   &:nth-of-type(4) {
      //     margin-right: 0;
      //   }
      .menuContent {
        position: relative;
        text-align: right;
        padding: 18rpx;
        background-image: url(../../static/g_bg.png);
        background-size: 100% 100%;
        image {
          width: 75rpx;
          height: 75rpx;
          margin-top: 10rpx;
        }

        .text {
          // width: 125rpx;
          text-align: left;
          font-size: 32rpx;
          color: #fff;
          font-weight: bold;
        }

        /deep/.u-badge {
          font-size: 30rpx;
        }

        /deep/.u-badge--not-dot {
          padding: 15rpx 18rpx;
        }
      }
    }
  }
}
.showMap.content {
  height: calc(100vh - 65px);
  /deep/ .u-tabbar-item {
    padding-bottom: 19px;
  }
}
</style>
