<template>
  <div class="app-container">
    <el-card>
      <div class="batch-import-weight">
        <el-divider content-position="left">手工结算入账</el-divider>
        <el-alert
          :closable="false"
          type="info">
          <div class="info-text">
            <span class="font-size">根据指定模板文件进行手工结算入账导入，点击此处</span><el-link type="primary" class="font-size">
              <a href="javascript:;" @click="downloadXlsx('settlementFee')">
                下载模板
              </a>
            </el-link>
          </div>
        </el-alert>
        <el-form class="define-form" inline>
          <el-form-item>
            <el-upload
              ref="importUploadRef"
              action="/"
              accept=".xlsx"
              :disabled="confirmLoading"
              :multiple="false"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="uploadSuccess"
            >
              <el-button type="primary" plain :loading="confirmLoading" size="small">选择文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button v-show="isSaveShow" type="success" plain :loading="accountEntryLoading" size="small" @click="onSaveSettlementAccounting">保存手工结算入账</el-button>
            <el-button v-show="isAbnormalShow" type="danger" plain :loading="exportLoading" size="small" @click="onExportAbnormalData">导出异常数据</el-button>
          </el-form-item>
        </el-form>
        <vxe-table
          border
          ref="xTableSettlement"
          :data="pageManualSettlement"
          :loading="customerWeightLoading"
          :row-config="{isHover: true}"
          :row-class-name="rowClassName"
          :height="tableHeight"
          :header-row-style="{
            background: '#E6F7FF',
            borderRight: '1px solid #ccc',
          }"
          :scroll-y="{enabled: false}"
          :column-config="{ resizable: true }"
        >
          <vxe-column title="单号" field="Number" :min-width="260" />
          <vxe-column title="实际总成本" field="TotalCost" :min-width="110" />
          <vxe-column title="结算重量" field="TotalWeight" :min-width="100" />
          <vxe-column title="内部结算成本单价" field="AvgHandingCharge" :min-width="150" />
          <vxe-column title="内部结算成本总计" field="TotahHandlingCharge" :min-width="130" />
          <vxe-column title="结算总计" field="SumHandlingCharge" :min-width="100" />
          <vxe-column title="是否已有结算价" field="HasHandingCharge" :min-width="130">
            <template #default="{ row }">
              <el-tag :type="row.HasHandingCharge ? '': 'info'">
                {{ row.HasHandingCharge ? '是': '否' }}
              </el-tag>
            </template>
          </vxe-column>
          <vxe-column title="已有结算总计" field="OldSumHandlingCharge" :min-width="120" />
          <vxe-column title="处理方案" field="Solution" :min-width="120">
            <template #default="{ row }">
              {{ row.Solution | getSolutionText }}
            </template>
          </vxe-column>
          <vxe-column field="Error" :min-width="240" title="异常信息" />
          <vxe-column field="ResultStatus" :min-width="60" title="提示">
            <template #default="{ row }">
              {{ row.ResultStatus === 200 ? '成功' : '' }}
            </template>
          </vxe-column>
        </vxe-table>
        <el-pagination
          :page-sizes="[100, 200, 300, 400, 500]"
          :current-page="pagerDto.PageIndex"
          :page-size="pagerDto.PageSize"
          background
          layout="prev, pager, next ,total ,jumper,sizes,slot "
          :total="totalManualSettlement"
          @current-change="pageManualSettlementChange"
          @size-change="sizeManualSettlementChange"
        />
      </div>
    </el-card>
    <!-- <el-dialog
      top="6vh"
      :title="getEditWeightTitle"
      width="1300px"
      :fullscreen="true"
      custom-class="batch-import-weight-form"
      :before-close="closeDialogWeight"
      :close-on-click-modal="false"
      :visible.sync="dialogWeight"
    >
      <el-form ref="costListFormRef">
        <vxe-table
          border
          show-overflow
          ref="costListTableRef"
          :loading="pageWeightThrowingLoading"
          :data="pageWeightThrowingData"
          :scroll-y="{enabled: false}"
          :column-config="{ resizable: true }">
          <vxe-column title="单号" field="Number" :min-width="260" />
          <vxe-column title="实际总成本" field="TotalCost" :min-width="110" />
          <vxe-column title="结算重量" field="TotalWeight" :min-width="100" />
          <vxe-column title="内部结算成本单价" field="AvgHandingCharge" :min-width="150" />
          <vxe-column title="内部结算成本总计" field="TotahHandlingCharge" :min-width="130" />
          <vxe-column title="结算总计" field="SumHandlingCharge" :min-width="100" />
          <vxe-column title="是否已有结算价" field="HasHandingCharge" :min-width="130">
            <template #default="{ row }">
              <el-tag :type="row.HasHandingCharge ? '': 'info'">
                {{ row.HasHandingCharge ? '是': '否' }}
              </el-tag>
            </template>
          </vxe-column>
          <vxe-column title="已有结算总计" field="OldSumHandlingCharge" :min-width="120" />
          <vxe-column title="处理方案" field="Solution" :min-width="120">
            <template #default="{ row }">
              {{ row.Solution | getSolutionText }}
            </template>
          </vxe-column>
          <vxe-column field="Error" :min-width="240" title="异常信息" />
        </vxe-table>
        <div style="text-align: right;">
          <el-pagination
            background
            :page-sizes="[50, 100, 150, 200, 400]"
            :current-page="weightThrowingDataPage"
            :page-size="weightThrowingDataSize"
            layout="prev, pager, next ,total ,sizes"
            :total="totalWeightThrowing"
            @current-change="pageThrowingChange"
            @size-change="sizeThrowingChange"
          />
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogWeight">
          {{ !getEditWeight ? '取 消' : '关 闭' }}
        </el-button>
        <el-button type="primary" :loading="confirmLoading" @click="hanleSubmitWeight" v-if="!getEditWeight">确定保存</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { deepClone, defineThrottle, getCurrentDateTime } from '@/utils';
import { _SaveNewFee, _GetArtificialSaveBranchCompanyFee, _AsyncArtificialSaveBranchCompanyFee } from '@/api/order'

export default {
  name: 'ManualSettlement',
  filters: {
    getSolutionText(val) {
      switch (val) {
        case 0:
          return '未重复无须处理'
        case 1:
          return '跳过'
        case 2:
          return '覆盖'
      }
    }
  },
  data() {
    return {
      header: { Authorization: 'token ' + getToken() },
      loading: false,
      countingThrowingList: [],
      weightThrowingData: [],
      dialogWeight: false,
      editWeightId: undefined,
      batchListSource: [],
      confirmLoading: false,
      accountEntryLoading: false,
      exportLoading: false,
      tableHeight: 480,
      throttledResize: null,
      weightThrowingDataPage: 1,
      weightThrowingDataSize: 100,
      listSourceSize: 100,
      pageWeightThrowingLoading: false,
      // saveNewFeeParams: {
      //   fileName: '',
      //   useSystem: false,
      //   serviceWeightResult: []
      // },
      customerWeightLoading: false,
      manualSettlementData: [],
      pageManualSettlement: [],
      pagerDto: {
        PageIndex: 1,
        PageSize: 100,
      },
    }
  },
  computed: {
    totalManualSettlement() {
      return this.manualSettlementData.length;
    },
    isSaveShow() {
      return this.pageManualSettlement && this.pageManualSettlement.length > 0
    },
    isAbnormalShow() {
      const filterList = this.pageManualSettlement.filter(item => !!item.Error)
      return filterList.length > 0
    },
    // ==
    // 导入结算的数据
    totalWeightThrowing() {
      return this.weightThrowingData.length;
    },
    pageWeightThrowingData() {
      const start = (this.weightThrowingDataPage - 1) * this.weightThrowingDataSize;
      const end = start + this.weightThrowingDataSize;
      return this.weightThrowingData.slice(start, end);
    },
    // getEditWeight() {
    //   return this.editWeightId >= 0 ? true : false
    // },
    // getEditWeightTitle() {
    //   return this.getEditWeight ? '查看结算数据' : '上传结算数据'
    // }
  },
  mounted() {
    this.createThrottledResize()
    window.addEventListener('resize', this.throttledResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.throttledResize)
  },
  deactivated() {
    window.removeEventListener('resize', this.throttledResize)
  },
  methods: {
    async onSaveSettlementAccounting() {
      const filterList = this.pageManualSettlement.filter(item => !item.Error)
      if (filterList.length === 0) {
        this.$message({ type: 'warning', message: '暂无数据保存！' })
        return
      }
      // 同步
      const deepCloneList = deepClone(this.pageManualSettlement)
      const pageList = deepCloneList.map(obj => {
        delete obj['_X_ROW_KEY'];
        delete obj['ResultStatus'];
        return obj;
      });
      try {
        this.accountEntryLoading = true
        for await (const rowData of pageList) {
          if (!rowData.Error) {
            const res = await _AsyncArtificialSaveBranchCompanyFee(rowData)
            if (res.Code === 200) {
              const findIndex = this.pageManualSettlement.findIndex(item => item.Number == rowData.Number)
              this.$set(this.manualSettlementData[findIndex], 'ResultStatus', 200);
            }
          }
        }
        this.$message({ type: 'success', message: '保存成功' })
      } finally {
        this.accountEntryLoading = false
        this.settlementSortList()
      }
    },
    initPageManualSettlement() {
      const start = (this.pagerDto.PageIndex - 1) * this.pagerDto.PageSize;
      const end = start + this.pagerDto.PageSize;
      this.pageManualSettlement = this.manualSettlementData.slice(start, end);
    },
    settlementSortList() {
      this.pageManualSettlement = this.manualSettlementData.sort((a, b) => {
        if (a.ResultStatus === 200 && b.ResultStatus !== 200) {
          return 1;
        } else if (a.ResultStatus !== 200 && b.ResultStatus === 200) {
          return -1;
        } else {
          return 0;
        }
      });
    },
    onExportAbnormalData() {
      const currentDate = getCurrentDateTime('-')
      const filename = '结算异常数据' + currentDate
      this.exportLoading = true
      this.$refs.xTableSettlement.exportData({
        dataFilterMethod({ row }) {
          return !!row.Error;
        },
        filename
      })
      this.exportLoading = false
    },
    // 明细分页-前端
    pageManualSettlementChange(page) {
      this.pagerDto.PageIndex = page;
      this.initPageManualSettlement()
    },
    sizeManualSettlementChange(size) {
      this.pagerDto.PageIndex = 1;
      this.pagerDto.PageSize = size;
      this.initPageManualSettlement()
    },
    // 表格错误样式
    rowClassName({ row }) {
      if(!!row.Error) return 'error-bg'
    },
    // 计算表格的高度
    getTableHeight: function() {
      const tableHeight = window.innerHeight - 330
      this.tableHeight = tableHeight <= 480 ? 480 : tableHeight
    },
    createThrottledResize() {
      this.getTableHeight()
      this.throttledResize = defineThrottle(this.getTableHeight, 1000); // 使用lodash的throttle方法，设置节流的时间间隔为500ms
    },
    downloadXlsx(name) {
      const fileUrl = `/xlsx/${name}.xlsx`
      const link = document.createElement('a')
      link.href = fileUrl
      link.setAttribute('download', `${name}.xlsx`) // 设置下载属性和文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) // 点击后移除链接
    },
    // 上传xlsx文件
    uploadSuccess(file) {
      const _this = this
      // 处理文件选择的逻辑
      const excelFile = file.raw;
      const isXlsx = excelFile.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isXlsx) {
        this.$message({ message: '只能上传 xlsx 文件！', type: 'error' })
        return
      }
      const formData = new FormData()
      formData.append('file', excelFile)
      _this.confirmLoading = true
      // _this.pageWeightThrowingLoading = true
      _this.customerWeightLoading = true
      // _this.hanleOpenEditWeight()
      _GetArtificialSaveBranchCompanyFee(formData).then((res) => {
        if (res && res.length > 0) {
          _this.manualSettlementData = res
          _this.weightThrowingData = res
          _this.initPageManualSettlement()
        }
      }).finally(() => {
        _this.confirmLoading = false
        // _this.pageWeightThrowingLoading = false
        _this.customerWeightLoading = false
      })
    },
    // 显示隐藏
    hanleOpenEditWeight() {
      this.dialogWeight = true
    },
    closeDialogWeight() {
      this.dialogWeight = false
      this.editWeightId = undefined
      this.weightThrowingData = []
    },
    // 确定保存
    // async hanleSubmitWeight() {
    //   const list = this.weightThrowingData.map(item => {
    //     const { _X_ROW_KEY, ...rest } = item;
    //     return rest;
    //   });
    //   this.saveNewFeeParams.serviceWeightResult = list
    // },
    // closeSaveNewFee() {
    //   this.saveNewFeeParams.useSystem = false
    //   this.saveNewFeeParams.fileName = ''
    // },
    // 明细分页-前度
    // pageThrowingChange(page) {
    //   this.weightThrowingDataPage = page;
    // },
    // sizeThrowingChange(size) {
    //   this.weightThrowingDataSize = size;
    // },
  }
}
</script>

<style lang="scss" scoped>
  .batch-import-weight-form .el-input-number ::v-deep .el-input__inner {
    text-align: left !important;
  }
  .batch-import-weight {
    .info-text {
      display: inline-flex;
      padding: 6px 0;
      .font-size {
        font-size: 15px;
      }
    }
    .define-form {
      margin: 10px 0;
      .el-form-item {
        margin-bottom: 0;
      }
    }
    .count-warp {
      padding-bottom: 10px;
      line-height: 1.3;
      font-size: 14px;
      font-weight: bold;
      color: #606266;

      .total {
        font-size: 17px;
        color: #1A73E8;
      }
      .error {
        font-size: 17px;
        color: red;
      }
      .success {
        font-size: 17px;
        color: #67C23A;
      }
    }
  }
</style>
