<template>
  <div class="app-container">
    <div class="table1">
      <div class="search">
        <el-select v-model="table1.parammaps.status" filterable placeholder="使用状态" class="filter-item" style="width: 150px;" clearable>
          <el-option v-for="item in table1.usageStatusList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-input v-model="table1.parammaps.code" placeholder="脖环号" style="width: 180px;" class="filter-item" clearable />
        <el-date-picker v-model="table1.parammaps.purchasedate" class="filter-item" type="daterange" range-separator="至" start-placeholder="购入日期开始日期"  end-placeholder="购入日期结束日期"> </el-date-picker>
        <el-input v-model="table1.parammaps.cattle" placeholder="牛号" style="width: 180px;" class="filter-item" clearable />
        <el-input v-model="table1.parammaps.barname" placeholder="牛舍名称" style="width: 180px;" class="filter-item" clearable />
        <el-date-picker v-model="table1.parammaps.manufacturedate" class="filter-item" type="daterange" range-separator="至" start-placeholder="出场日期开始日期"  end-placeholder="出场日期结束日期"> </el-date-picker>
        <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="code" />
          <el-table-column label="使用状态" min-width="60px" align="center">
            <template slot-scope="{row}">
              <span v-if="row.status == '1'">已使用</span>
              <span v-else>未使用</span>
            </template>
          </el-table-column>
          <el-table-column label="牛号" min-width="60px" align="center" prop="cattle" />
          <el-table-column label="牛舍名称" min-width="60px" align="center" prop="barname" />
          <el-table-column label="购入日期" min-width="60px" align="center" prop="purchasedate" />
          <el-table-column label="出厂日期" min-width="60px" align="center" prop="manufacturedate" />
        </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 { parseTime } from '@/utils/index.js'
  import Cookies from 'js-cookie'
  export default {
    name: 'NeckRingList',
    components: { Pagination },
    data() {
      return {
        table1:{
          usageStatusList:[{id:1,name:'已使用'},{id:0,name:'未使用'}],
          offset: 1, pagecount: parseInt(Cookies.get('pageCount')),
          tableKey: 0, list: [], total: 0, listLoading: true,
          parammaps: { code:'',status:'',cattle:'',barname:'',purchasedate:'',manufacturedate:'' }
        },
        rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
        cellStyle: { padding: 0 + 'px' }
      }
    },

    created() {
      this.getList1()
    },
    methods: {
      getList1() {
        this.table1.listLoading = true
        let purchasestart = ''
        let purchaseend = ''
        let manufacturestart = ''
        let manufactureend = ''
        if(this.table1.parammaps.purchasedate !== '' && this.table1.parammaps.purchasedate !== null){
          purchasestart = parseTime(this.table1.parammaps.purchasedate[0],'{y}-{m}-{d}')
          purchaseend = parseTime(this.table1.parammaps.purchasedate[1],'{y}-{m}-{d}')
        }else{
          purchasestart = ''
          purchaseend = ''
        }
        if(this.table1.parammaps.manufacturedate  !== '' && this.table1.parammaps.manufacturedate  !== null){
          manufacturestart = parseTime(this.table1.parammaps.manufacturedate[0],'{y}-{m}-{d}')
          manufactureend = parseTime(this.table1.parammaps.manufacturedate[1],'{y}-{m}-{d}')
        }else{
          manufacturestart = ''
          manufactureend = ''
        }
        let status = ''
        if(this.table1.parammaps.status === '' || this.table1.parammaps.status === null){
          status = -1
        }else{
          status = this.table1.parammaps.status
        }
        let data = 'index=' + this.table1.offset
        + '&pagesize=' + this.table1.pagecount
        + '&code=' + this.table1.parammaps.code
        + '&status=' + status
        + '&cattle=' + this.table1.parammaps.cattle
        + '&barname=' + this.table1.parammaps.barname
        + '&purchasestart=' + purchasestart
        + '&purchaseend=' + purchaseend
        + '&manufacturestart='+ manufacturestart
        + '&manufactureend='+ manufactureend

        let url = 'ring/listing?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.table1.list = response.data.list
            this.table1.pageNum = this.table1.offset
            this.table1.pageSize = this.table1.pagecount
          } 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.status = ''
        this.table1.parammaps.code = ''
        this.table1.parammaps.purchasedate = ''
        this.table1.parammaps.cattle = ''
        this.table1.parammaps.barname = ''
        this.table1.parammaps.manufacturedate = ''
        this.getList1()
      }
    }
  }
</script>

<style scoped="">
  /deep/ .el-date-editor .el-range-separator{
    width: 6%;
  }
</style>
