<template>
  <view class="home-page">
    <view class="left-tab">
      <view class="user-info">
        <image class="user-img" src="@/static/img/add-img/defaultAvatar.png"></image>

        <text class="text">{{ userName }}</text>
      </view>

      <view class="tab-list">
        <view
          v-for="(item, index) in tabList"
          :key="item.text"
          class="tab-item"
          @click="tabClick(item, index)"
          :class="activeTabIndex == index ? 'active-tab' : ''"
        >
          <view class="icon-item"
            ><text class="iconfont" :class="item.defaultIcon"></text>
          </view>
          <text class="text">{{ item.text }}</text>
        </view>
      </view>

      <view class="button-group">
        <view  v-if="isAdmin" class="log-button" @click="lookLog">操作日志</view>
        <view class="reset-password-button" @click="updatePassword"
          >修改密码？</view
        >
        <view class="reset-password-button" @click="logOut">退出账号？</view>
      </view>
    </view>

    <!-- 内容区 -->
    <view class="right-container">
      <!-- 首页 -->
      <Content v-if="activeTabIndex == 0" @changeTab="tabClick" />

      <!-- 杭州内网机房巡检 -->
      <InspectionManagement v-if="activeTabIndex == 1" />

      <!-- 同步管理 -->
      <SynchronousManagement v-if="activeTabIndex == 2" />

      <RouterView />
    </view>

    <!-- 退出账号弹出 -->
    <uni-popup ref="inputDialog2" type="dialog">
      <uni-popup-dialog
        ref="inputClose2"
        mode="base"
        title="确定退出该账号?"
        @confirm="dialogInputConfirm2"
      >
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import InspectionManagement from "@/pages/inspectionManagement/index.vue";
import SynchronousManagement from "@/pages/synchronousManagement/index.vue";
import OperLog from "@/pages/index/operLog.vue";

import Content from "./content.vue";

export default {
  components: {
    Content,
    InspectionManagement,
    SynchronousManagement,
    OperLog,
  },
  data() {
    return {
      activeTabIndex: 0,
      tabList: [
        {
          defaultIcon: "iconfont icon-yingyongyewuguanli1",
          isActive: true,
          text: "主页",
        },
        {
          defaultIcon: "iconfont icon-Inspection",
          isActive: false,
          text: "巡检管理",
        },
        {
          defaultIcon: "iconfont icon-a-ActivityConfiguration",
          isActive: false,
          text: "同步管理",
        },
      ],
      userName: this.$store.state.now_user.user,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.state.now_user.isAdmin;
    },
  },
  onLoad(options = {}) {
    // options就是路由参数，它是一个对象
    // this.tabIndex = ;
    this.tabClick({}, options.tabIndex || 0);
  },
  watch: {
    
  },
  methods: {
    // 修改密码
    updatePassword() {
      uni.navigateTo({
        url: "/pages/index/editPd",
      });
    },

    // 查看操作日志
    lookLog() {
      uni.navigateTo({
        url: "/pages/index/operLog",
      });

      // this.activeTabIndex = 4
    },

    //退出--弹出对话框
    dialogInputConfirm2() {
      uni.redirectTo({
        url: "/pages/login/login",
        success: () => {
          // uni.clearStorage(); //测试将所有缓存清除

          uni.setStorageSync("now_user", this.$store.state.now_user);
          uni.setStorageSync(
            "last_time",
            this.$store.state.now_user.LastSynchronizationTime || ""
          );


         
        },
      });
    },
    //退出
    logOut() {
      this.$refs.inputDialog2.open();
    },

    // 切换tab
    tabClick(item, index) {
      this.activeTabIndex = index;
    },

    toIndex() {
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },
  },
};
</script>

<style scoped lang="less">
.home-page {
  display: flex;
  position: relative;
  height: 100vh;
  background-image: linear-gradient(115deg, #e9f8ff 0%, #ecf1f4 100%);
  z-index: 1;
  .left-tab {
    z-index: 10;
    width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 24px 16px;

    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 72px;

      // border: 1px solid;
      .user-img {
        height: 48px;
        width: 48px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 5px 5px 10px #e7e7e7;
      }
      .text {
        font-size: 16px;
        color: #4a4a4a;
        text-align: center;
        font-weight: 400;
      }
    }
    .tab-list {
      height: 58vh;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .tab-item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .icon-item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 56px;
          height: 56px;
          border-radius: 16px;
          background: #fff;
          margin-bottom: 12px;
          .iconfont {
            font-size: 28px;
            color: #4a4a4a;
          }
        }
      }
      .active-tab {
        .icon-item {
          background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
        }
        .iconfont {
          color: #fff !important;
        }
        .text {
          color: #3774f6;
        }
      }
    }

    .button-group {
      font-size: 14px;
      color: #ffffff;
      font-weight: 400;
      .log-button {
        background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
        border-radius: 4px;
        height: 32px;
        margin-bottom: 16px;
        text-align: center;
        line-height: 32px;
      }
      .reset-password-button {
        font-size: 14px;
        color: #3774f6;
        font-weight: 400;
        text-align: center;
      }
    }
  }
  .right-container {
    flex: 1;
    margin-left: 16px;
    z-index: 10;
    padding-top: 32px;
    padding-right: 16px;
    // .card-list {
    //   display: flex;

    //   .card-item {
    //     border-radius: 12px;
    //     flex: 1;
    //     margin-right: 16px;
    //     height: 166px;
    //     box-sizing: border-box;
    //     padding: 24px 0 24px 24px;
    //     position: relative;
    //     overflow: hidden;
    //     .bg-img {
    //       position: absolute;
    //       top: 0;
    //       left: 0;
    //       width: 100%;
    //       height: 100%;
    //       z-index: -1;
    //     }

    //     .title {
    //       font-size: 18px;
    //       color: #000000;
    //       font-weight: bold;
    //       margin-bottom: 24px;
    //     }
    //     .unit {
    //       margin-bottom: 16px;
    //     }
    //     .unit,
    //     .time {
    //       font-size: 12px;
    //       color: #7c7c7c;
    //       font-weight: 400;
    //     }

    //     .title2x {
    //       font-size: 14px;
    //       color: #4a4a4a;
    //       font-weight: 400;
    //       margin-bottom: 8px;
    //     }
    //     .count {
    //       font-size: 14px;
    //       color: #7c7c7c;
    //       font-weight: 400;

    //       .num {
    //         margin-right: 2px;
    //         font-size: 32px;
    //         color: #000000;
    //         line-height: 40px;
    //         font-weight: bold;
    //       }
    //     }
    //     .button-text {
    //       display: flex;
    //       align-items: center;
    //       font-size: 14px;
    //       color: #3774f6;
    //       font-weight: 400;
    //     }
    //   }

    //   .card-item3x {
    //     padding-top: 40px;
    //   }
    // }

    // .seconed-title {
    //   margin-top: 16px;
    //   font-size: 18px;
    //   color: #000000;
    //   font-weight: bold;
    // }

    // .month-list {
    //   height: calc(100vh - 166px - 25px - 16px);
    //   overflow: auto;
    //   .month-record-item {
    //     margin-bottom: 24px;
    //     &:last-of-type {
    //       margin: 0;
    //     }

    //     .inspect-list {
    //       display: flex;
    //       flex-wrap: wrap;
    //     }
    //   }
    // }
  }
}
</style>
