<template>
    <div class="detail-div">
        <div class="title-div">{{ detailData.name }}</div>
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane :label="item" v-for="(item, index) of tabData" :key="index" :name="index + ''">
            </el-tab-pane>
        </el-tabs>
        <BasicInfo :infoList="detailData" v-if="activeName == '0'"></BasicInfo>
        <RealInfo v-if="activeName == '1'"></RealInfo>
        <HistoryInfo v-if="activeName == '2'"></HistoryInfo>
    </div>
</template>
<script setup>
import bimStore from '@/store/modules/bim';
import BasicInfo from './BasicInfo.vue';
import RealInfo from './RealInfo.vue';
import HistoryInfo from './HistoryInfo.vue';
import { ElMessage } from 'element-plus';
const deviceData = {
    'set1': {
        name: '立仓',
        imgUrl: 'licang',
        detail: [
            {
                name: '资产名称',
                value: '立仓'
            },
            {
                name: '资产类型',
                value: '糖化设备'
            },
            {
                name: '资产位置',
                value: '漳州厂区糖化间'
            },
            {
                name: '采购日期',
                value: '2012-11-15'
            },
            {
                name: '使用日期',
                value: '2012-11-15'
            },
            {
                name: '过保截至日期',
                value: '2018-11-15'
            },
            {
                name: '所属厂区',
                value: '漳州厂区'
            },
            {
                name: '资产编码',
                value: 'TH-2304187001'
            },
            {
                name: '资产状态',
                value: '在用'
            },
            {
                name: '累计采购天数',
                value: '234天'
            },
            {
                name: '投入使用天数',
                value: '234天'
            },
            {
                name: '距离过保天数',
                value: '-34天'
            },
            {
                name: '设备二维码',
                value: '2018-11-15'
            },
        ]
    },
    'set6': {
        name: '过滤槽',
        imgUrl: 'guolvcao',
        detail: [
            {
                name: '资产名称',
                value: '过滤槽'
            },
            {
                name: '资产类型',
                value: '糖化设备'
            },
            {
                name: '资产位置',
                value: '漳州厂区糖化间'
            },
            {
                name: '采购日期',
                value: '2012-11-15'
            },
            {
                name: '使用日期',
                value: '2012-11-15'
            },
            {
                name: '过保截至日期',
                value: '2018-11-15'
            },
            {
                name: '所属厂区',
                value: '漳州厂区'
            },
            {
                name: '资产编码',
                value: 'TH-2304187001'
            },
            {
                name: '资产状态',
                value: '在用'
            },
            {
                name: '累计采购天数',
                value: '234天'
            },
            {
                name: '投入使用天数',
                value: '234天'
            },
            {
                name: '距离过保天数',
                value: '-34天'
            },
            {
                name: '设备二维码',
                value: '2018-11-15'
            },
        ]
    }
}

const activeName = ref('0')
const tabData = [
    '基本信息', '实时数据', '历史数据', '巡检记录', '保养记录', '维修记录', '事件记录', '健康分析', '效益分析', '资产对比'
]

const data = reactive({
    detailData: {
        name: '',
        imgUlr: '',
        detail: []
    }
});
const { detailData } = toRefs(data);
const deviceNum = computed(() => bimStore().deviceNum);
detailData.value = deviceData[deviceNum.value];
const handleClick = (tab, event) => {
    // if(activeName !== '0' && activeName !== '1' && activeName !=='2') {
    //     ElMessage.warning('暂未开发');
    // }

}


</script>
<style lang="scss" scoped>
.detail-div {
    height: 700px;
    color: #fff;
    .title-div {
        height: 50px;
        line-height: 50px;
        width: 100%;
        border: 1px solid #2E6099;
        padding: 0 10px;
        margin-bottom:5px;
    }
}
</style>