<template>
  <my-layout>
    <el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
      <el-form :inline="true" label-width="auto" @submit.stop.prevent>
        <el-form-item label="关键词">
          <el-input v-model="state.filter.keyWord" placeholder="设备编号、资产编号" @keyup.enter="onQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
          <el-button v-auth="'api:admin:usp-alarm:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增报警器 </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="my-fill mt8" shadow="never">
      <el-table :data="state.alarmListData" style="width: 100%" v-loading="state.loading" row-key="id" border>
        <el-table-column prop="deviceNo" label="设备编号" min-width="150" show-overflow-tooltip />
        <el-table-column prop="assetNo" label="资产编号" min-width="150" show-overflow-tooltip />
        <el-table-column prop="ip" label="IP地址" min-width="130" show-overflow-tooltip />
        <el-table-column prop="port" label="端口" min-width="80" align="center" />
        <el-table-column prop="serviceName" label="服务名称" min-width="150" show-overflow-tooltip />
        <el-table-column prop="isRunning" label="运行状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag type="primary" v-if="row.isRuning">运行中</el-tag>
            <el-tag type="info" v-else>停止</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right" header-align="center" align="center">
          <template #default="{ row }">
            <el-button v-auth="'api:admin:usp-alarm:update'" icon="ele-EditPen" size="small" text type="primary" @click="onEdit(row)">编辑</el-button>
            <el-button v-auth="'api:admin:usp-alarm:soft-delete'" icon="ele-Delete" size="small" text type="danger" @click="onDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="my-flex my-flex-end" style="margin-top: 10px">
        <el-pagination
          v-model:currentPage="state.pageInput.currentPage"
          v-model:page-size="state.pageInput.pageSize"
          :total="state.total"
          :page-sizes="[10, 20, 50, 100]"
          size="small"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </el-card>

    <alarm-form ref="alarmFormRef" :title="state.alarmFormTitle" @refresh="onQuery" />
  </my-layout>
</template>

<script lang="ts" setup name="/admin/alarm">
import { ref, reactive, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue';
import { PageInputAlarmGetPageInput, AlarmGetPageOutput } from '/@/api/admin/data-contracts';
import { AlarmApi } from '/@/api/admin/AlarmApi';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction'

const AlarmForm = defineAsyncComponent(() => import('./components/alarm-form.vue'));

const { proxy } = getCurrentInstance() as any;

const alarmFormRef = ref();

const state = reactive({
  loading: false,
  alarmFormTitle: '',
  filter: {
    keyWord: '',
  },
  total: 0,
  pageInput: {
    currentPage: 1,
    pageSize: 20,
    filter: {},
  } as PageInputAlarmGetPageInput,
  alarmListData: [] as Array<AlarmGetPageOutput>,
});

onMounted(() => {
  onQuery();
});

const onQuery = async () => {
  state.loading = true;
  state.pageInput.filter = state.filter;
  const res = await new AlarmApi().getPage(state.pageInput).catch(() => {
    state.loading = false;
  });

  if (res?.success) {
    state.alarmListData = res.data?.list ?? [];
    state.total = res.data?.total ?? 0;
  }
  state.loading = false;
};

const onAdd = () => {
  state.alarmFormTitle = '新增报警器';
  alarmFormRef.value.open();
};

const onEdit = (row: AlarmGetPageOutput) => {
  state.alarmFormTitle = '编辑报警器';
  alarmFormRef.value.open(row);
};

const onDelete = (row: AlarmGetPageOutput) => {
  ElMessageBox.confirm(`确定要删除报警器【${row.deviceNo}】吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res = await new AlarmApi().softDelete({ id: row.id });
      if (res?.success) {
        ElMessage.success('删除成功');
        onQuery();
      } else {
        ElMessage.error(res?.msg as string);
      }
    })
    .catch(() => {});
};

const onSizeChange = (val: number) => {
  state.pageInput.pageSize = val;
  onQuery();
};

const onCurrentChange = (val: number) => {
  state.pageInput.currentPage = val;
  onQuery();
};
</script>
