<template>
  <view class="home-page-content">
    <!-- 内容区 -->
    <view class="card-list">
      <view class="card-item">
        <view class="title"
          >HI，欢迎回来{{ userInfo.name }}{{ userInfo.user }}！</view
        >
        <view class="unit">所属单位：{{ userInfo.unitName || "--" }}</view>
        <view class="time">上次同步时间：{{ lastTime || "--" }}</view>

        <image
          class="bg-img"
          mode="aspectFill"
          src="@/static/img/add-img/defaultAvatar.png"
        ></image>
      </view>
      <view class="card-item" @click="toSyncPage">
        <view class="title2x">巡检记录</view>
        <view class="count">
          <text class="num">{{ syncCount }}</text
          >条
        </view>
        <view class="button-text"
          ><text>待同步</text>
          <view class="iconfont icon-Arrow-Right"></view>
        </view>

        <image
          class="bg-img"
          mode="aspectFill"
          src="@/static/img/add-img/home2.png"
        ></image>
      </view>
      <view class="card-item card-item3x" @click="toPage">
        <view class="title">开始巡检</view>
        <view class="button-text"
          ><text>进入</text>
          <text class="iconfont icon-Arrow-Right"></text>
        </view>

        <image
          class="bg-img"
          mode="aspectFill"
          src="@/static/img/add-img/home3.png"
        ></image>
      </view>
    </view>

    <view class="seconed-title"> 最新记录 </view>

    <view class="month-list">
      <!-- 每月记录 -->
      <view
        class="month-record-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <view v-if="(item.list || []).length" class="seconed-title">
          {{ item.submitTime || item.time }}
        </view>

        <view class="inspect-list">
          <InspectionItem
            v-for="ele in item.list"
            :key="ele.uid"
            :details="ele"
          />
        </view>
      </view>

      <Empty v-if="list.length == 0" />
    </view>
  </view>
</template>

<script>
import InspectionItem from "@/components/inspectionItem/index.vue";
import { getAllInspections, getDarft } from "@/request/index.js";
import Empty from "@/components/empty/index.vue";

export default {
  components: {
    InspectionItem,
    Empty,
  },
  data() {
    return {
      isDialog: false, //
      list: [], // 展示数据
      all_data: [], // 所有数据
      searchForm: {
        // 搜索条件
      },
      countNum: 0, // 统计查询总数

      syncCount: 0, // 待同步条数
      lastTime: "", // 上次登陆时间
    };
  },
  created() {
    this.lastTime = uni.getStorageSync("last_time") || "";
    // uni.getStorageSync("last_time", this.$store.state.now_user.LastSynchronizationTime || "");
  },
  mounted() {
    this.init();
  },

  computed: {
    userInfo() {
      return this.$store.state.now_user || {};
    },
  },
  methods: {
    init() {
      uni.showLoading();

      getAllInspections()
        .then((res) => {
          this.all_data = res;
          this.getList();
          uni.hideLoading();
        })
        .catch((error) => {
          if (0 == error.code) {
            uni.showToast({
              title: error.msg,
              icon: "none",
              duration: 1000,
            });
          }
          this.all_data = [];

          uni.hideLoading();
        });
    },
    toSyncPage() {
      this.$emit("changeTab", {}, 2);
    },

    // 待同步数据
    initSyncCount() {
      this.syncCount = (this.all_data || []).filter(
        (item) => item.synchronization == 0
      ).length;
    },

    // 初始化
    getList() {
      const all_data = this.all_data || [];

      const tempAllData = {};
      all_data.forEach((item) => {
        const val = tempAllData[item.submitMonth] || [];
        if (val.length) {
          tempAllData[item.submitMonth].push(item);
        } else {
          tempAllData[item.submitMonth] = [item];
        }
      });

      const keys = Object.keys(tempAllData);

      const { inspectionTime = [] } = this.searchForm;
      const startTime = inspectionTime[0];
      const endTime = inspectionTime[1];

      // 第一步： 筛选有效的时间范围
      const timeFrame = keys.filter((key) => {
        if (!inspectionTime.length) {
          return true;
        } else {
          return (
            new Date(startTime).getTime() <= new Date(key).getTime() &&
            new Date(key).getTime() <= new Date(endTime).getTime()
          );
        }
      });

      // 第二步： 根据搜索条件过滤
      const list = timeFrame.map((key) => {
        return {
          time: key,
          list: this.coverData(tempAllData[key]),
        };
      });

      this.countNum = 0;
      list.forEach((item) => {
        this.countNum += item.list.length;
      });

      this.list = list;

      this.initSyncCount();
    },

    coverData(arr = []) {
      const {
        isException = "",
        inspectionType = "",
        synchronization = "",
      } = this.searchForm;

      return arr.filter((item) => {
        return (
          (!isException || item.isException == isException) &&
          (!inspectionType || item.inspectionType == inspectionType) &&
          (!synchronization || item.synchronization == synchronization)
        );
      });
    },
    change(e) {
      this.searchForm = e;

      this.init();
    },

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

    toPage() {
      uni.showLoading();

      getDarft()
        .then((res) => {
          const darf_data = res || {};

          if (darf_data.inspectionType == 1) {
            uni.navigateTo({
              url: `/pages/inspectionContent/inspectionContent?isDarf=1`,
            });
          } else if (darf_data.inspectionType == 2) {
            uni.navigateTo({
              url: `/pages/shaftInspection/shaftInspection?isDarf=1`,
            });
          } else {
            uni.navigateTo({
              url: "/pages/inspection/inspFirst",
            });
          }
          uni.hideLoading();
        })
        .catch((error) => {
          if (error.code == 0) {
            uni.showToast({
              title: error.msg,

              icon: "none",
              duration: 1000,
            });
          }
          uni.navigateTo({
            url: "/pages/inspection/inspFirst",
          });
          uni.hideLoading();
        });
    },
  },
};
</script>

<style scoped lang="less">
.home-page-content {
  .card-list {
    display: flex;

    .card-item {
      border-radius: 12px;
      flex: 1;
      margin-right: 16px;
      height: 166px;
      box-sizing: border-box;
      padding: 32px 0 24px 12px;

      position: relative;
      overflow: hidden;
      &:nth-of-type(1) {
        background-image: linear-gradient(-67deg, #dbeeff 6%, #f5fbff 100%);
      }
      &:nth-of-type(2) {
        background-image: linear-gradient(108deg, #f2f6ff 0%, #e6eeff 92%);
      }
      &:nth-of-type(3) {
        background-image: linear-gradient(-66deg, #dbeeff 6%, #f5fbff 100%);
      }

      .bg-img {
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 110px;
        height: 130px;
        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;
        z-index: 10;
      }

      .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: 16px 0;
    font-size: 18px;
    color: #000000;
    font-weight: bold;
  }

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

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