<template>
  <!-- 首页 -->
  <view class="container">
    <!-- 第一个模块 -->
    <view class="header">
      <view class="title">杭州内网监管在线-山南数据中心运维在线</view>
      <view class="header-buttons">
        <view class="log-button" @click="lookLog" v-if="isAdmin">操作日志</view>
        <div class="exit-button" @click="logOut">
          <image
            class="logout"
            src="@/static/img/logout.svg"
            mode="aspectFit"
          ></image>
        </div>
      </view>
    </view>

    <!-- 第二个模块 -->
    <view class="profile-section">
      <view class="profile-box">
        <view class="profile-left">
          <view class="avatar">
            <image
              src="@/static/img/add-img/defaultAvatar.png"
              mode="aspectFit"
            ></image>
            <view class="change-password" @click="updatePassword"
              >修改密码</view
            >
          </view>
          <view class="username">{{ userName }}</view>
        </view>
        <view class="profile-right">
          <button class="inspection-button" @click="toInspectionManagement">
            巡检管理
          </button>
          <button class="record-button" @click="toListingManagement">
            设备上架管理
          </button>
        </view>
      </view>
    </view>

    <!-- 第三个模块 -->
    <view class="card-section">
      <view class="card-container">
        <view
          class="card"
          v-for="(card, index) in cards"
          :key="index"
          :style="{ backgroundImage: `url(${card.image})` }"
          @click="toList(card.url)"
        >
          <view class="card-text">{{ card.text }}</view>
        </view>
      </view>
    </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 { copyDirectory } from "@/utils/IoReadingAndWriting.js";
import inspectApi from "@/api/inspect.js";
import { cleanTimeoutDataApi } from "@/api/base.js";
export default {
  data() {
    return {
      cards: [
        {
          image: "../../static/img/jf.png",
          text: "机房日常巡检",
          url: "/pages/inspectionContent/inspectionContentList?backValue=home&inspectionType=1",
        },
        // {
        //   image: "../../static/img/jd.png",
        //   text: "井道巡检",
        //   url: "/pages/shaftInspection/shaftInspectionList?backValue=home",
        // },
        {
          image: "../../static/img/sj.png",
          text: "设备上架",
          url: "/pages/listingManagement/index?backValue=home",
        },
        {
          image: "../../static/img/jf.png",
          text: "机房月度巡检",
          url: "/pages/inspectionContent/inspectionContentList?backValue=home&inspectionType=3",
        },
        {
          image: "../../static/img/jf.png",
          text: "机房年度巡检",
          url: "/pages/inspectionContent/inspectionContentList?backValue=home&inspectionType=4",
        },
      ],
      userName: this.$store.state.now_user.user,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.state.now_user.isAdmin;
    },
  },
  created() {
    console.log(this.$store.state);
    cleanTimeoutDataApi();
  },
  methods: {
    // 修改密码
    updatePassword() {
      uni.navigateTo({
        url: "/pages/index/editPd",
      });
    },
    //退出
    logOut() {
      this.$refs.inputDialog2.open();
    },
    // 查看操作日志
    lookLog() {
      uni.navigateTo({
        url: "/pages/index/operLog",
      });
    },
    // 三模块卡片跳转页面
    toList(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 巡检管理
    toInspectionManagement() {
      uni.navigateTo({
        url: "/pages/inspectionManagement/index?backValue=home",
      });
    },
    toListingManagement() {
      uni.navigateTo({
        url: "/pages/listingManagement/index?backValue=home",
      });
    },
    // 井道巡检
    toShaftInspection() {
      uni.navigateTo({
        url: "/pages/shaftInspection/shaftInspectionNew?backValue=home",
      });
    },
    //退出--弹出对话框
    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 || "",
          );
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  height: 100vh;
  background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
  z-index: 1;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  position: relative;
  margin-bottom: 60px;

  .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    ont-family: PingFangSC-Medium;
    font-size: 30px;
    color: #000000;
    text-align: center;
    line-height: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    font-weight: 500;
    white-space: nowrap;
  }

  .header-buttons {
    display: flex;
    align-items: center;
    margin-left: auto; // 将按钮组推到最右侧

    .log-button {
      width: 112px;
      height: 36px;
      background: #ffffff;
      border-radius: 18px;
      margin-right: 10px;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #000000;
      line-height: 36px;
      font-weight: 400;
      text-align: center;
    }

    .exit-button {
      width: 36px;
      height: 36px;
      background: #ffffff;
      border: 0.5px solid rgba(224, 224, 224, 1);
      border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;

      .logout {
        width: 16px;
        height: 16px;
      }
    }
  }
}

.profile-section {
  width: 680px;

  .profile-box {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .profile-left {
      display: flex;
      align-items: center;

      .avatar {
        position: relative;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }

        .change-password {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: rgba(0, 0, 0, 0.5);
          text-align: center;
          height: 22px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #ffffff;
          line-height: 20px;
          font-weight: 400;
        }
      }

      .username {
        margin-left: 16px;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #000000;
        line-height: 28px;
        font-weight: 500;
      }
    }

    .profile-right {
      display: flex;

      .inspection-button {
        width: 112px;
        height: 36px;
        background-image: linear-gradient(105deg, #68acfb 0%, #3774f6 100%);
        border-radius: 18px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #ffffff;
        line-height: 36px;
        font-weight: 400;
        margin-right: 16px;
      }

      .record-button {
        width: 144px;
        height: 36px;
        background: #ffffff;
        border: 1px solid rgba(55, 116, 246, 1);
        border-radius: 18px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #3774f6;
        line-height: 36px;
        font-weight: 400;
      }
    }
  }
}

.card-section {
  width: 432px;
  margin-top: 16px;

  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;

    .card {
      width: 206px;
      height: 140px;
      border-radius: 9px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 95px;
      background-size: cover; // 背景图覆盖整个卡片
      background-position: center; // 背景图居中

      .card-text {
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #000000;
        line-height: 24px;
        font-weight: 600;
      }
    }
  }
}
</style>
