<template>
  <div class="normal-panel">
    <div class="flex-align-center" style="margin-bottom:10px">
<!--      <el-date-picker
          class="inline-16"
          :clearable=false
          v-model="year"
          type="year"
          size="small"
          placeholder="选择年"
          value-format="yyyy"
          @change="queryData">
      </el-date-picker>-->
      <slot name="addTarget" :data="year"/>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        height="calc(100vh - 182px)"
        size="small">
      <el-table-column label="年度">

        <template slot-scope="scope">
          <p class="center d-text">{{scope.row.year}}</p>
        </template>

      </el-table-column>
      <el-table-column label="领域">

        <template slot-scope="scope">
          <p class="center d-text">{{scope.row.tradefield}}</p>
        </template>

      </el-table-column>
      <el-table-column label="年度(万元)">
        <el-table-column
            prop="y1l"
            label="基本"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.y1l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="y1h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.s1l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="s1h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m1l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m1h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m2l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m2h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m3l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m3h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.s2l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="s2h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m4l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m4h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m5l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m5h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m6l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m6h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.s3l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="s3h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m7l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m7h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m8l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m8h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m9l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m9h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.s4l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="s4h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m10l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m10h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m11l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m11h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{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 d-text">{{scope.row.m12l}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="m12h"
            label="挑战"
            width="120">
          <template slot-scope="scope">
            <p class="center d-text">{{scope.row.m12h}}</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template slot-scope="scope">
          <slot name="edit" :data="scope.row"></slot>
          <slot name="delete" :data="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div  class="container normal-panel" style="text-align:right">
      <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      tableData:[],
      currentPage:0,
      total:0,
      year:String((new Date()).getFullYear()),
      param:{
        "id": 20221209150102,
        "content": {
            "nocache":true,
            "sys_enterpriseid": 0,//企业id
            "sa_contractid":1,
            "where": {
                // "year": 2022
            }
        },
      }
    }
  },
  methods:{
    inputChange (val) {
      val == '' && this.queryData()
    },
    async queryData () {
      /*this.param.content.where.year = this.year*/
      this.param.content.sa_contractid = this.$route.query.id
      this.param.content.sys_enterpriseid = this.data.sys_enterpriseid
      /*this.param.content.where.condition = this.condition*/
      const res = await this.$api.requested(this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      console.log(this.tableData);
      
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.queryData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.queryData()
    },
  },
  mounted () {
    this.queryData()
  }
}

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