<template>
  <div class="app-container">
    <div v-if="isPercentage" class="percentage" style="width: 210px;height: 90px;background: #fff;position: fixed;bottom: 0;left: 0;z-index: 9999999999999;">
      <h4 style="padding-left: 10px;line-height: 0;">导出进度：</h4>
      <el-progress style="padding-left: 10px;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
    </div>
    <div class="filter-container">
      <el-select v-model="getdataListParm.parammaps.pastureName" placeholder="牧场" class="filter-item" style="width: 120px;">
        <el-option
          v-for="item in findAllPasture"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-select v-model="getdataListParm.parammaps.laidType" clearable placeholder="业务类型" class="filter-item" style="width: 120px;">
        <el-option
          v-for="item in laidTypes"
          :key="item.id"

          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-input v-model="getdataListParm.parammaps.partCode" placeholder="备件编号" style="width: 160px;" class="filter-item" />
      <el-input v-model="getdataListParm.parammaps.partName" placeholder="备件名称" style="width: 160px;" class="filter-item" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_search">搜索</el-button>
      <el-button class="filter-item" type="success" icon="el-icon-upload2" @click="handleDownload">导出</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      class="elTable"
      @sort-change="tableSort"
      :max-height="myHeight"
    >
      <el-table-column label="序号" align="center" type="index" width="50px">
        <template slot-scope="scope">
          <span>{{ scope.$index + (pageNum-1) * pageSize + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="牧场" min-width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.pastureName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备件编号" min-width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.partCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备件名称" min-width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.partName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格型号" min-width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.specification }}</span>
        </template>
      </el-table-column>
      <el-table-column label="品牌" min-width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.brand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计量单位" min-width="90px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.unit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价" min-width="90px" align="center" sortable prop="price" />
      <el-table-column label="业务日期" sortable prop="createTime" min-width="100px" align="center" />
      <el-table-column label="业务类型" min-width="90px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.laidType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.laidCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="期初数量" min-width="90px" align="center" sortable prop="startNum" />
      <el-table-column label="期初金额" min-width="90px" align="center" sortable prop="startSum" />
      <el-table-column label="业务数量" min-width="90px" align="center" sortable prop="laidNum" />
      <el-table-column label="业务金额" min-width="90px" align="center" sortable prop="laidSum" />
      <el-table-column label="期末数量" min-width="90px" align="center" sortable prop="endNum" />
      <el-table-column label="期末金额" min-width="90px" align="center" sortable prop="endSum" />
      <el-table-column label="库位" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.location }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="getdataListParm.offset"
      :limit.sync="getdataListParm.pagecount"
      @pagination="get_table_data"
    />
  </div>

</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { GetDataByName, GetDataByNames, GetAccount } from '@/api/common'
import { parseTime, json2excel, sortChange } from '@/utils/index.js'

import Cookies from 'js-cookie'
export default {
  name: 'SparePartReceive',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      findAllPasture: [],
      requestParams: [{ name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }}],
      laidTypes: [{ id: 0, name: '入库' }, { id: 1, name: '出库' }, { id: 2, name: '退库' }, { id: 3, name: '退货' }],
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      getdataListParm: {
        name: 'getPartInOutList',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          pastureName: Cookies.get('pasturename'),
          partCode: '',
          partName: '',
          laidType: '入库'
        }
      },
      downLoadParm: {},
      downLoadList: [],
      isPercentage: false,
      percentage: 1,
      myHeight:document.documentElement.clientHeight - 85- 150
    }
  },

  created() {
    this.get_select_list()
    this.get_table_data()
  },

  methods: {
    tableSort(column) {
      sortChange(column, this.list)
    },
    get_select_list() {
      GetDataByNames(this.requestParams).then(response => {
        this.findAllPasture = response.data.findAllPasture.list
      })
    },
    get_table_data() {
      GetDataByName(this.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        this.list = response.data.list
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    form_search() {
      this.listLoading = true
      this.getdataListParm.offset = 1
      this.get_table_data()
    },
    handleDownload() {
      this.$alert('备件收发明细正在导出中，请勿刷新或离开本页面，若导出时间过长，建议缩小导出数据范围重新导出', {})
      this.isPercentage = true
      this.percentage = 1
      var timer = setInterval(() => {
        this.percentage += 5
        if (this.percentage > 95) {
          this.percentage = 99
          clearInterval(timer)
        }
        this.percentage = this.percentage
      }, 1000)
      this.downLoadParm.name = 'getPartInOutList'
      this.downLoadParm.returntype = 'Map'
      this.downLoadParm.parammaps = this.getdataListParm.parammaps
      GetAccount(this.downLoadParm).then(response => {
        if (response.data.list !== '') {
          this.percentage = 99
          setTimeout(() => {
            this.isPercentage = false
          }, 2000)
        }
        this.$nextTick(() => {
          this.downLoadList = response.data.list
          console.log(this.downLoadList)
          const ExcelDatas = [
            {
              tHeader: ['牧场', '备件编号', '备件名称', '规格型号', '品牌', '计量单位', '单价', '业务日期', '业务类型', '订单编号', '期初数量', '期初金额', '业务数量', '业务金额', '期末数量', '期末金额', '库位'],
              filterVal: ['pastureName', 'partCode', 'partName', 'specification', 'brand', 'unit', 'price', 'createTime', 'laidType', 'laidCode', 'startNum', 'startSum', 'laidNum', 'laidSum', 'endNum', 'endSum', 'location'],
              tableDatas: this.downLoadList,
              sheetName: '备件收发明细'
            }
          ]
          json2excel(ExcelDatas, '备件收发明细', true, 'xlsx')
        })
      })
    }
  }
}
</script>
