<!-- 详情 -->

<template>
    <div style="position: relative">
        <div class="topBox">
            <el-descriptions title="基本信息" style="width: 100%;line-height: 30px;">
                <el-descriptions-item label="模型名称:">{{tableItem.modelName}}</el-descriptions-item>
                <el-descriptions-item label="模型ID:">{{tableItem.modelId}}</el-descriptions-item>
                <el-descriptions-item label="模型类型:">{{ModelType.getValue(tableItem.modelType)}}</el-descriptions-item>
                <el-descriptions-item label="业务标签:"><el-tag  :size="defaultFormItemSize" >{{tableItem.businessLabel}}</el-tag> </el-descriptions-item>

            </el-descriptions>
        </div>
        <div class="tableBox" :style="{ height: tableHeight }">
            <el-tabs v-model="activeName" >
                <el-tab-pane label="版本列表" name="versionList"><versionList :tableItem="tableItem" @assessRefresh="$refs.taskList.refresh()" /></el-tab-pane>
                <el-tab-pane label="任务列表" name="taskList"><taskList ref="taskList" :tableItem="tableItem" /></el-tab-pane>
                <el-tab-pane label="部署记录" name="deploymentRecord"><deploymentRecord :tableItem="tableItem"/></el-tab-pane>
             </el-tabs>

        </div>
    </div>
</template>
  
<script>
import { mapGetters } from 'vuex';

import versionList from './versionList/index';
import taskList from './taskList/index';
import deploymentRecord from './deploymentRecord/index';

export default {
  data () {
    return {
      activeName: 'versionList'
    };
  },

  components: {versionList, taskList, deploymentRecord},
  props: ['tableItem'],
  computed: {
    ...mapGetters(['getMainContextHeight']),
    tableHeight () {
      return this.getMainContextHeight - 95 + 'px';
    }

  },

  methods: {

  },

  mounted () {
  }

};
</script>
<style lang="scss" scoped>
@import "@/assets/style/element-variables.scss";

.topBox {
    background-color: white;
    width: 100%;
    height: 95px;
    margin-bottom: 16px;

    .title {
        color: $--color-text-primary;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
        padding: 20px 20px 10px 20px;
    }
}

.instructions {
    padding: 0px 20px 20px 20px;

    .describe {
        color: $--color-text-secondary;
        margin-bottom: 16px;
    }

    .itemTitle {
        color: $--color-text-primary;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .head-index {
        font-size: 24px;
        color: #e8e9eb;
        line-height: 32px;
    }

    .itemDescribe {
        width: 170px;
        color: $--color-text-secondary;
    }

    .img {
        height: 72px;
        width: 140px;
    }
}

.tableBox {
    background-color: white;
    width: 100%;
    padding: 20px;
    overflow: auto;
    .add {
        margin-bottom: 20px;
    }
}
/deep/ .el-descriptions__table{
    width: 100%;
}
</style>
