<script setup lang="ts">
import { PropType, toRefs } 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,
  },
  isEdit: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const { dataList } = toRefs(props);
let filterDataList = dataList?.value;
// 过滤不显示的数据
filterDataList = filterDataList.filter((prop: any) => {
  return !prop.hide;
});
</script>

<template>
  <div class="data-list-table">
    <!-- i和j都是从1开始的，需要注意这里的计算逻辑 -->
    <div v-for="i in fields.length" :key="i" class="system-tr">
      <div
        v-for="j in 4"
        :key="j"
        :class="['system-td', j % 2 === 0 ? 'value' : 'key']"
        :style="'width:' + (j % 2 === 0 ? '50%' : '')"
      >
        <span v-if="j == 4">
          <el-switch
            v-if="isEdit"
            v-model="fields[i - 1][filterDataList[Math.ceil(j / 2) - 1]?.content].Enabled"
            :class="filterDataList[Math.ceil(j / 2) - 1]?.content + (j % 2 === 0 ? 'Value' : 'Key')"
          />
          
          <span v-else>
            <el-tag
              v-if="fields[i - 1][filterDataList[Math.ceil(j / 2) - 1]?.content].Enabled"
              type="success"
            >
              {{ $t('STORE_ENABLED') }}
            </el-tag>
            <el-tag v-else type="info">{{ $t('IBMC_DISENABLED') }}</el-tag>
          </span>
        </span>
        <span
          v-else
          :class="filterDataList[Math.ceil(j / 2) - 1]?.content + (j % 2 === 0 ? 'Value' : 'Key')"
        >
          {{
            filterDataList[Math.ceil(j / 2) - 1]
              ? j % 2 === 0
                ? fields[i - 1][filterDataList[Math.ceil(j / 2) - 1]?.content]
                : $t(filterDataList[Math.ceil(j / 2) - 1]?.label)
              : ''
          }}
        </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: 16px;
    }

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

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

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

  .system-tr:nth-last-child(1) {
    .key,
    .value {
      padding-bottom: 0;
    }
  }
}

.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>
