<script setup lang="ts">
import TreeCard from "./components/TreeCard.vue";
import DeviceCard from "./components/DeviceCard.vue";
import { getCardList } from "@/api/list";
import { onMounted, reactive, ref } from "vue";
defineOptions({
  name: "DeviceList"
});

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const pagination = ref({ current: 1, pageSize: 9, total: 0 });

const deviceList = ref([]);

const searchValue = ref("");

const formData = reactive({
  deviceSort: "",
  deviceState: "",
  isEnabled: ""
});
const dataLoading = ref(true);
// const onSubmit = () => {
//   console.log("submit!");
// };
const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
};
const onCurrentChange = (current: number) => {
  pagination.value.current = current;
};
const getCardListData = async () => {
  try {
    const { data } = await getCardList();
    deviceList.value = data.list;
    console.log(data.list);
    pagination.value = {
      ...pagination.value,
      total: data.list.length
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};
onMounted(() => {
  getCardListData();
});
</script>

<template>
  <div class="flex justify-start p-4 main">
    <TreeCard />
    <div
      class="flex-1 ml-5"
      v-loading="dataLoading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="设备分类">
          <el-select
            v-model="formData.deviceState"
            placeholder="设备分类"
            clearable
          >
            <el-option label="分类1" value="1" />
            <el-option label="分类2" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select
            v-model="formData.deviceState"
            placeholder="设备状态"
            clearable
          >
            <el-option label="在线" value="1" />
            <el-option label="故障" value="2" />
            <el-option label="离线" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select
            v-model="formData.deviceState"
            placeholder="是否启用"
            clearable
          >
            <el-option label="已启用" value="1" />
            <el-option label="未启用" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        v-loading="dataLoading"
        :element-loading-svg="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
      >
        <el-empty
          v-show="
            deviceList
              .slice(
                pagination.pageSize * (pagination.current - 1),
                pagination.pageSize * pagination.current
              )
              .filter(v =>
                v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
              ).length === 0
          "
          :description="`${searchValue} 产品不存在`"
        />
        <template v-if="pagination.total > 0">
          <el-row :gutter="16">
            <el-col
              class="mb-4"
              v-for="(device, index) in deviceList
                .slice(
                  pagination.pageSize * (pagination.current - 1),
                  pagination.pageSize * pagination.current
                )
                .filter(v =>
                  v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
                )"
              :key="index"
              :xs="24"
              :sm="24"
              :md="12"
              :lg="8"
              :xl="6"
            >
              <DeviceCard :device="device" />
            </el-col>
          </el-row>
          <el-pagination
            v-model:currentPage="pagination.current"
            class="float-right"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[9, 18, 36]"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </template>
      </div>
    </div>
  </div>
</template>
