<!-- 干湿明细 -->
<!-- 计费账单 -->
<template>
  <div id="DryWetDetails">
    <div class="top">
      <el-form :inline="true">
        <el-form-item>
          <el-input
            v-model="con"
            placeholder="请输入物资名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span class="demonstration">结算日期</span>
          <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="选择日期"
            style="width:200px"
          >
          </el-date-picker>
          <span>至</span>
          <el-date-picker
            v-model="endTime"
            type="date"
            placeholder="选择日期"
            style="width:200px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="onClick" type="primary" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportAllReportToExcel"
            ><i class="el-icon-download"></i>Excel</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        ref="tableRef"
        border
        style="width: 100%; margin-top: 0px"
        max-height="500px"
        :row-style="{ height: '30px' }"
        :cell-style="{ fontWeight: '700' }"
        class="table"
        fit
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column
          prop="balanceMonth"
          label="结算月"
          sortable
          :filter-method="filterTag"
          :filters="banlanceMonthList"
        >
        </el-table-column>
        <el-table-column
          prop="portName"
          label="放货港口"
          min-width="80px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="noticeTime"
          label="放货日期"
          width="80px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="commerceMethod"
          label="矿种"
          width="60px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="materialName"
          label="品种"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="foreignShipName"
          label="船名"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="loadWetTon"
          label="装船吨位"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="loadWaterTon"
          label="装船水分吨位"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="wagonNumber"
          label="车数"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totalTrainTon"
          label="计费吨位"
          width="70px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totalEnTonWet"
          label="到厂湿吨"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="diff"
          label="装船与到厂湿吨差"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="lossWet"
          label="湿吨途损"
          width="100px"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.lossWet">
            {{ (scope.row.lossWet * 100).toFixed(2) }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="loadWaterRate"
          label="装船含水率"
          width="100px"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.loadWaterRate">
            {{ (scope.row.loadWaterRate * 100).toFixed(2) }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="enWaterRate"
          label="到厂含水率"
          width="120px"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.enWaterRate">
            {{ (scope.row.enWaterRate * 100).toFixed(2) }}%
          </template>
        </el-table-column>
        <el-table-column
          prop="totalDeduct"
          label="到厂扣杂"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totalWaterTon"
          label="入厂水分吨位"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="loadDryTon"
          label="装船干基重"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totalEnTonDry"
          label="到厂干基重"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="lossDry"
          label="干吨途损"
          width="100px"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.lossDry">
            {{ (scope.row.lossDry * 100).toFixed(2) }}%
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="reduceEnDry"
          label="还原后到厂干基"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reduceDryLoss"
          label="还原后干基途损"
          width="100px"
          align="center"
        >
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>
<script>
import { getCookie } from '@/utils/util.js'
import { sjTime } from '@/utils/sharedJsFile'
import BigNumber, { bigNumber } from 'bignumber.js'
export default {
  data() {
    return {
      totalWillTonageedValue: 0,
      con: null,
      tableData: [],
      tableTitle: '干吨明细',
      startTime: null,
      endTime: null,
      sumList: [
        '装船吨位',
        '装船水分吨位',
        '车数',
        '计费吨位',
        '到厂湿吨',
        '装船与到厂湿吨差',
        '到厂扣杂',
        '入厂水分吨位',
        '装船干基重',
        '到厂干基重',
        '还原后到厂干基'
      ],
      banlanceMonthList: [
        {
          text: '01月',
          value: '01月'
        },
        {
          text: '02月',
          value: '02月'
        },
        {
          text: '03月',
          value: '03月'
        },
        {
          text: '04月',
          value: '04月'
        },
        {
          text: '05月',
          value: '05月'
        },
        {
          text: '06月',
          value: '06月'
        },
        {
          text: '07月',
          value: '07月'
        },
        {
          text: '08月',
          value: '08月'
        },
        {
          text: '09月',
          value: '09月'
        },
        {
          text: '10月',
          value: '10月'
        },
        {
          text: '11月',
          value: '11月'
        },

        {
          text: '12月',
          value: '12月'
        }
      ]
    }
  },
  watch: {
    tableData: {
      handler(newVal) {
        console.log('执行一次汇总函数')
        //this.computedTableData(newVal)
      },
      deep: true,
      immediate: false
    }
  },
  created() {},
  mounted() {
    this.onClick()
  },
  methods: {
    filterTag(value, row) {
      return row.balanceMonth === value
    },
    //查询数据
    onClick() {
      let map = {
        con: this.con
      }
      let startTime = null
      let endTime = null
      if (this.startTime) {
        startTime = sjTime(this.startTime)
      }
      if (this.endTime) {
        endTime = sjTime(this.endTime)
      }
      if (startTime && endTime && startTime < endTime) {
        map.startTime = startTime
        map.endTime = endTime
      }
      this.axios.post('/api/v1/bms/getWetDryDetails', map).then(res => {
        this.tableData = res.data.data
      })
    },
    //处理表格数据
    computedTableData(data) {
      data.forEach((item, index) => {
        if (index == 0) {
        }
        //装船与到厂湿吨差
        item.wetTonnageDiffer = item.shipmentTonnage - item.totalEnTonnage
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        //如果索引值为0,则展示‘合计’
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (this.sumList.includes(column.label)) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
            // console.log("sums");
            // console.log(sums[index]);
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      sums[12] = `${((1 - sums[10] / sums[6]) * 100).toFixed(2)}%`
      sums[19] = `${((1 - sums[18] / sums[17]) * 100).toFixed(2)}%`
      sums[13] = `${((sums[7] / sums[6]) * 100).toFixed(2)}%`
      sums[14] = `${((sums[16] / sums[10]) * 100).toFixed(2)}%`
      return sums
    },
    //结算
    //导出干基明细数据
    exportAllReportToExcel() {
      console.log(this.$refs.tableRef)
      const loading = this.$loading({
        lock: true,
        text: '正在导出Excel',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var title = this.tableTitle
      let tHeader = []
      let filterVal = []
      let data = []
      data = this.$refs.tableRef.$children
      data.forEach(item => {
        if (item.label != undefined && item.prop != undefined) {
          if (tHeader.indexOf(item.label) === -1) {
            tHeader.push(item.label)
          }
          if (filterVal.indexOf(item.prop) === -1) {
            filterVal.push(item.prop)
          }
        }
      })
      this.downloadLoading = true
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('@/assets/excel/Export2Excel.js') //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        let data = this.tableData.map(v => filterVal.map(j => v[j])) //3.formatJson格式转换
        export_json_to_excel(tHeader, data, title) // (title)导出的表格名称
      })
      loading.close()
    }
  }
}
</script>
<style lang="scss" scoped>
#DryWetDetails {
  .top {
    margin-left: 10px;
    margin-top: 10px;
  }
  .main {
    margin-left: 10px;
    ::-webkit-scrollbar {
      // width: 20px;
      height: 20px;
      background-color: transparent;
    }
  }
}
</style>
