<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-date-picker v-model="table1.getdataListParm.parammaps.inputDatetime" :picker-options="pickerOptions" :clearable="false" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button class="filter-item" style="float: right;" type="success" icon="el-icon-edit" @click="handleDownload">导出</el-button>
    </div>

    <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 myTable"
      @sort-change="tableSort1"
    >
      <el-table-column label="序号" align="center" type="index" width="50px" />
      <el-table-column label="牧场" min-width="110px" align="center" prop="pastureName" />
      <el-table-column label="备件保管" min-width="110px" align="center">
        <el-table-column label="手动入库单据数量" min-width="110px" align="center" sortable prop="sdlaid" />
        <el-table-column label="采购入库单据数量" min-width="110px" align="center" sortable prop="cglaid" />
        <el-table-column label="备件入库" min-width="110px" align="center" sortable prop="partlaid">
          <template slot-scope="{row}">
            <span v-if="row.partlaid !== '' && parseFloat(row.partlaid)>95" style="background:#5CAD33;display:block;line-height: 45px;color:#fff;">{{ row.partlaid }}%</span>
            <span v-else-if="row.partlaid !== '' && (parseFloat(row.partlaid) >= 50 && parseFloat(row.partlaid) <= 95)" style="background:#99E680;display:block;line-height: 45px;color:#fff;">{{ row.partlaid }}%</span>
            <span v-else-if="row.partlaid !== '' && parseFloat(row.partlaid) < 50" style="background:#FF8080;display:block;line-height: 45px;color:#fff;">{{ row.partlaid }}%</span>
            <span v-else>{{ row.partlaid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手动出库单据数量" min-width="110px" align="center" sortable prop="sduse" />
        <el-table-column label="领用出库单据数量" min-width="110px" align="center" sortable prop="lyuse" />
        <el-table-column label="备件出库" min-width="110px" align="center"sortable prop="partuse">
          <template slot-scope="{row}">
            <span v-if="row.partuse !== '' && parseFloat(row.partuse) > 95" style="background:#5CAD33;display:block;line-height: 45px;color:#fff;">{{ row.partuse }}%</span>
            <span v-else-if="row.partuse !== '' && (parseFloat(row.partuse) >= 50 && parseFloat(row.partuse) <= 95)" style="background:#99E680;display:block;line-height: 45px;color:#fff;">{{ row.partuse }}%</span>
            <span v-else-if="row.partuse !== '' && parseFloat(row.partuse) < 50" style="background:#FF8080;display:block;line-height: 45px;color:#fff;">{{ row.partuse }}%</span>
            <span v-else>{{ row.partuse }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="设备处长" min-width="110px" align="center">
        <el-table-column label="领用单据数量（状态：已通过）" min-width="110px" align="center" sortable prop="allapply" />
        <!-- <el-table-column label="备件领用" min-width="110px" align="center">
          <template slot-scope="{row}">
            <span v-if="row.partapply !== '' && parseFloat(row.partapply) > 95" style="background:#5CAD33;display:block;line-height: 45px;color:#fff;">{{ row.partapply }}%</span>
            <span v-else-if="row.partapply !== '' && (parseFloat(row.partapply) >= 50 && parseFloat(row.partapply) <= 95)" style="background:#99E680;display:block;line-height: 45px;color:#fff;">{{ row.partapply }}%</span>
            <span v-else-if="row.partapply !== '' && parseFloat(row.partapply) < 50" style="background:#FF8080;display:block;line-height: 45px;color:#fff;">{{ row.partapply }}%</span>
            <span v-else>{{ row.partapply }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="领用单据数量(状态:已通过)领用单内维保/保养单号单据" min-width="110px" align="center" sortable prop="wbapply" />
        <el-table-column label="设备维修" min-width="110px" align="center" sortable prop="eqwx">
          <template slot-scope="{row}">
            <span v-if="row.eqwx !== '' && parseFloat(row.eqwx) > 95" style="background:#5CAD33;display:block;line-height: 45px;color:#fff;">{{ row.eqwx }}%</span>
            <span v-else-if="row.eqwx !== '' && (parseFloat(row.eqwx) >= 50 && parseFloat(row.eqwx) <= 95)" style="background:#99E680;display:block;line-height: 45px;color:#fff;">{{ row.eqwx }}%</span>
            <span v-else-if="row.eqwx !== '' && parseFloat(row.eqwx) < 50" style="background:#FF8080;display:block;line-height: 45px;color:#fff;">{{ row.eqwx }}%</span>
            <span v-else>{{ row.eqwx }}</span>
          </template>
        </el-table-column>
        <el-table-column label="保养计划保养任务条数" min-width="110px" align="center" sortable prop="allup" />
        <el-table-column label="完成保养任务条数（处理状态：已完成）" min-width="110px" align="center" sortable prop="doneup" />
        <el-table-column label="保养计划" min-width="110px" align="center" sortable prop="upplan">
          <template slot-scope="{row}">
            <span v-if="row.upplan !== '' && parseFloat(row.upplan) > 95" style="background:#5CAD33;display:block;line-height: 45px;color:#fff;">{{ row.upplan }}%</span>
            <span v-else-if="row.upplan !== '' && (parseFloat(row.upplan) >= 50 && parseFloat(row.upplan) <= 95)" style="background:#99E680;display:block;line-height: 45px;color:#fff;">{{ row.upplan }}%</span>
            <span v-else-if="row.upplan !== '' && parseFloat(row.upplan) < 50" style="background:#FF8080;display:block;line-height: 45px;color:#fff;">{{ row.upplan }}%</span>
            <span v-else>{{ row.upplan }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { GetDataByName, GetDataByNames, PostDataByName, checkButtons, getRecuData, failproccess, GetAccount } from '@/api/common'
import waves from '@/directive/waves' // waves directive
import { parseTime, json2excel, sortChange } from '@/utils/index.js'
import { validateEMail } from '@/utils/validate.js'
import Pagination from '@/components/Pagination'
import Cookies from 'js-cookie'
export default {
  name: 'Rundatatrack',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      table1: {
        total: 0,
        list: [],
        listLoading: true,
        getdataListParm: {
          name: 'getruntimedatetracklist',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            startTime: '',
            stopTime: '',
            inputDatetime: [parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}'), parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}')]
          }
        }
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()// 如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      downList: [],
      isPercentage: false,
      percentage: 1,
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getList()
  },

  methods: {
    tableSort1(column) {
      sortChange(column, this.table1.list)
    },
    getList() {
      this.table1.listLoading = true
      this.table1.getdataListParm.parammaps.startTime = parseTime(this.table1.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
      this.table1.getdataListParm.parammaps.stopTime = parseTime(this.table1.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      GetDataByName(this.table1.getdataListParm).then(response => {
        for (let i = 0; i < response.data.list.length; i++) {
          this.$set(response.data.list[i], 'index', i + 1)
        }
        console.log('table数据', response.data.list)
        this.downList = response.data.list
        this.table1.list = response.data.list
        this.table1.pageNum = response.data.pageNum
        this.table1.pageSize = response.data.pageSize
        if (response.data.total) {
          this.table1.total = response.data.total
        }
        setTimeout(() => {
          this.table1.listLoading = false
        }, 300)
      })
    },
    handleSearch() {
      this.getList()
    },
    handleDownload() {
      for (let i = 0; i < this.downList.length; i++) {
        if (this.downList[i].partlaid !== undefined && this.downList[i].partlaid !== '' && this.downList[i].partlaid !== 0) {
          this.downList[i].partlaid = this.downList[i].partlaid + '%'
        }
        if (this.downList[i].partuse !== undefined && this.downList[i].partuse !== '' && this.downList[i].partuse !== 0) {
          this.downList[i].partuse = this.downList[i].partuse + '%'
        }
        // if (this.downList[i].partapply !== undefined && this.downList[i].partapply !== '' && this.downList[i].partapply !== 0) {
        //   this.downList[i].partapply = this.downList[i].partapply + '%'
        // }
        if (this.downList[i].eqwx !== undefined && this.downList[i].eqwx !== '' && this.downList[i].eqwx !== 0) {
          this.downList[i].eqwx = this.downList[i].eqwx + '%'
        }
        if (this.downList[i].upplan !== undefined && this.downList[i].upplan !== '' && this.downList[i].upplan !== 0) {
          this.downList[i].upplan = this.downList[i].upplan + '%'
        }
      }
      import('@/vendor/Export5Excel').then(excel => {
        const multiHeader = [
          [
            '序号', '牧场', '备件保管', '', '', '', '', '', '设备处长', '', '', '', '', '', ''
          ]
        ]
        const multiHeader2 = [
          [
            '', '', '手动入库单据数量', '采购入库单据数量', '备件入库', '手动出库单据数量', '领用出库单据数量', '备件出库', '领用单据数量（状态：已通过）', '领用单据数量（状态：已通过）领用单内维保/保养单号单据', '设备维修', '保养计划保养任务条数', '完成保养任务条数（处理状态：已完成）', '保养计划'
          ]
        ]
        const filterVal = [
          'index', 'pastureName', 'sdlaid', 'cglaid', 'partlaid', 'sduse', 'lyuse', 'partuse', 'allapply', 'wbapply', 'eqwx', 'allup', 'doneup', 'upplan'
        ]
        const data = this.downList.map((v) => filterVal.map((j) => v[j]))
        const merges = ['A1:A2', 'B1:B2', 'C1:H1', 'I1:O1']
        excel.export_json_to_excel({ multiHeader, multiHeader2, data, filename: '运行数据追踪', merges })
      })
    }
  }
}
</script>
<style lang="scss">
  .myTable .cell{padding-left: 0;padding-right: 0;}
</style>
