<template>
  <div class="control-bas-box">
    <div class="title-name">会展中心站大系统模式表</div>
    <div class="control-bas">
      <el-table :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyle" :span-method="objectSpanMethod" style="float: left;">
        <el-table-column label="日期" width="300">
          <template slot="header">
            <div class="title-0">全年运行工况</div>
            <div class="title-0">运行模式号</div>
            <div class="title-0">模式状态</div>
            <div class="title-0">火灾指示灯:</div>
          </template>
          <template slot-scope="scope">
            <div class="table-0-top">
              <div class="left">
                {{ scope.row.date }}
              </div>
              <div class="right">
                <div>空调机</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="province" width="120">
          <template slot="header">
            <div style="width: 100%">模式</div>
            <div style="width: 100%">编号</div>
          </template>
        </el-table-column>
        <el-table-column label="大系统模式表">
          <el-table-column label="新风机">
            <el-table-column prop="province" label="FAF-1" width="120" />
            <el-table-column prop="city" label="FAF-2" width="120" />
          </el-table-column>
          <el-table-column label="组合式空调器">
            <el-table-column prop="province" label="AHU-1" width="120" />
            <el-table-column prop="city" label="AHU-2" width="120" />
          </el-table-column>
          <el-table-column label="回排风机">
            <el-table-column prop="province" label="RAF/SEF-1" width="120" />
            <el-table-column prop="city" label="RAF/SEF-2" width="120" />
          </el-table-column>
          <el-table-column label="风机1">
            <el-table-column prop="province" label="MD-1" width="120" />
            <el-table-column prop="province" label="MD-2" width="120" />
            <el-table-column prop="province" label="MD-3" width="120" />
            <el-table-column prop="province" label="MD-4" width="120" />
            <el-table-column prop="province" label="MD-5" width="120" />
            <el-table-column prop="province" label="MD-6" width="120" />
            <el-table-column prop="province" label="MD-7" width="120" />
            <el-table-column prop="province" label="MD-8" width="120" />
            <el-table-column prop="province" label="MD-9" width="120" />
            <el-table-column prop="province" label="MD-10" width="120" />
            <el-table-column prop="province" label="MD-11" width="120" />
            <el-table-column prop="province" label="MD-12" width="120" />
            <el-table-column prop="province" label="MD-13" width="120" />
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            tableTitleStyle: 'text-align: center; height: 35px; padding: 0;background: #45607B;',
            rowStyle: 'text-align: center;height: 35px; padding: 0; background: #45607B;',
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        };
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) { // 只有第一行合并
                if (rowIndex % 4 === 0) {
                    return {
                        rowspan: 4,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.control-bas-box{
    width: 100%;
    .table-0{
        width: 300px;
        float: left;
    }
    .table-0-top{
        height: 140px;
        .left{
            float: left;
        }
        .right{
            float: right;
            width: 60%;
        }
    }
}
.control-bas{
    margin: 30px;
    padding: 0;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid #fff;
}
.table-title-box{
    text-align: center;
}
.title-name{
    width: 100%;
    text-align: center;
    font-size: 26px;
    margin-top: 30px;
    color: #56E5DE;
}
.title-0{
    width: 100%;
    line-height: 20px;
    text-align: left;
    padding: 0;
}
/deep/{
    .el-table--border{
        background: #45607B;
        width: 100%;
        border: none;
    }
    .el-table th, .el-table tr{
        background: #45607B;
        color: #fff;
    }
    .el-table::before{
        background: #45607B;
    }
    .el-table--border::after, .el-table--group::after{
        background: #45607B;
    }
    .el-table thead.is-group th{
        background: #45607B;
        text-align: center;
    }
    .el-table--scrollable-x .el-table__body-wrapper{
        height: 400px;
    }
    .el-table .cell{
        padding: 0;
    }
}
</style>
