<template>
    <div class='table'>
        <table
        cellspacing="0"
        border="1">
        <!-- 顶部title -->
        <tr>
            <th>维度</th>
            <th>名称</th>
            <th>考核标准</th>
            <th v-if="tableInfo.result">结果值</th>
            <th>权重({{obj.weight*100}}%)</th>
            <th  v-if="tableInfo.score">上级评分</th>
            <th  v-if="tableInfo.score">评分说明</th>
        </tr>
        <!-- 暂无数据时显示 -->
        <tr v-if="obj.recortModelDtos.length === 0">
                <td :colspan="6">
                    暂无数据
                </td>
        </tr>
        <!-- template不会被渲染 -->
        <template v-for="(item,index) in obj.recortModelDtos" >
            <!-- 左侧跨行区域 -->
            <tr :key="index+1000">
                <td :rowspan="item.detailDtos.length+1">{{item.name}}</td>
                <td v-if="item.detailDtos.length===0"></td>
                <td v-if="item.detailDtos.length===0"></td>
                <td v-if="item.detailDtos.length===0 && tableInfo.score"></td>
                <td v-if="item.detailDtos.length===0 && tableInfo.score"></td>
                <td v-if="item.detailDtos.length===0 && tableInfo.result"></td>
                <td v-if="item.detailDtos.length===0"></td>
            </tr>
            <!-- 右侧数据 -->
            <tr v-for="(child) in item.detailDtos" :key="child.target">
                <td>
                    {{child.target || ''}}
                </td>
                 <td>
                    {{child.keyResult || ''}}
                </td>
                <td v-if="tableInfo.result">
                    <span>{{child.checkResult || '--'}}</span>
                    <el-input  type="textarea" placeholder="请输入内容" v-model="child.checkResulted" clearable></el-input>
                </td>
                <td>
                    {{(child.checkWeight)*100}}%
                </td>
                <td v-if="tableInfo.score">
                    <span>{{child.superScore || '--'}}</span>
                    <el-input  type="textarea" placeholder="请输入内容" v-model="child.superScoreed" clearable></el-input>
                </td>
                <td style="padding:10px;" v-if="tableInfo.score">
                    <span>{{child.scoreComment || '--'}}</span>
                    <el-input  type="textarea" placeholder="请输入内容" v-model="child.scoreCommented" clearable></el-input>
                </td>
            </tr>
        </template>
        </table>
        <div class="table-bottom">
                <div class="table-bottom-content">
                <el-button size='small' @click="handleSaveDetail()" plain>暂存</el-button>
                    <el-button size='small' type="primary"  >提交</el-button>
                </div>
            </div>
    </div>
</template>
<script>
export default {
  name: 'columnsTbale',
  props: {
    obj: {
      type: Object,
      default: () => {
        return {
          recortModelDtos: []
        }
      }
    },
    tableInfo: {
      type: Object,
      default: () => {
        return {
          result: false,
          score: false
        }
      }
    }
  },
  data () {
    return {
      input: ''
    }
  },
  mounted () {
    console.log('list', this.obj)
  },
  methods: {
    handleSaveDetail () {

    }
  }
}
</script>
<style lang='less' scoped>
.table{
    position: relative;
}
.table-bottom {
    position: fixed;
    height: 60px;
    padding: 0 80px;
    width: 100%;
    background: #fff;
    border-top: 1px solid @borderColor;
    bottom: 0;
    left: 0;
    &-content{
      width: 1360px;
      margin: 0 auto;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
}
    table{
        margin-top: 15px;
        width: 100%;
        border:1px solid #e9eaec;
        border-collapse:collapse
    }
    th{
        background-color: #f8f8f9;
    }
    th,td{
        padding: 5px;
        border: 1px solid #e9eaec;
        text-align: center;
        vertical-align: top;
        line-height: 30px;
    }
</style>
