<template>
  <div class="app-container">
    <div class="search">
      <el-select v-model="table.getdataListParm.parammaps.pastureid" placeholder="牧场" class="filter-item" style="width: 120px;" @change="changePasture">
        <el-option v-for="item in pastureList" :key="item.pastureid" :label="item.pasturename" :value="item.pastureid" />
      </el-select>
      <el-date-picker v-model="table.getdataListParm.parammaps.date" :clearable="false" type="date" placeholder="选择日期" style="width: 150px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeTab2Date" />
      <!-- <el-button class="el-icon-arrow-left elIconArrowLeft" @click="handleBefore" />
      <el-button class="el-icon-arrow-right elIconArrowRight" @click="handleNext" /> -->
    </div>
    <div class="table">
      <el-row :gutter="10">
        <!-- 宾州筛分析 -->
        <el-col :span="12">
          <h4 style="text-align:center;">宾州筛分析</h4>
          <el-table
            :key="table.tableKey"
            v-loading="table.listLoading"
            element-loading-text="给我一点时间"
            :data="table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="400px"
          >
            <el-table-column label="宾州筛" min-width="110px" align="center" prop="barname" />
            <el-table-column label="第一层重量" min-width="110px" align="center" prop="oneweight" />
            <el-table-column label="第一层百分比" min-width="110px" align="center" prop="onerate" />
            <el-table-column label="第二层重量" min-width="110px" align="center" prop="twoweight" />
            <el-table-column label="第二层百分比" min-width="110px" align="center" prop="tworate" />
            <el-table-column label="第三层重量" min-width="110px" align="center" prop="threeweight" />
            <el-table-column label="第三层百分比" min-width="110px" align="center" prop="threerate" />
            <el-table-column label="第四层重量" min-width="110px" align="center" prop="fourweight" />
            <el-table-column label="第四层百分比" min-width="110px" align="center" prop="fourrate" />
            <el-table-column label="参考标准" min-width="110px" align="center" prop="standard" />
          </el-table>
        </el-col>
        <!-- 粪便筛分析 -->
        <el-col :span="12">
          <h4 style="text-align:center;">粪便筛分析</h4>
          <el-table
            :key="table2.tableKey"
            v-loading="table2.listLoading"
            element-loading-text="给我一点时间"
            :data="table2.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="400px"
          >
            <el-table-column label="粪便筛" min-width="150px" align="center" prop="barname" />
            <el-table-column label="第一层重量" min-width="110px" align="center" prop="oneweight" />
            <el-table-column label="第一层百分比" min-width="110px" align="center" prop="onerate" />
            <el-table-column label="第二层重量" min-width="110px" align="center" prop="twoweight" />
            <el-table-column label="第二层百分比" min-width="110px" align="center" prop="tworate" />
            <el-table-column label="第三层重量" min-width="110px" align="center" prop="threeweight" />
            <el-table-column label="第三层百分比" min-width="110px" align="center" prop="threerate" />
            <el-table-column label="参考标准" min-width="110px" align="center" prop="standard" />
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <!-- BCS评分 -->
        <el-col :span="12">
          <h4 style="text-align:center;">BCS评分</h4>
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="400px"
          >
            <el-table-column label="栏舍" min-width="110px" align="center" prop="barname" />
            <el-table-column label="抽查样本数" min-width="110px" align="center" prop="sumcowcount" />
            <el-table-column label="单产" min-width="110px" align="center" prop="product" />
            <el-table-column label="干物质采食量" min-width="110px" align="center" prop="dryweight" />
            <el-table-column label="泌乳天数" min-width="110px" align="center" prop="avgdim" />
            <el-table-column label="标准分数" min-width="110px" align="center" prop="standardscore" />
            <el-table-column label="2.75-分（数量、百分比）" min-width="110px" align="center" prop="score25" />
            <el-table-column label="2.75分（数量、百分比" min-width="110px" align="center" prop="score275" />
            <el-table-column label="3分（数量、百分比）" min-width="110px" align="center" prop="score3" />
            <el-table-column label="3.25分（数量、百分比）" min-width="110px" align="center" prop="score325" />
            <el-table-column label="3.5分（数量、百分比）" min-width="110px" align="center" prop="score35" />
            <el-table-column label="3.75分（数量、百分比）" min-width="110px" align="center" prop="score375" />
            <el-table-column label="4+分（数量、百分比）" min-width="110px" align="center" prop="score4" />
          </el-table>
        </el-col>
        <!-- 粪便评分 -->
        <el-col :span="12">
          <h4 style="text-align:center;">粪便评分</h4>
          <el-table
            :key="table4.tableKey"
            v-loading="table4.listLoading"
            element-loading-text="给我一点时间"
            :data="table4.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            height="400px"
          >
            <el-table-column label="栏舍" min-width="110px" align="center" prop="barname" />
            <el-table-column label="抽查样本数" min-width="110px" align="center" prop="sumcowcount" />
            <el-table-column label="单产" min-width="110px" align="center" prop="product" />
            <el-table-column label="干物质采食量" min-width="110px" align="center" prop="dryweight" />
            <el-table-column label="泌乳天数" min-width="110px" align="center" prop="avgdim" />
            <el-table-column label="标准分数" min-width="110px" align="center" prop="standardscore" />
            <el-table-column label="1分（数量、百分比）" min-width="110px" align="center" prop="score1" />
            <el-table-column label="2分（数量、百分比）" min-width="110px" align="center" prop="score2" />
            <el-table-column label="3分（数量、百分比）" min-width="110px" align="center" prop="score3" />
            <el-table-column label="4分（数量、百分比）" min-width="110px" align="center" prop="score4" />
            <el-table-column label="5分（数量、百分比）" min-width="110px" align="center" prop="score5" />
          </el-table>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import { GetDataByName, GetReportform, GetDataByNames } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
import { json2excel } from '@/utils/index.js'
import { MessageBox } from 'element-ui'
export default {
  name: 'GroupFeedingEfficiency',
  components: { Pagination },
  data() {
    return {
      requestParams: [
        { name: 'getPastureListJT', offset: 0, pagecount: 0, parammaps: { pastureid: Cookies.get('pastureid'), pasturename: '' }}
      ],
      pastureList: [], // 牧场
      frequencyList: [],
      table: {
        getdataListParm: {
          name: 'getAssessCowPenn',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: '',
            date: parseTime(new Date(), '{y}-{m}-{d}')
          }
        },
        tableKey: 1,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },
      table2: {
        getdataListParm: {
          name: 'getAssessCowDung',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: '',
            date: ''
          }
        },
        tableKey: 1,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },
      table3: {
        getdataListParm: {
          name: 'getAssessBodyscore',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: '',
            date: ''
          }
        },
        tableKey: 1,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },
      table4: {
        getdataListParm: {
          name: 'getAssessDungscore',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: '',
            date: ''
          }
        },
        tableKey: 1,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    const start2 = new Date()
    start2.setTime(start2.getTime() - 3600 * 1000 * 24 * 1)
    this.table.getdataListParm.parammaps.date = parseTime(start2, '{y}-{m}-{d}')
    this.getDownList()
  },
  mounted() {},
  activated() {
    const start2 = new Date()
    start2.setTime(start2.getTime() - 3600 * 1000 * 24 * 1)
    this.table.getdataListParm.parammaps.date = parseTime(start2, '{y}-{m}-{d}')
    this.getDownList()
  },
  methods: {
    getDownList() {
      GetDataByNames(this.requestParams).then(response => {
        this.pastureList = response.data.getPastureListJT.list
        this.table.getdataListParm.parammaps.pastureid = response.data.getPastureListJT.list[0].pastureid
        this.table2.getdataListParm.parammaps.pastureid = response.data.getPastureListJT.list[0].pastureid
        this.table3.getdataListParm.parammaps.pastureid = response.data.getPastureListJT.list[0].pastureid
        this.table4.getdataListParm.parammaps.pastureid = response.data.getPastureListJT.list[0].pastureid
        this.table2.getdataListParm.parammaps.pastureid = this.table.getdataListParm.parammaps.pastureid
        this.table3.getdataListParm.parammaps.pastureid = this.table.getdataListParm.parammaps.pastureid
        this.table4.getdataListParm.parammaps.pastureid = this.table.getdataListParm.parammaps.pastureid
        this.getTab2List()
        this.getTab2List2()
        this.getTab2List3()
        this.getTab2List4()
      })
    },
    handleBefore() {
      if (this.table.getdataListParm.parammaps.date !== '' && this.table.getdataListParm.parammaps.date !== null) {
        this.table.getdataListParm.parammaps.date = new Date(this.table.getdataListParm.parammaps.date)
        var start = new Date(this.table.getdataListParm.parammaps.date.setDate(this.table.getdataListParm.parammaps.date.getDate() - 1))
        // var start = this.table.getdataListParm.parammaps.mydate - 1
        this.table.getdataListParm.parammaps.date = parseTime(start, '{y}-{m}-{d}')
        this.getTab2List()
        this.getTab2List2()
        this.getTab2List3()
        this.getTab2List4()
      }
    },
    handleNext() {
      if (this.table.getdataListParm.parammaps.date !== '' && this.table.getdataListParm.parammaps.date !== null) {
        this.table.getdataListParm.parammaps.date = new Date(this.table.getdataListParm.parammaps.date)
        var stop = new Date(this.table.getdataListParm.parammaps.date.setDate(this.table.getdataListParm.parammaps.date.getDate() + 1))
        this.table.getdataListParm.parammaps.date = parseTime(stop, '{y}-{m}-{d}')
        this.getTab2List()
        this.getTab2List2()
        this.getTab2List3()
        this.getTab2List4()
      }
    },
    // 切换tab2日期
    changeTab2Date() {
      this.getTab2List()
      this.getTab2List2()
      this.getTab2List3()
      this.getTab2List4()
    },
    changePasture(item) {
      console.log(item)
      this.table.getdataListParm.parammaps.pastureid = this.table.getdataListParm.parammaps.pastureid
      this.table2.getdataListParm.parammaps.pastureid = this.table.getdataListParm.parammaps.pastureid
      this.table3.getdataListParm.parammaps.pastureid = this.table.getdataListParm.parammaps.pastureid
      this.table4.getdataListParm.parammaps.pastureid = this.table.getdataListParm.parammaps.pastureid
      this.getTab2List()
      this.getTab2List2()
      this.getTab2List3()
      this.getTab2List4()
    },
    // 宾州筛分析
    getTab2List() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('宾州筛分析table数据', response.data.list)
        if (response.data.list !== null) {
          this.table.list = response.data.list
          this.table.total = response.data.total
        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },

    // 粪便筛分析
    getTab2List2() {
      this.table2.listLoading = true
      this.table2.getdataListParm.parammaps.date = this.table.getdataListParm.parammaps.date
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('粪便筛分析table数据', response.data.list)
        if (response.data.list !== null) {
          this.table2.list = response.data.list
          this.table2.total = response.data.total
        } else {
          this.table2.list = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },

    // BCS评分
    getTab2List3() {
      this.table3.listLoading = true
      this.table3.getdataListParm.parammaps.date = this.table.getdataListParm.parammaps.date
      GetDataByName(this.table3.getdataListParm).then(response => {
        console.log('BCS评分table数据', response.data.list)
        if (response.data.list !== null) {
          this.table3.list = response.data.list
          this.table3.total = response.data.total
        } else {
          this.table3.list = []
        }
        setTimeout(() => {
          this.table3.listLoading = false
        }, 100)
      })
    },

    // 粪便评分
    getTab2List4() {
      this.table4.listLoading = true
      this.table4.getdataListParm.parammaps.date = this.table.getdataListParm.parammaps.date
      GetDataByName(this.table4.getdataListParm).then(response => {
        console.log('成本分析table数据', response.data.list)
        if (response.data.list !== null) {
          this.table4.list = response.data.list
          this.table4.total = response.data.total
        } else {
          this.table4.list = []
        }
        setTimeout(() => {
          this.table4.listLoading = false
        }, 100)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .search{margin-bottom:10px;}
</style>