<!-- 巡查 -->
<template>
  <view class="container">
    <view class="tuitimeaxis">
      <tui-time-axis>
        <tui-timeaxis-item backgroundColor="transparent"
                           v-for="(item,index) in list"
                           :key="index">
          <template v-slot:node>
            <view class="tui-node"
                  style="background-color: #5179ef;">
              <tui-icon name="check"
                        color="#fff"
                        :size="14"
                        bold></tui-icon>
            </view>
          </template>

          <template v-slot:content>
            <!-- pages/template/everyday/inspectHistory -->
            <view>
              <view class="tui-order-title">{{item.start_date}}</view>
              <view class="tui-order-desc"
                    @click="navTo(`/pages/template/chooseProjectBranch/chooseProjectBranch?id=${itemChild.management.id}&riskOrgName=${itemChild.management.risk_org_name}`)"
                    v-for="itemChild in item.children"
                    :key="itemChild.id">
                <tui-icon name="check"
                          v-if="itemChild.is_complete!=0"
                          color="#5179ef"
                          :size="14"
                          bold></tui-icon>
                <tui-icon name="shut"
                          v-else
                          color="red"
                          :size="14"
                          bold></tui-icon>
                <text class="tui-order-tit">{{itemChild.management.risk_org_name}} 危险点:{{itemChild.management.risk_title}}</text>
              </view>
            </view>
          </template>
        </tui-timeaxis-item>
      </tui-time-axis>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      pageSize: 20,
      hasMore: true,
      list: [],
      searchForm: {
        user_id: "",
        user_name: "",
      },
    };
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  onLoad() {
    console.log("onLoad");
    this.searchForm.user_id = this.userinfo.userId;
    this.searchForm.user_name = this.userinfo.nickname;
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      const { data } = await this.$request.get(`risk/Allot/index`, {
        params: {
          ...this.searchForm,
          page: Math.ceil(this.list.length / this.pageSize) + 1,
          limit: this.pageSize,
        },
      });
      this.list = [...this.list, ...data.data];
      if (data.data.length < this.pageSize) {
        this.hasMore = false;
      }
    },
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
  },
  onReachBottom: function () {
    // this.$refs.infiniteScroll.reachBottom();
    if (!this.hasMore) return;
    this.fetchItems();
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 80rpx);
}
.tuitimeaxis {
  padding: 35rpx 40rpx;
}
.tui-node {
  height: 44rpx;
  width: 44rpx;
  border-radius: 50%;
  background-color: #5179ef;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.tui-order-title {
  padding-bottom: 12rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.tui-order-desc {
  padding-bottom: 12rpx;
  font-size: 28rpx;
  color: #333;
}

.tui-order-time {
  font-size: 24rpx;
  font-weight: bold;
}

.tui-gray {
  color: #848484 !important;
}
.tui-light-gray {
  color: #888 !important;
}
.tui-primary {
  color: #5677fc;
}
.tui-order-tit {
  margin-left: 10px;
}
</style>
