<script setup lang="ts">

import {Lightning} from "@element-plus/icons-vue";
import type {ILedBaseSearch} from "@/interface/page/led/ILedBaseSearch.ts";
import {ref} from "vue";
import type {IAppBaseLed} from "@/model/table/IAppBaseLed.ts";
import LedBrandFormatter from "@/plugin/formatter/LedBrandFormatter.ts";
import TrueFalseTagStyleFormatter from "@/plugin/formatter/TrueFalseTagStyleFormatter.ts";
import LedColorTypeFormatter from "@/plugin/formatter/LedColorTypeFormatter.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import LedApi from "@/api/led.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import AddLedComponent from "@/components/page/led/AddLedComponent.vue";
import LedDetailComponent from "@/components/page/led/LedDetailComponent.vue";

const ledSearch = ref<ILedBaseSearch>({ ledBrand: 0}); // 查询参数
const tableData = ref<IAppBaseLed[]>([]); // 表格数据
const ledBrandFormatter = new LedBrandFormatter();
const trueFalseTagStyleFormatter = new TrueFalseTagStyleFormatter();
const ledColorTypeFormatter = new LedColorTypeFormatter();
const showAdd = ref<boolean>(false); // 添加LED显示
const showDetail = ref<boolean>(false); // 详情LED显示
const detailData = ref<IAppBaseLed>({});// 详情LED数据

// 查询
const query = () => {
  const loadingInstance = MessageUtils.loading("正在查询");
  LedApi.queryLed(ledSearch.value).then((result) => {
    const responseString = JSON.stringify(result.data);
    const response = JSON.parse(responseString) as AppServeDataResponse<IAppBaseLed[]>;
    if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
      tableData.value = response.data;
      MessageUtils.successMessage('查询成功');
      return;
    }
    MessageUtils.warningMessageBox(response.msg, '警告');
  }).catch(() => {}).finally(() => {
    loadingInstance.close();
  })

};
// 重置查询参数
const resetInput = () => {
  ledSearch.value = { ledBrand: 0};
};
// 添加LED
const addLed = () => {
  showAdd.value = true;
};
// 修改LED
const handleEdit = (index: number, row: IAppBaseLed) => {
  detailData.value = {
    id: row.id,
    ledIp: row.ledIp,
    ledBrand: row.ledBrand,
    height: row.height,
    width: row.width,
    colorType: row.colorType,
    location: row.location,
    isExternal: row.isExternal,
    remark: row.remark
  };
  showDetail.value = true;
}

</script>

<template>
  <div style="margin-left: 10px;margin-top: 10px; width: calc(100vw - 280px);">
    <h3>LED 屏基础资料管理</h3>
    <el-row class="searchCard">
      <el-row style="width: 100%;">
        <el-form class="searchForm" v-model="ledSearch" label-position="top" label-width="150px" inline>
          <el-form-item label="LED IP 地址：" style="width: 250px;">
            <el-input v-model="ledSearch.ledIp" placeholder="请输入 LED IP" clearable></el-input>
          </el-form-item>
          <el-form-item label="LED 位置：" style="width: 250px;">
            <el-input v-model="ledSearch.location" placeholder="请输入 LED 位置" clearable></el-input>
          </el-form-item>
          <el-form-item label="LED 品牌：" style="width: 250px;">
            <el-select v-model="ledSearch.ledBrand" placeholder="请选择 LED 品牌" style="width: 250px" clearable>
              <el-option :key="0" label="灵信" :value="0"/>
            </el-select>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-button-group style="width: 100%;margin-left: 10px; margin-bottom: 10px">
          <el-button type="primary" @click="query">查询/刷新</el-button>
          <el-button type="warning" @click="resetInput">重置查询参数</el-button>
          <el-button type="success" @click="addLed"><el-icon><Lightning /></el-icon>添加LED</el-button>
          <!--          <el-button type="info" @click="">重载LED配置</el-button>-->
        </el-button-group>
      </el-row>
    </el-row>
    <el-row class="dataTable">
      <el-table :data="tableData" stripe border style="width: 100%" max-height="calc(100vh - 270px)">
        <el-table-column type="index" label="序号" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="id" label="记录号" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="ledIp" label="LED IP" align="center" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="ledBrand" label="LED 品牌" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag size="small" :type="ledBrandFormatter.ledBrandFormatter(scope.row.ledBrand).type">
              {{ledBrandFormatter.ledBrandFormatter(scope.row.ledBrand).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="height" label="高度" align="center" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="width" label="宽度" align="center" min-width="150" show-overflow-tooltip/>
        <el-table-column prop="colorType" label="颜色类型" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="dark" size="small" round :type="ledColorTypeFormatter.ledColorTypeFormatter(scope.row.colorType).type">
              {{ledColorTypeFormatter.ledColorTypeFormatter(scope.row.colorType).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="位置" align="center" width="150" show-overflow-tooltip/>
        <el-table-column prop="isExternal" label="是否外部控制" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-tag effect="dark" size="small" round :type="trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.isExternal).type">
              {{trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.isExternal).label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" min-width="120" show-overflow-tooltip/>
        <el-table-column label="操作" width="80" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
<!--  添加LED显示-->
  <AddLedComponent v-model="showAdd" @reLoadingTableData="query"/>
<!--  详情数据-->
  <LedDetailComponent v-model="showDetail" :form-data="detailData" @reLoadingTableData="query"/>
</template>

<style scoped>

</style>