<!-- ups监测详情 -->
<script lang="ts" setup name="UPSMonitorDetail">
import { getUpsMonitorDetail } from '@/api/laboratory/data'
import useUserStore from '@/store/modules/user'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const emits = defineEmits(['refresh'])
const user = useUserStore() // 用户信息
const loadingTable = ref(false)
const dialogVisible = ref(false) // 弹窗显隐

const unitMap = { // 单位map
  A相电流: 'A',
  A相电压: 'V',
  AB线电压: 'V',
  B相电流: 'A',
  B相电压: 'V',
  BC线电压: 'V',
  C相电流: 'A',
  C相电压: 'A',
  CA线电压: 'A',

  交流相电压: 'V',
  总交流输入电流: 'A',
  总交流频率: 'Hz',
  总交流功率因数: '',
  A相输出电流: 'A',
  A相输出负载: '%',
  A相输出电压: 'V',
  B相输出电流: 'A',
  B相输出负载: '%',
  B相输出电压: 'V',
  C相输出电流: 'A',
  C相输出负载: '%',
  C相输出电压: 'V',
  AC线电压: 'V',

  电池电压: 'V',
  电池电流: 'A',
  输出负载百分比: '%',
  UPS内部温度: '℃',

  电压: 'V',
  温度: '℃',
  存储内阻: 'mΩ',

  频率: 'Hz',

  // 功率
  A相有功功率: 'KW',
  B相有功功率: 'KW',
  C相有功功率: 'KW',
  总有功功率: 'KW',

  A相无功功率: 'Kvar',
  B相无功功率: 'Kvar',
  C相无功功率: 'Kvar',
  总无功功率: 'Kvar',

  总交流有功功率: 'KW',
  总交流视在功率: 'KVA',
  总视在功率: 'KVA',

  正向有功电度: 'KWh',
  反向有功电度: 'KWh',

  浓度: 'g/L',
  回风湿度: '%',
  设定湿度: '%',
  回风湿度上限: '%',
  回风湿度下限: '%',
  回风温度: '℃',
  设定温度: '℃',
  回风温度上限: '℃',
  回风温度下限: '℃',
  风机运行时间: 'h',
  压机1运行时间: 'h',
  压机2运行时间: 'h',
  加湿电流: 'h',
} as any
const columnsParams = ref([ // 参数表头
  { text: '参数名称', value: 'paramName', align: 'center', width: '160' },
  { text: '值', value: 'curValue', align: 'center' },
  { text: '单位', value: 'unit', align: 'center' },
])

const columnsStatus = ref<TableColumn[]>([ // 状态表头
  { text: '参数名称', value: 'paramName', align: 'center', width: '160' },
  { text: '状态', value: 'valueDecript', align: 'center', styleFilter: (row: any) => { return `${row.valueDecript}` === '未运行' ? 'color: red' : `${row.valueDecript}` === '正常' ? 'color: #00a846' : `${row.valueDecript}` === '运行' ? 'color: #eeb63c' : '' } },
  { text: '参数值', value: 'curValue', align: 'center' },
])

const paramsList = ref([]) as any // 参数表格
const statusList = ref([]) // 状态表格

const radioMenus = ref([ // 标签内容
  { name: '参数', value: 'params' },
  { name: '状态', value: 'status' },
])
const current = ref('params') // 选择的tab 默认基本信息
// ----------------------------------------方法-------------------------------------------------
// 数据查询
function fetchData(id: string) {
  loadingTable.value = true
  getUpsMonitorDetail({ id }).then((response) => {
    if (response && response.data && response.data.length) {
      paramsList.value = response.data.filter((item: { valueDecript: string }) => !item.valueDecript)
      paramsList.value = paramsList.value.map((item: { paramName: string }) => {
        return {
          ...item,
          unit: unitMap[item.paramName],
        }
      })
      statusList.value = response.data.filter((item: { valueDecript: string }) => item.valueDecript)
    }
    loadingTable.value = false
  })
}

// 弹窗初始化
const initDialog = (id: string) => {
  dialogVisible.value = true // 打开弹窗
  fetchData(id)
}

// 关闭
const close = () => {
  dialogVisible.value = false
}
// --------------------------------------钩子---------------------------------------

defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="详情" append-to-body width="65%" class="container">
    <div style="display: flex;justify-content: space-between;">
      <el-radio-group v-model="current" style="margin-bottom: 20px;">
        <el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <el-table
      v-show="current === 'params'"
      v-loading="loadingTable"
      :data="paramsList"
      border
      max-height="400"
      style="width: 100%;"
    >
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columnsParams"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        :width="item.width"
        align="center"
      />
    </el-table>
    <el-table
      v-show="current === 'status'"
      v-loading="loadingTable"
      :data="statusList"
      border
      style="width: 100%;"
      max-height="400"
    >
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columnsStatus"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        :width="item.width"
        align="center"
      >
        <template #default="scope">
          <span v-if="!item.filter" :style="item.styleFilter ? item.styleFilter(scope.row) : ''">{{ scope.row[item.value] }}</span>
          <span v-else :style="item.styleFilter ? item.styleFilter(scope.row) : ''">{{ item.filter(scope.row) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer footer">
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.container {
  .isDetail {
    ::v-deep {
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
        content: "";
        display: none;
      }
    }
  }

  .center {
    display: flex;
    align-items: flex-end;
  }
}
</style>