<template>
  <div class="app-container">
    <div class="table1">
      <div class="search">
        <el-select v-model="table1.parammaps.pastureid" filterable placeholder="全部牧场" class="filter-item" style="width: 150px;" clearable>
          <el-option v-for="item in table1.pastureList" :key="item.pastureid" :label="item.pasturename" :value="item.pastureid" />
        </el-select>
        <el-date-picker v-model="table1.parammaps.inputDatetime" type="daterange"  class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        <el-button class="successBorder" @click="handleSearch1">查询</el-button>
        <el-button class="successBorder" @click="handleRefresh1">重置</el-button>
      </div>
      <div class="table">
        <el-table
          :key="table1.tableKey"
          v-loading="table1.listLoading"
          element-loading-text="给我一点时间"
          :data="table1.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable table-fixed"
        >
          <el-table-column label="序号" align="center" type="index" width="50px">
            <template slot-scope="scope">
              <span v-if="table1.pageNum">{{ scope.$index + (table1.pageNum-1) * table1.pageSize + 1 }}</span>
              <span v-else>1</span>
            </template>
          </el-table-column>
          <el-table-column label="牧场" min-width="60px" align="center" prop="牧场" />
          <el-table-column label="购买数" min-width="60px" align="center" prop="购买数" />
          <el-table-column label="佩戴数" min-width="60px" align="center" prop="佩戴数" />
          <el-table-column label="摘除数" min-width="60px" align="center" prop="摘除数" />
          <el-table-column label="未使用数" min-width="60px" align="center" prop="未使用数" />
          <el-table-column label="召回数" min-width="60px" align="center" prop="召回数" />
        </el-table>
        <pagination v-show="table1.total>0" :total="table1.total" :page.sync="table1.offset" :limit.sync="table1.pagecount" @pagination="getList1" />
      </div>
    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { postJson,getJson  } from '@/api/common'
  import Cookies from 'js-cookie'
  import axios from 'axios'
  import { getToken } from '@/utils/auth'
  import xlsx from 'xlsx'
  import { upload,parseTime } from '@/utils/index.js'
  export default {
    name: 'Use',
    components: { Pagination },
    data() {
      return {
        table1:{
          pastureList:[],
          page: 1, offset: 1, pagecount: parseInt(Cookies.get('pageCount')),
          parammaps: { pastureid:'',inputDatetime:'',startdate:'',enddate:'' },
          tableKey: 0, list: [], total: 0, listLoading: false
        },

        isokDisable:false,
        textMap: {
          quantityTxt: '售卖数量'
        },
        rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
        cellStyle: { padding: 0 + 'px' }
      }
    },

    created() {
      this.getList1()
      this.getPastureList()
    },
    methods: {
      getPastureList(){
        let data = 'index=' + 1
        + '&pagesize=' + ''
        let url = 'public/pasture?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.table1.pastureList = response.data.list
          } else {
            this.table1.pastureList = []
          }
        })
      },
      getList1() {
        this.table1.listLoading = true
        let startdate = ''
        let enddate = ''
        if(this.table1.parammaps.inputDatetime !== '' && this.table1.parammaps.inputDatetime !== null){
          startdate = parseTime(this.table1.parammaps.inputDatetime[0],'{y}-{m}-{d}')
          enddate = parseTime(this.table1.parammaps.inputDatetime[1],'{y}-{m}-{d}')
        }else{
          startdate = ''
          enddate = ''
        }
        let data = {
          name:'getUseTj',
          page: this.table1.page, offset: this.table1.offset, pagecount: this.table1.pagecount, returntype: 'Map',
          parammaps: this.table1.parammaps
        }
        let url = 'authdata/GetDataByName'
         postJson(url,data).then(response => {
          if (response.data.list !== null) {
            console.log('table数据', response.data.list)
            this.table1.list = response.data.list
            this.table1.pageNum = response.data.pageNum
            this.table1.pageSize = response.data.pageSize
          } else {
            this.table1.list = []
          }
          this.table1.total = response.data.total
          setTimeout(() => {
            this.table1.listLoading = false
          }, 100)
        })
      },
      handleSearch1(){
        this.table1.offset = 1
        this.getList1()
      },
      handleRefresh1(){
        this.table1.offset = 1
        this.table1.parammaps = { pastureid:'',inputDatetime:'',startdate:'',enddate:'' }
        this.getList1()
      },
    }
  }
</script>

<style>
</style>
