<template>
  <div class="MachineSchedulingTable">
    <!--    搜索框-->

    <div class="search">
      <div class="datepickBox" style="">
        <el-date-picker
            v-model="queryCriteria.businessDateStart"
            type="date"
            placeholder="业务日期开始"
            value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="datepickBox" style="">
        <el-date-picker
            v-model="queryCriteria.businessDateEnd"
            type="date"
            placeholder="业务日期结束"
            value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="radio">
        <el-select v-model="queryCriteria.newstate" placeholder="入库推送状态">
          <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </div>`
      <div class="radio">
        <el-select v-model="queryCriteria.newstate2" placeholder="退款推送状态">
          <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div>
      <el-button
          type="primary"
          @click="query"
          :loading="loading"
          size="small"
          style=" margin: 5px 5px"
      >查询
      </el-button>
      <el-button
          type="primary"
          @click="downLoad"
          :loading="loading"
          size="small"
          style=" margin: 5px 5px"
      >excel导出
      </el-button>
      <el-button
          type="warning"
          @click="reset"
          :loading="loading"
          size="small"
          style="margin: 5px 5px"
      >重置
      </el-button>
    </div>
    <!--    主体内容-->
    <div class="main">
      <baseNewTable
          :tableData="mainTableData"
          :tableColumn="mainTableColumn"
          :tableLoading="tableLoading"
          :tableDataMergeList="tableDataMergeList"
          :pageModel="pageModel"
          @pageSizeChange="(val) => pageSizeChange(val, pageModel)"
          @pageChange="(val) => pageChange(val, pageModel)"
          exportEventName="ToC确认收入报表"
      >
      </baseNewTable>
    </div>
  </div>
</template>

<script>
import baseNewTable from './baseNewTable2/index.vue'
import { authApi, downFilesBasedFileNameFileTypeAPI } from '@/api/apis/auth'
import {
  basePrintJS
} from '@/utils/util.js'

export default {
  name: 'MachineSchedulingTable',
  data() {
    return {
      stateOptions: [
        { label: '全部', value: 'all' },
        { label: '成功', value: 'Y' },
        { label: '失败', value: 'N' }
      ],
      //搜索框内容
      queryCriteria: {
        'businesstype': 'TOC_ORDER',
        'businessDateStart': '2025-03-11',
        'businessDateEnd': '2025-03-11',
        'newstate': 'Y',
        'newstate2': 'Y'
      },
      pageModel: {
        'pageSize': 20,
        'pageNum': 1,
        pageTotal: 0
      },
      options: [
        {
          label: 'TOB销售',
          value: 'TOB_ORDER'
        },
        {
          label: 'TOC销售',
          value: 'TOC_ORDER'
        }

      ],
      //搜索按钮loading
      loading: false,
      //表单loading
      tableLoading: false,
      workshop: [],
      //客户下拉
      queryCriteriaOption: [],
      //色号下拉
      colorNumOption: [],
      //批号下拉
      contractCodeOption: [],
      //机台下拉
      workBenchIDOption: [],
      //生产名称下拉
      cInvNameOption: [],
      // 产品类型下拉
      cInvCNameOption: [],
      //生产班组
      stateNameOption: [
        {
          label: '甲',
          value: '甲'
        },
        {
          label: '乙',
          value: '乙'
        },
        {
          label: '丙',
          value: '丙'
        }
      ],
      // 右侧按钮
      fixedButtonList: [
        {
          icon: 'el-icon-printer',
          title: '打印'
        },
        {
          icon: 'el-icon-folder',
          title: '导出'
        }
      ],
      //正常表单
      mainTableData: [],
      //缺少字段产品大类、本次生产重量
      mainTableColumn: [
        {
          label: 'O无源入库明细主键',
          prop: 'id',
          tooltip: true,
          width: 150
        },
        {
          label: 'O无源入库单号',
          prop: 'receiptCode',
          tooltip: true,
          width: 150
        },
        {
          label: 'O公司',
          prop: 'companyCode',
          tooltip: true,
          width: 200
        },
        {
          label: 'O仓库',
          prop: 'facilityCode',
          tooltip: true,
          width: 150
        },
        {
          label: 'O店铺',
          prop: 'storeCode',
          tooltip: true,
          width: 150
        },
        {
          label: 'O关联时间',
          prop: 'relatedAt',
          tooltip: true,
          width: 150
        },
        {
          label: '业务类型',
          prop: 'businesstype',
          tooltip: true,
          width: 150
        },
        {
          label: '业务日期(关联时间)',
          prop: 'businessdate',
          tooltip: true,
          width: 200
        },
        {
          label: 'O货品sku',
          prop: 'skucode',
          tooltip: true,
          width: 150
        },
        {
          label: 'O货品名称',
          prop: 'skuname',
          tooltip: true,
          width: 150
        },
        {
          label: 'O入库数量',
          prop: 'quantity',
          tooltip: true,
          width: 150
        },
        {
          label: '退款完成时间(取O售后订单表头)',
          prop: 'transactionDate',
          width: 200
        },
        {
          label: '退款推送时间',
          prop: 'newpushdate2',
          tooltip: true,
          width: 200
        },
        {
          label: '退款报错详情',
          prop: 'newtransmitinfo2',
          tooltip: true,
          width: 200
        },
        {
          label: '退款推送状态',
          prop: 'newstate2',
          tooltip: true,
          width: 150
        },

        {
          label: '入库推送时间',
          prop: 'newpushdate',
          tooltip: true,
          width: 150
        },
        {
          label: '入库报错详情',
          prop: 'newtransmitinfo',
          tooltip: true,
          width: 150
        },
        {
          label: '入库推送状态',
          prop: 'newstate',
          tooltip: true,
          width: 150
        },
        {
          label: 'U销售订单编码',
          prop: 'newsystemnumber',
          tooltip: true,
          width: 200
        },
        {
          label: 'U销售订单主键',
          prop: 'newsystemprimary',
          tooltip: true,
          width: 200
        },
        {
          label: 'U应收单号',
          prop: 'newsystemnumber2',
          tooltip: true,
          width: 150
        },
        {
          label: 'U应收单主键',
          prop: 'newsystemprimary2',
          tooltip: true,
          width: 150
        },

        {
          label: 'O计算应收',
          prop: 'def1',
          tooltip: true,
          width: 150
        },
        {
          label: 'O计算公式',
          prop: 'def2',
          tooltip: true,
          width: 200
        },
        {
          label: 'O平台优惠',
          prop: 'def3',
          tooltip: true,
          width: 150
        },
        {
          label: 'O支付优惠',
          prop: 'def4',
          tooltip: true,
          width: 150
        },
        {
          label: 'O达人优惠',
          prop: 'def5',
          tooltip: true,
          width: 150
        },
        {
          label: 'O商家优惠',
          prop: 'def6',
          tooltip: true,
          width: 150
        },

      ],
      //正常合并
      tableDataMergeList: [],
      dist_state: {
        Y: '成功',
        N: '失败'

      }
    }
  },
  methods: {
    async downLoad() {
      let params = {
        ...this.queryCriteria
      }
      this.openLoading('detail')
      const res = await authApi('tocofsSaleoutServiceImplReport', 'tocofsSaleoutServiceImplReport', 'queryPassiveComponentsReportExcel', '', params)
      if (res.status == 200) {
        const response = await downFilesBasedFileNameFileTypeAPI(res.msg)
        const blob = new Blob([response])
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', '无源条件报表.xlsx')
        document.body.appendChild(link)
        link.click()
        window.URL.revokeObjectURL(url) // 释放内存
      }
      return

    },
    reset() {
      this.pageModel.pageNum = 1
      this.queryCriteria = {
        businessType: 'TOC_ORDER'
      }
    },
    //limit改变
    pageSizeChange(val, obj) {
      obj.pageSize = val
      this.init()
    },
    //页码变更
    pageChange(val, obj) {
      obj.page = val
      obj.pageNum = val
      this.init()
    },
    //搜索联想
    async remoteMethod(val, row, options) {
      //   客户
      if (row == 'cusCode') {
        const res = await GetCustomerListAPI(val)
        this[options] = []
        if (res.code == 1) {
          res.data[1].forEach((item) => {
            this[options].push({ label: item.cCusName, value: item.cCusCode })
          })
        }
      } else if (row === 'workBenchID') {
        //这个不需要动态搜索
        if (this[options].length) return
        const res = await WorkbenchGetBillListAPI({
          page: 1,
          limit: 999,
          Sequence: '',
          SequenceName: '',
          CodeOrName: '',
          areaID: '',
          workShopID: ''
        })
        this[options] = []
        if (res.code == 1) {
          res.data[1].forEach((item) => {
            this[options].push({
              label: item.workName,
              value: item.workID
            })
          })
        }
      } else if (row === 'cInvCode') {
        const res = await U8BaseGetInvenListAPI({
          page: 1,
          limit: 200,
          codeOrName: val
        })
        this[options] = []
        if (res.code == 1) {
          res.data[1].forEach((item) => {
            this[options].push({ label: item.cInvName, value: item.cInvCode })
          })
        }
      } else if (row === 'cInvCCode') {
        const res = await U8BaseGetInvClassListAPI({
          page: 1,
          limit: 200,
          codeOrName: val
        })
        this[options] = []
        if (res.code == 1) {
          res.data[1].forEach((item) => {
            this[options].push({
              label: item.cInvCName,
              value: item.cInvCCode
            })
          })
        }
      }
    },
    // 点击查询
    query() {
      this.pageModel.pageNum = 1
      // if (this.queryCriteria.business_date_start && this.queryCriteria.business_date_end) {
      //   let startDate = new Date(this.queryCriteria.business_date_start)
      //   let endDate = new Date(this.queryCriteria.business_date_end)
      //   let differenceInMillis = endDate - startDate
      //   let differenceInDays = differenceInMillis / (1000 * 60 * 60 * 24)
      //   // 判断差值是否在15天以内
      //   if (!isNaN(differenceInDays) && differenceInDays < 11) {
      //   } else {
      //     this.$vmNews('开始时间和结束时间范围请选择在10天内')
      //     return
      //   }
      // } else {
      //   this.$vmNews('请选择开始时间和结束时间')
      //   return
      // }
      this.init()
    },
    /*
     * 导出、打印功能
     * item:当前按钮信息
     * boxId:打印表单id(仅导出）
     * name:导出后文件名（仅导出）
     * tableData:传打印表格当前tableData（仅打印）
     * tableColumn:传打印表格当前tableColumn（仅打印）
     * */
    fixedClick(item, boxId, name, tableData, tableColumn) {
      if (item.title == '导出') {
        this.exportEvent(name, boxId)
      } else if (item.title == '打印') {
        this.duplicate(tableData, tableColumn)
      }
    },
    //导出功能
    exportEvent(excelName, boxId) {
      console.log(document.querySelector(boxId), '123', boxId)
      let gatherData = {
        raw: true
      }
      let grid = XLSX.utils.table_to_book(
          document.querySelector(boxId),
          gatherData
      )
      let workbook = XLSX.write(grid, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
            new Blob([workbook], {
              type: 'application/octet-stream'
            }),
            excelName + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, workbook)
      }
      return workbook
    },
    //打印
    duplicate(tableData, tableColumn) {
      basePrintJS(tableData, tableColumn)
    },
    //初始化表单
    async init() {
      this.tableLoading = true
      let params = {
        ...this.queryCriteria,
        ...this.pageModel
      }
      //初始化表单
      const res = await authApi('tocofsSaleoutServiceImplReport', 'tocofsSaleoutServiceImplReport', 'queryPassiveComponentsReport', '', params)
      console.log(res, '初始化res')
      this.pageModel.pageTotal = res.attribute.total
      res.attribute.list.forEach(item => {
        item.newstate = this.dist_state[item.newstate]
        item.newstate2 = this.dist_state[item.newstate2]
      })
      this.mainTableData = this.dataDispose(
          res.attribute.list,
          this.tableDataMergeList
      )
      this.tableLoading = false
    },
    //data处理
    dataDispose(data, arr) {
      if (!arr.length) return data
      //分类存放分组
      let tempObj = {}
      //结果
      let result = []
      //将层级转变为 [[1],[1,2],[1,2,3]]
      const transformedArray = arr.reduce((acc, currentValue) => {
        acc.push([...(acc.length ? acc[acc.length - 1] : []), currentValue])
        return acc
      }, [])
      //开始对表单进行排序
      //排序后的arr
      let newArr = []
      let sortObj = {}
      data.forEach((item) => {
        let keyValue = ''
        arr.forEach((key2, index) => {
          keyValue += item[key2]
        })
        if (!sortObj[keyValue]) {
          sortObj[keyValue] = data.filter((item01) => {
            return arr.every((prop) => item01[prop] === item[prop])
          })
        }
      })
      Object.keys(sortObj)
          .sort()
          .forEach((key) => {
            newArr = [...newArr, ...sortObj[key]]
          })
      // 开始循环
      newArr.forEach((item) => {
        transformedArray.forEach((key) => {
          //keyValue:当前key下的value加一起，用于tempObj的key
          let keyValue = ''
          key.forEach((keyItem, index) => {
            keyValue += item[keyItem]
            if (index < key.length - 1) {
              keyValue += '|'
            }
          })
          if (!tempObj[keyValue]) {
            //拿到所有当前key下相同数据
            tempObj[keyValue] = newArr.filter((item01) => {
              return key.every((prop) => item01[prop] === item[prop])
            })
            // 计算总数
            tempObj[keyValue][0][`${key[key.length - 1]}Length`] =
                tempObj[keyValue].length

            if (key.length === 1) {
              result = [...tempObj[keyValue], ...result]
            }
          }
        })
      })
      return result
    }
  },
  mounted() {
    this.init()
  },
  components: {
    baseNewTable
  }
}
</script>

<style scoped lang="scss">
.MachineSchedulingTable {
  padding: 15px;
  border-radius: 20px;
  background-color: #fff;
  overflow: auto;

  .div_title {
    color: #696969;
    background-color: #f1efef;
    line-height: 35px;
    height: 35px;
    margin: 20px 0 10px;
    text-align: center;

    > span {
      width: 23%;
      display: inline-block;
      margin-left: 15px;
    }
  }

  > .search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    > div {
      margin-left: 10px !important;
      width: 200px !important;
      margin-bottom: 10px;
    }

  }

  > .main {
    > .tableBox {
    }
  }
}

::v-deep .el-select {
  width: 100% !important;
}
</style>
