<!-- 详情 -->
<template>
    <div style="position: relative">
        <div class="topBox">
            <el-descriptions title="基本信息" style="width: 100%;line-height: 30px;">
                <el-descriptions-item label="任务名称:">{{tableItem.taskName}}</el-descriptions-item>
                <el-descriptions-item label="任务ID:">{{tableItem.taskId}}</el-descriptions-item>
                <el-descriptions-item label="创建人:">{{tableItem.createUserIdDictMap.name}}</el-descriptions-item>
                <el-descriptions-item label="创建时间:">{{tableItem.createTime}}</el-descriptions-item>
                <el-descriptions-item label="任务描述:">{{tableItem.taskDescribe}}</el-descriptions-item>
                <el-descriptions-item label="任务类型:">{{ModelType.getValue(tableItem.taskType)  }}</el-descriptions-item>
                
            </el-descriptions>
        </div>
        <div class="tableBox" :style="{ height: tableHeight }">
              <taskList ref="taskList" :tableItem="tableItem" />
        </div>
    </div>
</template>
  
<script>
import { mapGetters } from 'vuex';

import taskList from './taskList/index';

export default {
  data () {
    return {

    };
  },

  components: { taskList},
  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>
