<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;" @change="changePasture">
        <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-select v-model="getdataListParm.parammaps.type" class="filter-item" style="width: 120px;" @change="changeType">
        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button style="position:absolute;right:10px" class="filter-item" type="success" icon="el-icon-upload2" @click="handleDownload">导出</el-button>
    </div>
    <div v-if="isTable1" class="table">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        class="elTable"
        :cell-style="tableCellStyle"
        @sort-change="tableSort"
      >
        <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="{row}">
            <a @click="tableCellClick(row)">{{ row.pastureName }}</a>
          </template>
        </el-table-column>
        <el-table-column v-if="isProvider" label="供应商" min-width="140px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.providerName }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="isPartClass" label="备件类别" min-width="140px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.partClass }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备件总数量" min-width="140px" align="center" sortable prop="psCount" />
        <el-table-column label="总金额" min-width="140px" align="center" sortable prop="psSum" />
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleDetailed(row)">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="isProvider" v-show="total>0" :total="total" :page.sync="getdataListParm.offset" :limit.sync="getdataListParm.pagecount" @pagination="getList" />
      <pagination v-if="isPartClass" v-show="total>0" :total="totalEquipmentType" :page.sync="getEquipmentParm.offset" :limit.sync="getEquipmentParm.pagecount" @pagination="getEquipmentTypeList" />
    </div>
    <div v-if="isTable2">
      <div style="line-height:50px;height:50px"><b @click="goAll()">所有牧场</b>&gt;<span>{{ table2.title }}</span></div>
      <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"
        class="elTable"
        @sort-change="tableSort2"
      >
        <el-table-column label="序号" align="center" type="index" width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + (table2.pageNum-1) * table2.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备件类别" min-width="140px" align="center" prop="psCount" />
        <el-table-column label="标准库存" min-width="140px" align="center" sortable prop="psCount" />
        <el-table-column label="备件总库存" min-width="140px" align="center" sortable prop="psSum" />
        <el-table-column label="标准库存差异" min-width="140px" align="center" sortable prop="psSum" />
        <el-table-column label="总金额" min-width="140px" align="center" sortable prop="psSum" />
        <el-table-column label="库存周转率" min-width="140px" align="center" sortable prop="psSum" />
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleDetailed2(row)">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import waves from '@/directive/waves' // waves directive
import { GetDataByNames, GetDataByName, GetAccount } from '@/api/common'
import Pagination from '@/components/Pagination'
import Cookies from 'js-cookie'
import { parseTime, json2excel, sortChange } from '@/utils/index.js'
import { } from '@/utils/index.js'
export default {
  name: 'InventorySummary',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      types: [{ id: 0, name: '按供应商' }, { id: 1, name: '按备件类别' }],
      findAllPasture: [],
      requestParams: [{ name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }}],
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      isProvider: true,
      getdataListParm: {
        name: 'getPrGbyprovider',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          pastureName: Cookies.get('pasturename'),
          type: 0
        }
      },
      isPartClass: false,
      totalEquipmentType: 0,
      getEquipmentParm: {
        name: 'getPrGbypartclass',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          pastureName: Cookies.get('pasturename')
        }
      },
      Type: 0,
      pastureName: Cookies.get('pasturename'),
      downLoadParm: {},
      downLoadList: [],
      isPercentage: false,
      percentage: 1,
      isTable1: true,
      isTable2: false,
      table2: {
        title: '',
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        getdataListParm: {
          name: 'getPrGbyprovider',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureName: Cookies.get('pasturename'),
            type: 0
          }
        }
      }
    }
  },

  created() {
    this.get_select_list()
    this.getList()
  },
  mounted() {

  },
  methods: {
    tableSort(column) {
      sortChange(column, this.list)
    },
    tableSort2(column) {
      sortChange(column, this.table2.list)
    },

    get_select_list() {
      GetDataByNames(this.requestParams).then(response => {
        this.findAllPasture = response.data.findAllPasture.list
      })
    },
    getList() {
      GetDataByName(this.getdataListParm).then(response => {
        if (response.data.list !== null) {
          console.log('table数据', response.data.list)
          this.list = response.data.list
        } else {
          this.list = []
        }
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    getEquipmentTypeList() {
      GetDataByName(this.getEquipmentParm).then(response => {
        console.log('table数据', response.data.list)
        this.list = response.data.list
        this.pageNumEquipmentType = response.data.pageNum
        this.pageSizeEquipmentType = response.data.pageSize
        if (response.data.total) {
          this.totalEquipmentType = response.data.total
        }
        console.log(response.data.total)
        console.log(this.totalEquipmentType)
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    changePasture(val) {
      this.pastureName = val
      if (this.Type == 0) {
        this.listLoading = true
        this.getdataListParm.parammaps.pastureName = this.pastureName
        this.getList()
        this.isProvider = true
        this.isPartClass = false
      } else {
        this.getEquipmentParm.parammaps.pastureName = this.pastureName
        this.listLoading = true
        this.isProvider = false
        this.isPartClass = true
        this.getEquipmentTypeList()
      }
    },
    changeType(val) {
      this.Type = val
      if (this.Type == 0) {
        this.listLoading = true
        this.getdataListParm.parammaps.pastureName = this.pastureName
        this.isProvider = true
        this.isPartClass = false
        this.getList()
      } else {
        this.listLoading = true
        this.isProvider = false
        this.isPartClass = true
        this.getEquipmentParm.parammaps.pastureName = this.pastureName
        this.getEquipmentTypeList()
      }
    },
    handleDetailed(row) {
      // this.$router.push('/customs/custom')
      this.$router.push({ path: '/customs/custom', query: { providerName: row.providerName }})
      this.getdataListParm.parammaps.providerName = row.providerName
    },
    handleDownload() {
      console.log('点击了导出')

      console.log(this.Type)
      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)
      if (this.Type == 0) {
        this.downLoadParm.name = 'getPrGbyprovider'
        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('导出table数据', this.downLoadList)
            const ExcelDatas = [
              {
                tHeader: ['牧场', '供应商', '备件总数量', '总金额'],
                filterVal: ['pastureName', 'providerName', 'psCount', 'psSum'],
                tableDatas: this.downLoadList,
                sheetName: '库存汇总'
              }
            ]
            json2excel(ExcelDatas, '库存汇总', true, 'xlsx')
          })
        })
      } else if (this.Type == 1) {
        this.downLoadParm.name = 'getPrGbypartclass'
        this.downLoadParm.parammaps = this.getEquipmentParm.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('导出table数据', this.downLoadList)
            const ExcelDatas = [
              {
                tHeader: ['牧场', '备件类别', '备件总数量', '总金额'],
                filterVal: ['pastureName', 'partClass', 'psCount', 'psSum'],
                tableDatas: this.downLoadList,
                sheetName: '库存汇总'
              }
            ]
            json2excel(ExcelDatas, '库存汇总', true, 'xlsx')
          })
        })
      }
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.pastureName !== '现代牧业' && columnIndex === 1) {
        return {
          textDecoration: 'underline'
        }
      }
      return {
        textDecoration: 'none'
      }
    },
    tableCellClick(row) {
      if (row.name !== '现代牧业') {
        // this.table2.getdataListParm.name = 'UkdoneRateEqclass'
        this.getList2()
        this.isTable1 = false
        this.isTable2 = true
        this.table2.title = row.pastureName + '库存汇总'
      } else {
        if (this.getdataListParm.parammaps.type == 0) {
          this.listLoading = true
          this.getdataListParm.parammaps.pastureName = this.pastureName
          this.isProvider = true
          this.isPartClass = false
          this.getList()
        } else {
          this.listLoading = true
          this.isProvider = false
          this.isPartClass = true
          this.getEquipmentParm.parammaps.pastureName = this.pastureName
          this.getEquipmentTypeList()
        }
        this.isTable1 = true
        this.isTable2 = false
      }
    },
    getList2() {
      GetDataByName(this.table2.getdataListParm).then(response => {
        if (response.data.list !== null) {
          console.log('table数据', response.data.list)
          this.table2.list = response.data.list
        } else {
          this.table2.list = []
        }
        this.table2.pageNum = response.data.pageNum
        this.table2.pageSize = response.data.pageSize
        this.table2.total = response.data.total
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    goAll() {
      if (this.getdataListParm.parammaps.type == 0) {
        this.listLoading = true
        this.getdataListParm.parammaps.pastureName = this.pastureName
        this.isProvider = true
        this.isPartClass = false
        this.getList()
      } else {
        this.listLoading = true
        this.isProvider = false
        this.isPartClass = true
        this.getEquipmentParm.parammaps.pastureName = this.pastureName
        this.getEquipmentTypeList()
      }
      this.isTable1 = true
      this.isTable2 = false
    },
    handleDetailed2(row) {
      // this.$router.push('/customs/custom')
      this.$router.push({ path: '/customs/custom', query: { providerName: row.providerName }})
      this.getdataListParm.parammaps.providerName = row.providerName
    }
  }
}
</script>
