<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" style="width: 140px;" placeholder="牧场" class="filter-item">
        <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-date-picker v-model="getdataListParm.parammaps.Year" type="year" placeholder="选择年" format="yyyy" value-format="yyyy" style="top:-3px;" :clearable="false" />
      <!-- <el-date-picker v-model="getdataListParm.parammaps.Month" type="month" placeholder="选择月" format="MM" value-format="MM" style="top:-3px;" /> -->
      <el-select v-model="getdataListParm.parammaps.Month" style="width: 140px;" placeholder="选择月" class="filter-item" clearable>
        <el-option v-for="item in monthList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_search">搜索</el-button>
      <el-button class="filter-item" style="position:absolute;right:10px" type="success" icon="el-icon-edit" @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 table-fixed"
    >
      <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="牧场" align="center" min-width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.pastureName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备件编号" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.partCode }}</span><br>
        </template>
      </el-table-column>
      <el-table-column label="备件名称" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.partName }}</span><br>
        </template>
      </el-table-column>
      <el-table-column label="备件规格" align="center" min-width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.specification }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备件品牌" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.brand }}</span><br>
        </template>
      </el-table-column>
      <el-table-column label="供应商" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.providerName }}</span><br>
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" min-width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已消耗数量" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.consumes }}</span><br>
        </template>
      </el-table-column>
      <el-table-column label="已消耗总价" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sumPrice }}</span><br>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="form_see(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>=0" :total="total" :page.sync="getdataListParm.offset" :limit.sync="getdataListParm.pagecount" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="90%">
      <div class="app-see">
        <div class="filter-container">
          <el-date-picker v-model="getdataListParmSee.parammaps.Year" type="year" placeholder="选择年" format="yyyy" value-format="yyyy" style="top:-3px;" :clearable="false" />
          <!-- <el-date-picker v-model="getdataListParmSee.parammaps.Month" type="month" placeholder="选择月" format="MM" value-format="MM" style="top:-3px;" /> -->
          <el-select v-model="getdataListParmSee.parammaps.Month" style="width: 140px;" placeholder="选择月" class="filter-item" clearable>
            <el-option v-for="item in monthList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-select v-model="getdataListParmSee.parammaps.departmentId" clearable placeholder="领用部门" class="filter-item" style="width: 120px;">
            <el-option v-for="item in findAllDepart" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-select v-model="getdataListParmSee.parammaps.useTypeV" clearable placeholder="费用类型" class="filter-item" style="width: 120px;">
            <el-option v-for="item in costTypeList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="form_searchSee">搜索</el-button>
        </div>
        <el-table
          :key="tableKeySee"
          v-loading="listLoadingSee"
          element-loading-text="给我一点时间"
          :data="listSee"
          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>{{ scope.$index + (pageNumSee - 1) * pageSizeSee + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出库日期" align="center" min-width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.receiveTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="领用部门" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.departmentName }}</span><br>
            </template>
          </el-table-column>
          <el-table-column label="领用人" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.empname }}</span><br>
            </template>
          </el-table-column>
          <el-table-column label="关联设备名称" align="center" min-width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.eqName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="关联设备编号" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.eqCode }}</span><br>
            </template>
          </el-table-column>
          <el-table-column label="费用类型" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.useTypeV }}</span><br>
            </template>
          </el-table-column>
          <el-table-column label="出库数量" align="center" min-width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.checkoutNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出库总价" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.sumPrice }}</span><br>
            </template>
          </el-table-column>
          <el-table-column label="用途" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.note }}</span><br>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="totalSee>=0" :total="totalSee" :page.sync="getdataListParmSee.offset" :limit.sync="getdataListParmSee.pagecount" @pagination="getListSee" />
      </div>
      <div slot="footer" class="dialog-footer" style="bottom:10px">
        <el-button @click="dialogFormVisible = false;getList()">取消并关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 引入
import { GetDataByName, GetDataByNames, GetAccount } from '@/api/common'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index.js'
import waves from '@/directive/waves' // waves directive
import Cookies from 'js-cookie'
import { json2excel } from '@/utils/index.js'
export default {
  name: 'Consume',
  components: { Pagination },
  directives: { waves },
  filters: {
    keepTwoNum(value) {
      value = Number(value)
      return value.toFixed(2)
    }
  },
  data() {
    return {
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      rules: {},
      costTypeList: [{ id: '0', name: '维修' }, { id: '1', name: '保养' }],
      monthList: [{ id: '01', name: ' 1月 ' }, { id: '02', name: ' 2 月' }, { id: '03', name: ' 3 月' }, { id: '04', name: ' 4 月' }, { id: '05', name: ' 5 月' }, { id: '06', name: ' 6 月' }, { id: '07', name: ' 7 月' }, { id: '08', name: ' 8 月' }, { id: '09', name: ' 9 月' }, { id: '10', name: ' 1 0' }, { id: '11', name: '1 1 月' }, { id: '12', name: '12月' }],
      findAllPasture: [],
      findAllDepart: [],
      requestParams: [
        { name: 'findAllDepart', offset: 0, pagecount: 0, params: [this.$store.state.user.pastureid] },
        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }}
      ],
      getdataListParm: {
        name: 'getPartConsume',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          Year: parseTime(new Date(), '{y}'),
          Month: parseTime(new Date(), '{m}'),
          month: '',
          pastureName: Cookies.get('pasturename')
        }
      },
      listLoading: false,
      total: 0,
      tableKey: 0,
      list: [],
      downLoadParm: {},
      downLoadList: [],
      isPercentage: false,
      percentage: 1,

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        see: '查看'
      },
      getdataListParmSee: {
        name: 'getPartConsumedetail',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          Month: '',
          Year: parseTime(new Date(), '{y}'),
          month: '',
          departmentId: '',
          useTypeV: ''
        }
      },
      listLoadingSee: false,
      totalSee: 0,
      tableKeySee: 0,
      listSee: []
    }
  },
  created() {
    this.get_select_list()
    this.getList()
  },
  methods: {
    get_select_list() {
      GetDataByNames(this.requestParams).then(response => {
        this.findAllPasture = response.data.findAllPasture.list
        this.findAllDepart = response.data.findAllDepart.list
      })
    },
    getList() {
      this.listLoading = true
      if (this.getdataListParm.parammaps.Month == '' || this.getdataListParm.parammaps.Month == null) {
        this.getdataListParm.parammaps.month = this.getdataListParm.parammaps.Year
      } else {
        this.getdataListParm.parammaps.month = this.getdataListParm.parammaps.Year + '-' + this.getdataListParm.parammaps.Month
      }
      GetDataByName(this.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.list = response.data.list
          this.pageNum = response.data.pageNum
          this.pageSize = response.data.pageSize
          this.total = response.data.total
        } else {
          this.list = []
        }
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    form_search() {
      console.log('点击了table搜索')
      this.getdataListParm.offset = 1
      this.getList()
    },

    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 = 'getPartConsume'
      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', 'providerName', 'price', 'consumes', 'sumPrice'],
              tableDatas: this.downLoadList,
              sheetName: '备件消耗统计'
            }
          ]
          json2excel(ExcelDatas, '备件消耗统计', true, 'xlsx')
        })
      })
    },
    form_see(row) {
      this.seeTemp = Object.assign({}, row)
      this.dialogStatus = 'see'
      this.dialogFormVisible = true
      this.getdataListParmSee.parammaps.contractId = row.contractId
      this.getdataListParmSee.parammaps.Month = this.getdataListParm.parammaps.Month
      this.getListSee()
    },
    getListSee() {
      this.listLoadingSee = true
      if (this.getdataListParmSee.parammaps.Month == '' || this.getdataListParmSee.parammaps.Month == null) {
        this.getdataListParmSee.parammaps.month = this.getdataListParmSee.parammaps.Year
      } else {
        this.getdataListParmSee.parammaps.month = this.getdataListParmSee.parammaps.Year + '-' + this.getdataListParmSee.parammaps.Month
      }
      GetDataByName(this.getdataListParmSee).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.listSee = response.data.list
          this.pageNumSee = response.data.pageNum
          this.pageSizeSee = response.data.pageSize
          this.totalSee = response.data.total
        } else {
          this.listSee = []
        }
        setTimeout(() => {
          this.listLoadingSee = false
        }, 100)
      })
    },
    form_searchSee() {
      console.log('点击了table搜索')
      this.getdataListParmSee.offset = 1
      this.getListSee()
    }
  }
}
</script>
