<template>
  <div class="daily">
    <nut-sticky top="46">
      <div class="daily_tab">
        <div :class="['tab_item', active === 0 ? 'active' : '']" @click="cut(0)">任务巡检</div>
        <div :class="['tab_item', active === 1 ? 'active' : '']" @click="cut(1)">日常巡检</div>
      </div>
    </nut-sticky>
    <div class="content" v-infinite-scroll="init" :infinite-scroll-disabled="finished"
         infinite-scroll-watch-disabled="finished">
      <template v-if="list.length > 0">
        <template v-if="active === 0">
          <div class="content_item" v-for="(item, i) in list" :key="i" @click="jump(item)">
            <div class="item_flex">
              <div class="icon_order"></div>
              <div>巡单信息</div>
            </div>
            <div class="box_item">
              <div class="title">
                <div>预警类型</div>
                <div>触发位置</div>
                <div>预警内容</div>
                <div>创建时间</div>
              </div>
              <div class="number">
                <div>{{item.warningType}}</div>
                <div>{{item.unitName}}</div>
                <div>{{item.warningContent}}</div>
                <div>{{item.createTime}}</div>
              </div>
              <div class="lg"></div>
            </div>
          </div>
        </template>
        <template v-else-if="active === 1">
          <div class="content_item" v-for="(item, i) in list" :key="i"  @click="jump(item)">
            <div class="item_flex">
              <div class="icon_order"></div>
              <div>巡单信息</div>
            </div>
            <div class="box_item">
              <div class="title">
                <div>巡检位置</div>
                <div>创建时间</div>
              </div>
              <div class="number">
                <div>育肥舍一单元</div>
                <div>2024-01-03 10:37:02</div>
              </div>
              <template v-if="item.status === 0">
                <div class="btn">立即处理</div>
              </template>
              <template v-else>
                <div class="lg"></div>
              </template>
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <nut-empty description="无数据"></nut-empty>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "History"
}
</script>
<script setup>
  import { ref } from 'vue'
  import { getTaskPage, getDailyPage } from "../../utils/api";
  import { useRouter } from "vue-router";

  const router = useRouter()
  const active = ref(0)

  const current = ref(1)
  const size = ref(10)
  const list = ref([])
  const finished = ref(false)

  const init = (bool) => {
    if(active.value === 0) {
      initTask(bool)
    } else if(active.value === 1) {
      initDaily(bool)
    }
  }

  const cut = (val) => {
    if(active.value === val) {
      return;
    } else {
      active.value = val;
      current.value = 1;
      finished.value = false;
      init(true)
    }
  }

  const initTask = (bool) => {
    if(finished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value,
        status: 1
      }
      getTaskPage(params).then((res) => {
        if(res.code === 200) {
          if(bool) {
            list.value = res.data.records;
          } else {
            list.value = list.value.concat(res.data.records);
          }
          if(res.data.records.length < size.value) {
            finished.value = true;
            return;
          }
          current.value++;
        }
      })
    }
  }

  const initDaily = (bool) => {
    if(finished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value,
        status: 1
      }
      getDailyPage(params).then((res) => {
        if(res.code === 200) {
          if(bool) {
            list.value = res.data.records;
          } else {
            list.value = list.value.concat(res.data.records);
          }
          if(res.data.records.length < size.value) {
            finished.value = true;
            return;
          }
          current.value++;
        }
      })
    }
  }

  const jump = (item) => {
    if(active.value === 0) {
      router.push({
        path: '/taskDetail',
        query: {
          id: item.id
        }
      })
    } else if(active.value === 1) {
      router.push({
        path: '/dailyDetail',
        query: {
          id: item.id
        }
      })
    }
  }
</script>

<style scoped>
.daily {
  width: 100%;
  height: 100%;
}
.daily_tab {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: flex;
}
.tab_item {
  width: 50%;
  height: 40px;
  background-color: #fff;
}
.active {
  background-color: #0091FF;
  color: #fff;
}
.content {
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
  box-sizing: border-box;
  padding: 16px;
}
.content_item {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .12);
  margin-bottom: 10px
}
.item_flex {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid #F6F6F6;
}
.icon_order {
  width: 24px;
  height: 24px;
  background: url('../../assets/images/home/order.png') no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
}
.box_item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  padding-top: 10px;
}
.title {
  width: 20%;
  font-size: 12px;
}
.number {
  width: 46%;
  font-size: 12px;
}
.btn {
  width: 25%;
  height: 30px;
  background-color: #008CFF;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
}
.lg {
  width: 25%;
  height: 30px;
}
</style>
