<style>
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }
  .zk_Table thead tr:last-child th{
    top:35px!important;
    z-index:1!important;
  }
  .zk_Table thead tr{
    height:35px;
  }
  /* .zk_Table thead tr:first-child th:last-child {
    top: 0;
    z-index: 3;
} */
</style>
<template>
  <div>
    <div class="page-content">
      <q-table :pagination="msg" ref="table" :loading="loading" :style="{'height':tableHeight+'px'}"
        no-data-label="暂无相关数据" flat class="sticky-header-column-table no-bottom-table zk_Table"
        separator="none" :data="dataList" :columns="columns" row-key="">
        <tr slot="header">
          <q-th rowspan="2" style="text-align:left;width:300px;">
            名称
          </q-th>
          <q-th colspan="2">年份</q-th>
          <q-th rowspan="2">成长率</q-th>
        </tr>
        <tr slot="header">
          <q-th>
            <span v-if="dataList&&dataList.length>0">{{dataList[0].FirstYearStr}}</span>
          </q-th>
          <q-th>
            <span v-if="dataList&&dataList.length>0">{{dataList[0].SecondYearStr}}</span>
          </q-th>
        </tr>
        <template v-slot:body-cell-FirstYear="props" v-if="tabCheck==2">
          <q-td style="text-align:center;">
            <span :class="{'TotalredClass':props.row.FirstYear<0}">{{props.row.FirstYear}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-SecondYear="props" v-if="tabCheck==2">
          <q-td style="text-align:center;">
            <span :class="{'TotalredClass':props.row.SecondYear<0}">{{props.row.SecondYear}}%</span>
          </q-td>
        </template>

        <template v-slot:body-cell-YearRate="props">
          <q-td style="text-align:center;">
            <span :class="{'TotalredClass':props.row.YearRate<0}">{{props.row.YearRate}}%</span>
          </q-td>
        </template>
        <template v-slot:bottom>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: null
      },
      tabCheck: {
        type: Number,
        default: null
      }
    },
    meta: {

    },
    components: {},
    data() {
      return {
        columns: [{
            name: 'ItemName',
            label: '名称',
            field: 'ItemName',
            align: 'left'
          },
          {
            name: 'FirstYear',
            label: '第一条',
            field: 'FirstYear',
            align: 'center'
          },
          {
            name: 'SecondYear',
            label: '第二条',
            field: 'SecondYear',
            align: 'center',
          },
          {
            name: 'YearRate',
            label: '成长率',
            field: 'YearRate',
            align: 'center',
          }
        ],
        loading: false,
        msg:{
          rowsPerPage: 0
        },
        tableHeight: 500,
      }
    },
    created() {
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 90;
      }, 100)
    },
    mounted() {
    },
    methods: {
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>
