<template>
  <view class="inspection-management">
    <!-- 搜索项 -->
    <SearchCom @change="change" />

    <!-- 结果 -->
    <view class="inspection-management-content">
      <view class="count-tatal">
        <text class="num">{{ countNum || 0 }}条</text>
        <text>查询结果</text>
      </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>

    <!-- 开始巡检 -->
    <view class="inspection-button"  @click="toPage"
      >开始巡检</view
    >
  </view>
</template>

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

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

    getAllInspections()
      .then((res) => {
        this.all_data = res;
        this.init();
        uni.hideLoading();
      })
      .catch((error) => {
        if (0 == error.code) {
          uni.showToast({
            title: error.msg,
            icon: "none",
            duration: 1000,
          });
        }
        this.all_data = [];
        uni.hideLoading();
      });
  },
  computed: {
    userInfo() {
      return this.$store.state.now_user || {};
    },
   
  },
  methods: {
    init() {
      const all_data = this.all_data || [];

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

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

    
      // 属于同一个月的数据  聚合
      const tempAllData = {};
      timeFrame.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 list = keys.map((key) => {
        return {
          time: key,
          list: this.coverData(tempAllData[key]),
        };
      });

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

      this.list = list;
    },

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

    

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

      this.init();
    },

    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">
.inspection-management {
  padding-top: 16px;
  .count-tatal {
    margin: 16px 0 8px 0;
    font-size: 14px;
    color: #4a4a4a;
    font-weight: 400;
    .num {
      font-size: 18px;
      color: #3774f6;
      line-height: 26px;
      font-weight: 600;
      margin-right: 5px;
    }
  }
  .inspection-management-content {
    .month-list {
      height: calc(100vh - 26px - 16px - 8px - 36px - 62px);
      overflow: auto;
      padding-bottom: 140px;
      .seconed-title {
        margin-top: 16px;
        font-size: 18px;
        color: #000000;
        font-weight: bold;
      }
      .month-record-item {
        margin-bottom: 24px;
        &:last-of-type {
          margin: 0;
        }

        .inspect-list {
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }

  .inspection-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 60px;
    width: 240px;
    height: 48px;
    left: 50%;
    color: #fff;
    transform: translateX(-50%);
    background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
    box-shadow: 0px 10px 24px 0px rgba(51, 104, 246, 0.24);
    border-radius: 27px;
  }
}
</style>
