<script setup lang="ts">
import { PropType, reactive } from 'vue';
import { IBasicAttribute, IColumns } from '@/model/System/net-interface';

import OpenRowData from './OpenRowData.vue';
import DataList from '@/components/DataList/DataList.vue';
import { traduction } from '@/utils/language';

defineProps({
  openRowType: {
    type: String,
    default: 'complex',
    required: false,
  },
  tableData: {
    type: Array as PropType<IBasicAttribute[]>,
    default: () => {
      return [];
    },
    required: true,
  },
  columns: {
    type: Array as PropType<IColumns[]>,
    default: () => {
      return [];
    },
    required: true,
  },
});

const emits = defineEmits(['expandChange']);
let expandedShowRows = reactive([]);

const linkStatus = {
  LinkUp: 'LinkUp',
  NoLink: 'NoLink',
  LinkDown: 'LinkDown',
  'N/A': '--',
  Connected: traduction('NET_CONNECT'),
  Disconnected: traduction('NET_DISCONNECT'),
  Down: traduction('NET_DISCONNECT'),
  Up: traduction('NET_CONNECT'),
};

function expandChange(row: any, expandedRows: any[]) {
  expandedShowRows = JSON.parse(JSON.stringify(expandedRows));
  emits('expandChange', { row, expandedRows: expandedShowRows});
}

</script>

<template>
  <div id="fcPort" class="can-open-column-table">
    <el-table
      v-addId.table="'fcPortTable'"
      class="table-first-floor"
      border
      :data="tableData"
      row-key="PhysicalPortNumber"
      @expand-change="expandChange"
    >
      <el-table-column type="expand">
        <template #default="scope">
          <OpenRowData
            v-if="openRowType === 'complex'"
            :data="scope.row.extendData"
            :link-status="scope.row.LinkStatus"
          />

          <div v-if="openRowType === 'normal'" class="normal-box">
            <DataList id="fcDataList" :data-list="scope.row?.extendData?.NetworkAttribute?.dataList" />
          </div>
        </template>
      </el-table-column>

      <el-table-column v-for="item in columns" :key="item.title" :label="item.title">
        <template #default="scope">
          <span v-if="item.key === 'PhysicalPortNumber'" :id="'port' + scope.$index">{{ scope.row[item.key] }}</span>
          <div v-else-if="item.key === 'LinkStatus'">
            <span v-if="scope.row[item.key] === 'N/A' || scope.row[item.key] === null">{{ linkStatus[scope.row[item.key]] || '--' }}</span>
            <el-tooltip v-else placement="top" :content="linkStatus[scope.row[item.key]] || scope.row[item.key]">
            <el-tag
              :id="'status' + scope.$index"
              size="small"
              :type="
                ['Connected', 'LinkUp', 'Up'].includes(scope.row[item.key])
                  ? 'success'
                  : 'info'
              "
            >
              {{ linkStatus[scope.row[item.key]] || scope.row[item.key] }}
            </el-tag>
            </el-tooltip>
          </div>
          <span 
            v-else-if="item.key==='InterfaceType'" 
            :id="'interfaceType' + scope.$index"
          >
            {{ $t(scope.row[item.key]) }}
          </span>
          <span 
            v-else-if="item.key==='MediaType'" 
            :id="'mediaType' + scope.$index"
          >
            {{ $t(scope.row[item.key]) }}
          </span>
          <span 
            v-else-if="item.key==='FC_ID'" 
            :id="'FC_ID' + scope.$index"
          >
            {{ $t(scope.row[item.key]) }}
          </span>
           <span 
            v-else-if="item.key==='Name'" 
            :id="'name' + scope.$index"
          >
            {{ $t(scope.row[item.key]) }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.can-open-column-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .el-table {
    overflow: auto;
  }

  .el-table + .el-pagination {
    margin-top: 16px;
  }

  :deep(.el-table__expanded-cell) {
    padding-left: 17px;
  }

  .normal-box {
    padding-left: 32px;
  }
}
</style>
