<template>
  <el-table :data="listData" border size="small" style="margin:10px 0">
    <el-table-column label="指标ID" align="center" prop="metricsId" width="80"/>
    <el-table-column label="指标分类" align="left" width="160">
      <template #default="scope">
            <span v-for="(item,i) in scope.row.metricsDef.metricsTypes" :key="`${scope.$index}_${item}`">
              {{ item.typeName }}<span v-if="scope.row.metricsTypes && i!==scope.row.metricsTypes.length-1">、</span>
            </span>
      </template>
    </el-table-column>
    <el-table-column label="指标名称" align="left">
      <template #default="scope">
        {{ scope.row.metricsDef.metricsName }}
      </template>
    </el-table-column>
    <el-table-column label="指标编码" align="left" prop="metricsCode" width="160"/>
    <el-table-column label="告警-低" align="left" width="80">
      <template #default="scope">
        <el-input v-model="scope.row.alarmLow" size="small" v-if="edit"/>
        <span v-else>{{ scope.row.alarmLow }}</span>
      </template>
    </el-table-column>
    <el-table-column label="告警-中" align="left" width="80">
      <template #default="scope">
        <el-input v-model="scope.row.alarmMid" size="small" v-if="edit"/>
        <span v-else>{{scope.row.alarmMid}}</span>
      </template>
    </el-table-column>
    <el-table-column label="告警-高" align="left" width="80">
      <template #default="scope">
        <el-input v-model="scope.row.alarmHigh" size="small" v-if="edit" />
        <span v-else>{{scope.row.alarmHigh}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="180">
      <template #default="scope">
        <slot name="operation" :row="scope.row" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
const props = defineProps(['listData','edit'])
</script>
<style scoped lang="scss">
</style>
