<template>
    <nut-searchbar v-model="code" placeholder="请输入设备地址、id" style="margin-bottom: 10px">
      <template #rightout>
        <nut-button type="info" size="small" @click="search">搜索</nut-button>
      </template>
    </nut-searchbar>
    <div class="home">
      <div class="home_box" v-for="item in list" :key="item.id" @click="jump(item)">
        <nut-row :gutter="10">
          <nut-col :span="24">订单号：<span class="blue">{{item.id}}</span></nut-col>
          <nut-col :span="24">设备id：<span class="blue">{{item?.device.id}}</span></nut-col>
          <nut-col :span="24">设备地址：<span class="blue">{{item?.device.addr}}</span></nut-col>
          <nut-col :span="24">发布时间：<span class="blue">{{item.publish}}</span></nut-col>
          <nut-col :span="24">订单状态：
            <nut-tag type="warning" v-if="item.status === 0">待完成</nut-tag>
            <nut-tag type="warning" v-else-if="item.status === 1">进行中</nut-tag>
            <nut-tag type="success" v-else>已完成</nut-tag>
          </nut-col>
        </nut-row>
      </div>
    </div>
    <div style="float: right;">
      <nut-pagination v-model="pageNum" :total-items="total" :items-per-page="pageSize" @change="pageChange" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { timeDate } from "../../utils";
import Api from '../../assets/api/home'

const router = useRouter();

const code = ref('');
const pageNum = ref(1);
const pageSize = ref(10);
const list = ref([]);
const total = ref(0)
const search = () => {
  let params = {
    cond: code.value,
    status: -1,
    page: pageNum.value,
    limit: pageSize.value
  }
  Api.Query(params).then(res => {
    list.value = res.data.list;
    total.value = res.data.total;
  })
}

const pageChange = (val) => {

}

const jump = (item) => {
  router.push({
    path: '/detail',
    query: {
      id: item.id
    }
  })
}


onMounted(() => {
  search()
})


</script>
<style scoped>
:deep(.nut-cell) {
  margin: 10px 0 0 0;
}
:deep(.nut-cell__value) {
  flex: 2
}
.home {
  box-sizing: border-box;
  padding: 0 16px;
  width: 100%;
  height: calc(100% - 100px);
  overflow: auto;
  position: relative;
}
.home_box {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  box-shadow: 0 1px 7px #edeef1;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
}
.blue {
  color: #0081FF;
}
</style>
