<template>
  <div class="app-container">
    <div class="search">
      <el-select v-model="table.getdataListParm.parammaps.pastureid" placeholder="牧场" class="filter-item" style="width: 120px;float: left;">
        <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.inputDatetime" :clearable="false" style="float: left;margin-right: 10px;margin-bottom:10px;width: 250px;" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
      <el-input v-model="table.getdataListParm.parammaps.tmrtname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="TMR名称" class="filter-item" clearable />
      <el-input v-model="table.getdataListParm.parammaps.projname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="车次" class="filter-item" clearable />
      <el-select v-model="table.getdataListParm.parammaps.times" style="float: left;margin-right: 10px;margin-bottom:10px;width: 150px;" filterable placeholder="班次" class="filter-item" clearable>
        <el-option v-for="item in frequencyList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="table.getdataListParm.parammaps.templetname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="配方名称" class="filter-item" clearable />
      <el-select v-model="table.getdataListParm.parammaps.buttontype" style="float: left;margin-right: 10px;margin-bottom:10px;" filterable placeholder="跳转方式" class="filter-item" clearable>
        <el-option v-for="item in jumpModeList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="successBorder" style="float: left;margin-right: 10px;margin-bottom:10px;" @click="handleSearch">查询</el-button>
      <el-button class="successBorder" style="float: left;margin-right: 10px;margin-bottom:10px;" @click="handleRefresh">重置</el-button>
      <el-button class="export" style="float: right;margin-right: 10px;margin-bottom:10px;" @click="handleExport">导出</el-button>
    </div>

    <div class="table">
      <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"
      >
        <el-table-column label="牧场" min-width="110px" align="center" prop="牧场" />
        <el-table-column label="日期" min-width="110px" align="center" prop="日期" />
        <el-table-column label="TMR名称" min-width="110px" align="center" prop="TMR名称" />
        <el-table-column label="车次" min-width="110px" align="center" prop="车次" />
        <el-table-column label="班次" min-width="110px" align="center" prop="班次" />
        <el-table-column label="配方名称" min-width="110px" align="center" prop="配方名称" />
        <el-table-column label="饲料" min-width="110px" align="center" prop="饲料" />
        <el-table-column label="理论重量" min-width="110px" align="center" prop="理论重量" />
        <el-table-column label="实际重量" min-width="110px" align="center" prop="实际重量" />
        <el-table-column label="误差值" min-width="110px" align="center" prop="误差值" />
        <el-table-column label="准确率" min-width="110px" align="center" prop="准确率" />
        <el-table-column label="计划时间" min-width="110px" align="center" prop="计划时间" />
        <el-table-column label="开始时间" min-width="110px" align="center" prop="开始时间" />
        <el-table-column label="结束时间" min-width="110px" align="center" prop="结束时间" />
        <el-table-column label="跳转方式" min-width="110px" align="center" prop="跳转方式" />
        <el-table-column label="开始重量" min-width="110px" align="center" prop="开始重量" />
        <el-table-column label="结束重量" min-width="110px" align="center" prop="结束重量" />
      </el-table>
    </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: 'Tab2',
  components: { Pagination },
  data() {
    return {
      pickerMinDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        // 限制不能选择今天之后的日期
        disabledDate: (time) => {
          if (this.pickerMinDate !== '') {
            const one = 31 * 24 * 3600 * 1000
            const minTime = this.pickerMinDate - one
            let maxTime = this.pickerMinDate + one
            if (maxTime > new Date()) {
              maxTime = new Date()
            }
            return time.getTime() < minTime || time.getTime() > maxTime
          }
          return time.getTime() > Date.now()
        }
      },
      requestParams: [
        { name: 'getPastureListJT', offset: 0, pagecount: 0, parammaps: { pastureid: Cookies.get('pastureid'), pasturename: '' }}
      ],
      pastureList: [], // 牧场
      // 班次
      maxTime: {
        getMaxTimesParm: {
          name: 'getSysoptEnable',
          page: 1,
          offset: 1,
          pagecount: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            inforname: 'times'
          }
        }
      },
      frequencyList: [],
      jumpModeList: [{ id: '0', name: '手动跳转' }, { id: '1', name: '自动跳转' }],
      table: {
        getdataListParm: {
          name: 'getStatisticsHL',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            startTime: parseTime(new Date(), '{y}-{m}-{d}'),
            stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
            inputDatetime: [new Date(), new Date()],
            tmrtname: '',
            projname: '',
            times: '',
            buttontype: '',
            templetname: ''
          }
        },
        tableKey: 1,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },

      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getDownList()
    this.getIsDisplay()
  },
  activated() {
    this.getDownList()
    this.getIsDisplay()
  },
  methods: {
    getIsDisplay() {
      GetDataByName(this.maxTime.getMaxTimesParm).then(response => {
        if (response.data.list[0].inforvalue == 1) {
          this.frequencyList = [{ id: '1', name: '第一班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }]
        } else if (response.data.list[0].inforvalue == 2) {
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }]
        } else if (response.data.list[0].inforvalue == 3) {
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }]
        } else if (response.data.list[0].inforvalue == 4) {
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }, { id: '4', name: '第四班' }]
          this.frequencyList = [{ id: '1', name: '第一班' }, { id: '2', name: '第二班' }, { id: '3', name: '第三班' }, { id: '4', name: '第四班' }]
        }
      })
    },
    getDownList() {
      GetDataByNames(this.requestParams).then(response => {
        this.pastureList = response.data.getPastureListJT.list
        this.table.getdataListParm.parammaps.pastureid = response.data.getPastureListJT.list[0].pastureid
        this.getList()
      })
    },
    getList() {
      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)
      })
    },
    handleSearch() {
      this.table.getdataListParm.name = 'getStatisticsHL'
      if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
        console.log(this.table.getdataListParm.parammaps.inputDatetime)
        this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
        this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      } else {
        this.table.getdataListParm.parammaps.inputDatetime = ''
        this.table.getdataListParm.parammaps.startTime = ''
        this.table.getdataListParm.parammaps.stopTime = ''
      }
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    handleRefresh() {
      this.table.getdataListParm.parammaps.tmrtname = ''
      this.table.getdataListParm.parammaps.projname = ''
      this.table.getdataListParm.parammaps.times = ''
      this.table.getdataListParm.parammaps.templetname = ''
      this.table.getdataListParm.parammaps.buttontype = ''
      this.getList()
    },
    handleExport() {
      var excelDatasTab2 = [
        {
          tHeader: ['日期', 'TMR名称', '车次', '班次', '配方名称', '饲料', '理论重量', '实际重量', '误差值', '准确率', '计划时间', '开始时间', '结束时间', ' 跳转方式', '开始重量', '结束重量'],
          filterVal: ['日期', 'TMR名称', '车次', '班次', '配方名称', '饲料', '理论重量', '实际重量', '误差值', '准确率', '计划时间', '开始时间', '结束时间', '跳转方式', '开始重量', '结束重量'],
          tableDatas: this.table.list,
          sheetName: '混料统计'
        }
      ]
      json2excel(excelDatasTab2, '混料统计', true, 'xlsx')
    }
  }
}
</script>

<style>
</style>