<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import { getFru } from '../../service/system.service';
import { loading } from '@/utils/composition';
import { isOtherEmptyProperty } from '../../utils/system.util';
import { FRUINFOTYPE, FruTableItem } from './fru.type';
import TableExtendData from '../../components/TableExtendData/TableExtendData.vue';
import { getStoreData } from '@/utils/composition';
 
const columns = [
    {
        title: 'FRU_ID',
        width: '464',
        content: 'fruId',
        show: true,
    },
    {
        title: 'FRU_DEVICE_NAME',
        content: 'fruName',
        show: true,
    },
];
 
// 产品信息扩展
const productExtendArr = [
    {
        label: 'FRU_PRODUCT_NAME',
        content: 'productName',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_ASSET_TAG',
        content: 'assetTag',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_FILE_ID',
        content: 'productFruFileId',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_INFO',
        content: 'productCustomInfo',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_EXTEND_LABEL',
        content: 'productCustomInfo',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_PART_NUM',
        content: 'productPartNumber',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_VERSION',
        content: 'productVersion',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_MANUFACTURER',
        content: 'manufacturerName',
        hide: true,
    },
    {
        label: 'FRU_PRODUCT_SN',
        content: 'productSerialNumber',
        hide: true,
    },
];
 
// 机箱信息扩展
const chassisExtendArr = [
    {
        label: 'FRU_CHASSIS_PART_NUM',
        content: 'chassisPartNumber',
        hide: true,
    },
    {
        label: 'FRU_CHASSIS_INFO',
        content: 'chassisCustomInfo',
        hide: true,
    },
    {
        label: 'FRU_CHASSIS_TYPE',
        content: 'chassisType',
        hide: true,
    },
    {
        label: 'FRU_CHASSIS_SN',
        content: 'chassisSerialNumber',
        hide: true,
    },
];
 
// 单板信息扩展
const boardExtendArr = [
    {
        label: 'FRU_BOARD_DATETIME',
        content: 'mfgDate',
        hide: true,
    },
    {
        label: 'FRU_BOARD_INFO',
        content: 'boardCustomInfo',
        hide: true,
    },
    {
        label: 'FRU_BOARD_FILE_ID',
        content: 'boardFRUFileID',
        hide: true,
    },
    {
        label: 'FRU_BOARD_SN',
        content: 'boardSerialNumber',
        hide: true,
    },
    {
        label: 'FRU_BOARD_PRODUCT_NAME',
        content: 'boardProductName',
        hide: true,
    },
    {
        label: 'FRU_BOARD_MANUFACTURER',
        content: 'boardManufacturer',
        hide: true,
    },
    {
        label: 'FRU_BOARD_PART_NUM',
        content: 'boardPartNumber',
        hide: true,
    },
];
const expandContentWidth = ref('');
const expandKeyWidth = ref('');
const langWidth = new Map<string, any>([
    ['zh', { keyWidth: '100px', contentWidth: '355px' }],
    ['en', { keyWidth: '135px', contentWidth: '330px' }],
    ['ja', { keyWidth: '145px', contentWidth: '320px' }],
    ['fr', { keyWidth: '185px', contentWidth: '280px' }],
    ['ru', { keyWidth: '250px', contentWidth: '215px' }],
]);
 
const tableData = ref<FruTableItem[]>([]);
const tableParam = reactive({
    currentPage: 1,
    pageSize: 10,
});
const allData = reactive<FruTableItem[]>([]);
 
const handleSizeChange = (val: number) => {
    tableParam.pageSize = val;
    tableParam.currentPage = 1;
    getData();
};
 
const handleCurrentChange = (val: number) => {
    tableParam.currentPage = val;
    getData();
};
 
const getData = () => {
    if (allData.length) {
        tableData.value = allData.slice(
            (tableParam.currentPage - 1) * tableParam.pageSize,
            tableParam.currentPage * tableParam.pageSize,
        );
    }
};
 
const getCellClass = (cellInfo: any) => {
    if (cellInfo.columnIndex === 0) {
        return 'expand_cell';
    } else {
        return columns[cellInfo.columnIndex]?.content;
    }
};
 
const isShowModule = (key: FRUINFOTYPE, item: any) => {
    switch(key) {
        case FRUINFOTYPE.PRODUCT:
            return !!(
                item.ProductName ||
                item.AssetTag ||
                item.productFruFileId ||
                item.productCustomInfo ||
                item.ProductPartNumber ||
                item.ProductVersion ||
                item.ManufacturerName ||
                item.ProductSerialNumber
            );
        case FRUINFOTYPE.CHASSIS:
            return !!(
                item.ChassisPartNumber ||
                item.ChassisCustomInfo ||
                item.ChassisType ||
                item.ChassisSerialNumber
            );
        case FRUINFOTYPE.BOARD:
            return !!(
                item.MfgDate ||
                item.BoardCustomInfo ||
                item.BoardSerialNumber ||
                item.BoardProductName ||
                item.BoardManufacturer ||
                item.BoardFRUFileID ||
                item.BoardPartNumber
            );
        default:
            return false;
    }
};
 
const  initExpandInfo = (key: FRUINFOTYPE, info: any) => {
    let result = {};
    switch(key) {
        case FRUINFOTYPE.PRODUCT: {
            result = getProductResult(info);
            break;
        }
        case FRUINFOTYPE.CHASSIS: {
            result = getChassisResult(info);
            break;
        }
        case FRUINFOTYPE.BOARD: {
            result = getBoardResult(info);
            break;
        }
        default:
            break;
    }
    
    return result;
};
 
const getProductResult = (info: any) => {
    const productResult = {
        productName: isOtherEmptyProperty(info?.ProductName) || ' ',
        assetTag: isOtherEmptyProperty(info?.AssetTag) || ' ',
        productFruFileId: isOtherEmptyProperty(info?.ProductFRUFileID) || ' ',
        productCustomInfo: isOtherEmptyProperty(info?.productCustomInfo) || ' ',
        productPartNumber: isOtherEmptyProperty(info?.ProductPartNumber) || ' ',
        productVersion: isOtherEmptyProperty(info?.ProductVersion) || ' ',
        manufacturerName: isOtherEmptyProperty(info?.ManufacturerName) || ' ',
        productSerialNumber: isOtherEmptyProperty(info?.ProductSerialNumber) || ' ',
        extendTitleArr: JSON.parse(JSON.stringify(productExtendArr)),
        moduleShow: isShowModule(FRUINFOTYPE.PRODUCT, info),
    };
    productResult.extendTitleArr.forEach((element: any) => {
        element.hide = productResult[element.content] === '--';
    });
    return productResult;
};
 
const getChassisResult = (info: any) => {
    const chassisResult = {
        chassisPartNumber: isOtherEmptyProperty(info?.ChassisPartNumber) || ' ',
        chassisCustomInfo: isOtherEmptyProperty(info?.ChassisCustomInfo) || ' ',
        chassisType: isOtherEmptyProperty(info?.ChassisType) || ' ',
        chassisSerialNumber: isOtherEmptyProperty(info?.ChassisSerialNumber) || ' ',
        extendTitleArr: JSON.parse(JSON.stringify(chassisExtendArr)),
        moduleShow: isShowModule(FRUINFOTYPE.CHASSIS, info),
    };
    chassisResult.extendTitleArr.forEach((element: any) => {
        element.hide = chassisResult[element.content] === '--';
    });
    return chassisResult;
};
 
const getBoardResult = (info: any) => {
    const boardResult = {
        mfgDate: isOtherEmptyProperty(info?.MfgDate) || ' ',
        boardCustomInfo: isOtherEmptyProperty(info?.BoardCustomInfo) || ' ',
        boardSerialNumber: isOtherEmptyProperty(info?.BoardSerialNumber) || ' ',
        boardProductName: isOtherEmptyProperty(info?.BoardProductName) || ' ',
        boardManufacturer: isOtherEmptyProperty(info?.BoardManufacturer) || ' ',
        boardFRUFileID: isOtherEmptyProperty(info?.BoardFRUFileID) || ' ',
        boardPartNumber: isOtherEmptyProperty(info?.BoardPartNumber) || ' ',
        extendTitleArr: JSON.parse(JSON.stringify(boardExtendArr)),
        moduleShow: isShowModule(FRUINFOTYPE.BOARD, info),
    };
    boardResult.extendTitleArr.forEach((element: any) => {
        element.hide = boardResult[element.content] === '--';
    });
    return boardResult; 
};
 
const parseData = (info: any):any => {
    const extendProduct = initExpandInfo(FRUINFOTYPE.PRODUCT, info.ProductElabel);
    const extendChassis = initExpandInfo(FRUINFOTYPE.CHASSIS, info.ChassisElabel);
    const extendBoard = initExpandInfo(FRUINFOTYPE.BOARD, info.BoardElabel);
    return {
        fruId: info.FruId,
        fruName: isOtherEmptyProperty(info.FruName) || ' ',
        extendProduct,
        extendChassis,
        extendBoard,
    };
};
 
const initCurrentData = () => {
    loading(true);
    allData.splice(0);
    getFru().then((res: any) => {
        const result = res.data;
        if (result.List || result.List.length > 0) {
            const data = result.List;
            data.forEach((info: any) => {
                const showData = parseData(info);
                if (showData) {
                  allData.push(showData);
                  getData();
                }
            });
        }
    })
    .finally(() => {
        loading(false);
    });
};
 
onMounted(() => {
    const locale = getStoreData('loct', 'locale');
    expandContentWidth.value = langWidth.get(locale).contentWidth;
    expandKeyWidth.value = langWidth.get(locale).keyWidth;
  initCurrentData();
});
 
</script>
 
<template>
  <div id="info-fru">
    <el-table
      v-addId.table="'fruTable'"
      :data="tableData"
      :cell-class-name="getCellClass"
      resizable
      border
    >
        <el-table-column class="expand" type="expand" width="32px">
            <template #default="attrs">
                <div class="product expand-item" v-if="attrs.row.extendProduct.moduleShow">
                    <span v-t="'FRU_PRODUCT_INFO'" class="module-title" />
                    <TableExtendData
                        :data-list="attrs.row.extendProduct.extendTitleArr"
                        :fields="attrs.row.extendProduct"
                        :contentWidth="expandContentWidth"
                        :keyWidth="expandKeyWidth"
                    />
                </div>
                <div class="board expand-item" v-if="attrs.row.extendBoard.moduleShow">
                    <span v-t="'FRU_BOARD_INFO'" class="module-title" />
                    <TableExtendData
                        :data-list="attrs.row.extendBoard.extendTitleArr"
                        :fields="attrs.row.extendBoard"
                        :contentWidth="expandContentWidth"
                        :keyWidth="expandKeyWidth"
                    />
                </div>
                <div class="chassis expand-item" v-if="attrs.row.extendChassis.moduleShow">
                    <span v-t="'FRU_CHASSIS_INFO'" class="module-title" />
                    <TableExtendData
                        :data-list="attrs.row.extendChassis.extendTitleArr"
                        :fields="attrs.row.extendChassis"
                        :contentWidth="expandContentWidth"
                        :keyWidth="expandKeyWidth"
                    />
                </div>
            </template>
        </el-table-column>
        <el-table-column
            v-for="col in columns"
            :key="col?.content"
            :label="$t(col?.title)"
            :prop="col?.content"
            :width="col?.width"
        >
            <template #default="process">
                <span :class="col?.content">{{ process.row[col?.content] }}</span>
            </template>
        </el-table-column>
    </el-table>
 
    <el-pagination
      v-if="allData.length != 0"
      v-model:currentPage="tableParam.currentPage"
      :page-sizes="[10, 15, 30, 50]"
      :page-size="tableParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
 
<style lang="scss" scoped>
#info-fru {
    background: var(--o-bg-color-base);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    .module-title {
        font-weight: 700;
        margin: 24px 0 16px;
        display: block;
    }
    .expand-item:first-of-type .module-title {
        margin-top: 16px;
    }
}
</style>
<style lang="scss">
#info-fru {
  .el-table__expanded-cell {
    padding-left: 40px !important;
    padding-top: 0;
    background: var(--o-bg-color-light);
  }
 
  .el-table tr th {
    font-weight: 600 !important;
  }
 
  .expanded {
    background: var(--o-bg-color-light);
    box-shadow: inset 0 -1px 0 0 var(--o-border-color-light);
  }
 
  .el-table__header {
    width: 100% !important;
  }
 
  .el-table__body {
    width: 100% !important;
  }
  .data-list-table .system-td.key {
    min-width: 112px;
  }
  .data-list-table .system-tr {
    display: block;
  }
}
</style>