<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;
  }

  .TotalredClass {
    color: red;
  }
</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;">
            {{props.row.FirstYear}}%
          </q-td>
        </template>
        <template v-slot:body-cell-SecondYear="props" v-if="tabCheck==2">
          <q-td style="text-align:center;">
            {{props.row.SecondYear}}%
          </q-td>
        </template>

        <template v-slot:body-cell-YearRate="props">
          <q-td style="text-align:center;">
            {{props.row.YearRate}}%
          </q-td>
        </template>
        <template v-slot:body-cell-FirstYear="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.FirstYear<0}">{{props.row.FirstYear}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-SecondYear="props">
          <q-td>
            <span :class="{'TotalredClass':props.row.SecondYear<0}">{{props.row.SecondYear}}%</span>
          </q-td>
        </template>
        <template v-slot:body-cell-YearRate="props">
          <q-td>
            <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: {
      title: "市场部年度数据统计"
    },
    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>