<template>
  <div style="margin-top:16px">
    <el-table
      :data="tableData"
      style="width: 100%"
      height="calc(100vh - 182px)"
      size="small">
      <el-table-column
        prop="depfullname"
        label="部门"
        width="120"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.depfullname}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="人员"
        width="80"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.name?scope.row.name:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="position"
        label="职位"
        width="100"
        fixed>
        <template slot-scope="scope">
          <p>{{scope.row.position?scope.row.position:'--'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="年度(万元)">
        <el-table-column
          prop="y1l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.y1l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="y1h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.y1h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第一季度(万元)">
        <el-table-column
          prop="s1l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s1l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s1h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s1h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="一月(万元)">
        <el-table-column
          prop="m1l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m1l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m1h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m1h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="二月(万元)">
        <el-table-column
          prop="m2l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m2l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m2h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m2h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="三月(万元)">
        <el-table-column
          prop="m3l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m3l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m3h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m3h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第二季度(万元)">
        <el-table-column
          prop="s2l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s2l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s2h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s2h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="四月(万元)">
        <el-table-column
          prop="m4l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m4l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m4h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m4h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="五月(万元)">
        <el-table-column
          prop="m5l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m5l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m5h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m5h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="六月(万元)">
        <el-table-column
          prop="m6l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m6l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m6h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m6h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第三季度(万元)">
        <el-table-column
          prop="s3l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s3l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s3h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s3h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="七月(万元)">
        <el-table-column
          prop="m7l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m7l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m7h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m7h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="八月(万元)">
        <el-table-column
          prop="m8l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m8l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m8h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m8h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="九月(万元)">
        <el-table-column
          prop="m9l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m9l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m9h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m9h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第四季度(万元)">
        <el-table-column
          prop="s4l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s4l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="s4h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.s4h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="十月(万元)">
        <el-table-column
          prop="m10l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m10l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m10h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m10h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="十一月(万元)">
        <el-table-column
          prop="m11l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m11l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m11h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m11h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="十二月(万元)">
        <el-table-column
          prop="m12l"
          label="基本"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m12l}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="m12h"
          label="挑战"
          width="120">
          <template slot-scope="scope">
            <p class="center">{{scope.row.m12h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
export default {
  data () {
    return {
      tableData:[],
      year:String((new Date()).getFullYear()),
      condition:''
    }
  },
  watch: {
    year: {
      handler(val) {
        this.queryData()
      }
    }
  },
  methods:{
    async queryData () {
      const res = await this.$api.requested({
        "id": 20220904192002,
        "content": {
            "year": this.$route.query.year,
            "hrid":this.$route.query.id,
            "where":{
                "condition":""//支持部门名称查询
            }
        }
      })
      this.tableData = res.data
      console.log(this.tableData);
      
    }
  },
  mounted () {
    this.queryData()
  }
}

</script>
<style>
</style>
<style scoped>
.d-text{
  height: 46px;
  line-height: 46px;
}
.border{
  border:1px solid #c1bfbf;
  transform: scale(1,.2);
}
.center{
  text-align: center;
}
.red{
  color:red
}
.green{
  color:green
}
</style>