<template>
  <div class="content">
    <tiny-layout class="h_full">
      <tiny-row :flex="true" :gutter="10" class="h_full">
        <tiny-col :span="12" :no="1" class="coal_main h_full">
          <tiny-button type="info" size="small" @click="rowAdd" style="width: 50px"
            >新增</tiny-button
          >
          <tiny-grid
            border
            :data="dataList"
            :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
            @row-click="handleRowClick"
            auto-resize
            style="flex-grow: 1"
          >
            <tiny-grid-column field="name" title="PLC名称"></tiny-grid-column>
            <tiny-grid-column field="number" title="PLC编号"></tiny-grid-column>
            <tiny-grid-column field="points" title="PLC点位"></tiny-grid-column>
            <tiny-grid-column title="操作" width="140">
              <template #default="data">
                <tiny-button type="info" size="small" @click="rowEdit(data.row)">编辑</tiny-button>
                <tiny-button type="danger" size="small" @click="rowDel(data.row)">删除</tiny-button>
              </template>
            </tiny-grid-column>
          </tiny-grid>
        </tiny-col>
        <tiny-col :span="12" :no="2" class="coal_main h_full">
          <!-- <tiny-button type="" size="small" style="width: 50px"></tiny-button> -->
          <tiny-grid
            :data="pointList"
            :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
            auto-resize
            style="flex-grow: 1"
          >
            <tiny-grid-column type="index" width="60"></tiny-grid-column>
            <tiny-grid-column type="selection" width="60"></tiny-grid-column>
            <tiny-grid-column field="name" title="点位名称"></tiny-grid-column>
            <tiny-grid-column field="number" title="点位编号"></tiny-grid-column>
            <tiny-grid-column field="type" title="点位类型"></tiny-grid-column>
            <tiny-grid-column title="操作" width="80">
              <template #default="data">
                <tiny-button type="danger" size="small" @click="pointDel(data.row)"
                  >删除</tiny-button
                >
              </template>
            </tiny-grid-column>
          </tiny-grid>
        </tiny-col>
      </tiny-row>
    </tiny-layout>
    <plcList_form :visible="visible" :mode="mode" @update:visible="visible = $event" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import api from "../api";
import plcList_form from "./plcList_form.vue";
const visible = ref(false);
const mode = ref("add");
const plc_id = ref(null);
type PlcItem = {
  id?: string | number;
  name: string;
  number: string;
  points: number;
};
type PointItem = {
  id?: string | number;
  name: string;
  number: string;
  type: string;
};
const dataList = ref<PlcItem[]>([]);
const pointList = ref<PointItem[]>([]);
const rowDel = (item: PlcItem) => {
  console.log("删除", item);
  const res = api.deletePlc(String(item.id));
};
const pointDel = (point: PointItem) => {
  console.log("点位删除", point);
};
const loadDataList = async () => {
  try {
    const result = await api.getPlcList({});

    if (Array.isArray(result)) {
      dataList.value = result;
      return;
    }

    if (Array.isArray(result?.data)) {
      dataList.value = result.data;
      return;
    }

    if (Array.isArray(result?.dataList)) {
      dataList.value = result.dataList;
      return;
    }

    dataList.value = [];
  } catch (error) {
    console.error("获取PLC列表失败:", error);
    dataList.value = [];
  }
};
const loadPointList = async (id: string | number) => {
  try {
    const result = await api.pointList({ plcId: String(id) });

    if (Array.isArray(result)) {
      pointList.value = result;
      return;
    }

    if (Array.isArray(result?.data)) {
      pointList.value = result.data;
      return;
    }

    if (Array.isArray(result?.points)) {
      pointList.value = result.points;
      return;
    }

    if (Array.isArray(result?.data?.points)) {
      pointList.value = result.data.points;
      return;
    }

    pointList.value = [];
  } catch (error) {
    console.error("error:", error);
    pointList.value = [];
  }
};
const handleRowClick = async ({ row }: { row: PlcItem }) => {
  if (!row?.id) {
    pointList.value = [];
    return;
  }
  plc_id.value = row.id as any;
  await loadPointList(row.id);
};
const rowAdd = () => {
  mode.value = "add";
  visible.value = true;
};
const rowEdit = (row: { id: any,name: string; number: string; points: number }) => {
  plc_id.value = row.id;
  mode.value = "edit";
  visible.value = true;
};
onMounted(() => {
  loadDataList();
});
</script>

<style>
.content {
  height: 100%;
}
.tiny-button.tiny-button--small {
  padding: 0 5px !important;
  min-width: 50px !important;
}
@media (min-width: 1024px) {
  .about {
    display: flex;
    align-items: center;
  }
}
</style>
