<template>
  <view class="synchronous-management">
    <!-- 搜索项 -->
    <SearchCom @change="change" :hiddenSearch="['synchronization']" />

    <!-- 结果 -->
    <view class="synchronous-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"
              :isDisable="true"
            />
          </view>
        </view>

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

    <!-- 数据打包 -->
    <view
      v-show="isPackedDataBtn"
      class="synchronous-button"
      @click="openDialog(true)"
      >数据打包</view
    >

    <!-- 打包弹窗 -->
    <Dialog v-show="isDialog && list.length"  :list="list" @close="openDialog(false)"></Dialog>
  </view>
</template>

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

export default {
  components: {
    SearchCom,
    InspectionItem,
    Dialog,
    Empty,
  },
  data() {
    return {
      isDialog: false, //
      list: [], // 展示数据
      all_data: [], // 所有数据
      searchForm: {
        // 搜索条件
      },
      countNum: 0, // 统计查询总数
      isPackedDataBtn: false, // 控制打包按钮显示
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    userInfo() {
      return this.$store.state.now_user || {};
    },
   
  },

  methods: {
    init() {
      uni.showLoading();

      getAllInspections()
        .then((res) => {
          this.all_data = res.filter((item) => item.synchronization == 0);

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

    getList() {
      const all_data = this.all_data || [];
      this.isPackedDataBtn =
        all_data.filter((item) => item.synchronization == 0).length > 0;

      
        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.getList();
    },
    openDialog(show) {
      this.isDialog = show;
      if (!show) {
        this.init();
      }
    },
  },
};
</script>
<style scoped lang="less">
.synchronous-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;
    }
  }
  .synchronous-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;
        }
      }
    }
  }

  .synchronous-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>
