<script setup lang="ts">
import { PropType, toRefs, watch } from 'vue';
const props = defineProps({
  // 展示数据列表 比如 [{label: '名称', content: 'cpu', hide: true}]
  dataList: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
    require: true,
  },
  // key和value对应的展示字段名称
  fields: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    },
    require: true,
  },
  // 列表id
  id: {
    type: Number,
    default: () => {
      return 0;
    },
    require: false,
  },
  // 需要添加修改按钮的字段
  editAttr: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
    require: false,
  },
  // 标题宽度
  keyWidth: {
    type: String,
    default: '',
    require: false,
  },
  // 内容宽度
  contentWidth: {
    type: String,
    default: '50%',
    require: false,
  }
});

const emits = defineEmits(['edit']);
const { dataList } = toRefs(props);
let filterDataList = dataList?.value;
// 过滤不显示的数据
filterDataList = filterDataList.filter((prop: any) => {
  return !prop.hide;
});
watch(
  () => dataList.value,
  newVal => {
    // 过滤不显示的数据
    filterDataList = newVal.filter((prop: any) => {
      return !prop.hide;
    });
  }
);

function editValue(arr: any) {
  emits('edit', {id: props.id, params: arr});
}

</script>

<template>
  <div class="data-list-table">
    <!-- i和j都是从1开始的，需要注意这里的计算逻辑 -->
    <div v-for="i in Math.ceil(filterDataList.length / 2)" :key="i" class="system-tr">
      <div
        v-for="j in 4"
        :key="j"
        :class="['system-td', j % 2 === 0 ? 'value' : 'key']"
        :style="'width:' + (j % 4 === 0 && contentWidth !== '50%' ? '' :
          j % 2 === 0 ? contentWidth :
          j % 2 === 1 ? keyWidth : '')"
      >
        <span
          v-if="filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]?.content === 'processorState'"
          :class="['processorState' + (j % 2 === 0 ? 'Value' : 'Key'),
                   j % 2 === 0 && (fields as any).processorState === 'CPU_COMMON_ENABLE'?'enabled':'',
                   j % 2 === 0 && (fields as any).processorState !== 'CPU_COMMON_ENABLE'?'disabled':''
          ]"
        >
          {{
            j % 2 === 0
              ? $t((fields as any).processorState)
              : $t(filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]?.label)
          }}
        </span>
        <span
          v-else
          :class="
            filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]?.content +
              (j % 2 === 0 ? 'Value' : 'Key')
          "
        >
          {{
            filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]
              ? j % 2 === 0
                ? fields[filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]?.content]
                : $t(filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]?.label)
              : ''
          }}
        </span>
        <!-- 修改icon -->
        <span
          v-if="filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)] && j % 2 === 0 && editAttr.includes(filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]?.label)"
          :id="`editor${id}`"
          class="editor-text"
          @click="editValue([filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)],fields[filterDataList[(i - 1) * 2 + (Math.ceil(j / 2) - 1)]?.content]])"
        >{{$t('HOME_FDM_ALARM_SETTING')}}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.data-list-table {
  width: 100%;
  display: table;

  .system-tr {
    display: table-row;

    .system-td {
      display: table-cell;
      padding-bottom: 8px;
    }

    .key {
      white-space: nowrap;
      padding-right: 24px;
      vertical-align: top;
      color: var(--o-text-color-secondary);
    }

    .value {
      white-space: normal;
      padding-right: 32px;
      color: var(--o-text-color-primary);
      word-break: break-all;
    }

    .value:nth-last-child(1) {
      padding-right: 0;
    }
  }

  .system-tr:nth-last-child(1) {
    .key,
    .value {
      padding-bottom: 0;
    }
  }
  
  .editor-text {
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--o-color-primary);

    &:hover {
      color: var(--o-color-primary-secondary);
    }
  }
}

.enabled {
  display: block;
  background: var(--o-color-success);
  border-radius: 2px;
  width: 64px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 16px;
}
.disabled {
  display: block;
  background: var(--o-text-color-tertiary);
  border-radius: 2px;
  width: 64px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 16px;
}
</style>
