<!-- 管理员-设备管理 -->
<template>
  <NavBar title="设备管理" />
  <div class="equipment">
    <div class="search">
      <t-cell
        arrow
        title=""
        :note="typeState.type.join(' ')"
        @click="typeState.show = true"
      />
      <t-search
        v-model="listQuery.shop"
        :clearable="true"
        shape="round"
        placeholder="店铺名称或位置"
        @change="fetchEquipmentList(false)"
      ></t-search>
      <!-- <t-button theme="primary" >搜索</t-button> -->
    </div>

    <EquipmentList :equipmentList="list" @checkEquipmentDetail="checkEquipmentDetail"/>
    <t-loading theme="dots" size="40px" layout="vertical" :loading="showLoading" />
    <t-loading size="40px" layout="vertical" :indicator="false" text="没有更多啦" :loading="!showLoading" />
  </div>
  <t-back-top v-show="backTopVisible" text="顶部" theme="round" />
  <t-popup v-model="typeState.show" placement="bottom">
    <t-picker
      v-model="typeState.type"
      :columns="typeColumns"
      @confirm="onConfirm"
      @cancel="typeState.show = false"
    />
  </t-popup>
</template>
<script lang="ts" name="Equipment" setup>
import NavBar from "../../../components/navBar/navBar.vue";
import { IEquipmentList } from "../home/components/equipmentList-interface";
import EquipmentList from "../home/components/equipmentList.vue";
import { getEquipmentList } from '../../../api/home'
const list = ref<IEquipmentList[]>([]);
const backTopVisible = ref(false); // 回到顶部显隐
const $router = useRouter(); // 路由实例
const $route = useRoute()
const total = ref() // 数据总数
const showLoading = ref(true) // 是否显示加载中
const typeState = reactive({
  // 设备状态筛选
  show: false,
  type: ["全部"],
});
const typeColumns = [
  [
    {
      label: "全部",
      value: "全部",
    },
    {
      label: "正常",
      value: "正常",
    },
    {
      label: "报警",
      value: "报警",
    },
    {
      label: "离线",
      value: "离线",
    },
  ],
];
const statusMap: {[key: string]: string} = {
  '全部': '',
  '正常': '0',
  '报警': '1',
  '离线': '2',
}
const listQuery = ref({
  // 请求参数
  shop: "", // 店铺名称
  type: "", // 报警类型
  pageSize: 10,
  pageNo: 1,
});
// 监听页面滚动
window.onscroll = function() {
  if (window.scrollY > 200) {
    //scrollY距离顶部的距离
    backTopVisible.value = true;
  } else {
    backTopVisible.value = false;
  }
  //变量windowHeight是可视区的高度
  const windowHeight = document.body.clientHeight;
  //变量scrollHeight是滚动条的总高度
  const scrollHeight = document.body.scrollHeight;
  //滚动条到底部的条件
  console.log(window.scrollY, windowHeight, scrollHeight - 60);
  
  if (Number(window.scrollY) + windowHeight >= scrollHeight - 60) {
    // showLoading.value = true
    onBottom()
  }
};
// 确定选择状态
const onConfirm = (val: string[]) => {
  const typeTest = val[0]
  listQuery.value.type = statusMap[typeTest];
  fetchEquipmentList()
  typeState.show = false;
};

function onBottom() { // 触底加载
  if ((listQuery.value.pageNo * listQuery.value.pageSize) < total.value) {
    showLoading.value = true
    listQuery.value.pageNo++
    fetchEquipmentList(true)
  } 
}

// 获取设备列表
function fetchEquipmentList(isNowPage = false) {
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.value.pageNo = 1
  }
  getEquipmentList(listQuery.value).then((res) => {
    showLoading.value = true
    if(isNowPage) {
      list.value = list.value.concat(res.data.records)
    } else {
      list.value = res.data.records
    }
    total.value = res.data.total
    showLoading.value = false
  })
}

// 查看设备详情
const checkEquipmentDetail = (item: IEquipmentList) => {
  $router.push({ path: '/detail', query:  {...item }});
}

onMounted(() => {
  if ($route.query.flag) {
    listQuery.value.type = $route.query.value
    for(var i in statusMap) {
      if(statusMap[i] === $route.query.value) {
        typeState.type = [i]
      }
    }
    
  }
  fetchEquipmentList()
}) 

</script>
<style lang="scss" scoped>
@import "../../../assets/style/variables.scss";

.equipment {
  width: 100%;
  height: 100%;
  padding: 60px 10px;
  box-sizing: border-box;
  .search {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
<style lang="scss">
.equipment {
  .t-search__input-box--round {
    background-color: #fff !important;
  }
  .t-search {
    width: 100% !important;
    margin-left: 10px;
  }
  .t-cell--middle {
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .t-cell__title,
  .t-cell__note {
    font-size: 16px;
  }
  .t-cell {
    flex-shrink:0;
    width: 80px !important;
    padding: 10px !important;
  }
  .t-cell--middle {
    margin: 0 !important;
  }
  .t-button--size-medium {
    padding-left: 0;
    padding-right: 0;
  }
}
</style>