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

    <div class="search">
      <div class="datepickBox" style="">
        <el-date-picker
          v-model="queryCriteria.businessDate_start"
          type="date"
          placeholder="出库日期-开始"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="datepickBox" style="">
        <el-date-picker
          v-model="queryCriteria.businessDate_end"
          type="date"
          placeholder="出库日期-结束"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="datepickBox" style="">
        <el-date-picker
          v-model="queryCriteria.successfulTradeDate_start"
          type="date"
          placeholder="交易成功开始时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="datepickBox" style="">
        <el-date-picker
          v-model="queryCriteria.successfulTradeDate_end"
          type="date"
          placeholder="交易成功结束时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <!--      TOB销售-库存 -->
      <div class="chunk">
        <el-date-picker
          v-model="queryCriteria.newPushDate"
          type="date"
          placeholder="TOB库存推送时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="chunk">
        <el-input v-model="queryCriteria.newTransmitInfo" placeholder="TOB库存报错详情"></el-input>
      </div>
      <div class="radio">
        <el-select v-model="queryCriteria.newstate" placeholder="TOB出库同步成功">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="chunk">
        <el-input v-model="queryCriteria.newsystemnumber" placeholder="TOB库存下游单号"></el-input>
      </div>
      <div class="chunk">
        <el-input v-model="queryCriteria.newsystemprimary" placeholder="TOB库存下游主键"></el-input>
      </div>
      <!--      TOB销售-确认收入 -->
      <div class="chunk">
        <el-date-picker
          v-model="queryCriteria.def5"
          type="date"
          placeholder="TOB确认收入推送时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div class="chunk">
        <el-input v-model="queryCriteria.def6" placeholder="TOB确认收入报错详情"></el-input>
      </div>
      <div class="radio">
        <el-select v-model="queryCriteria.newState4" placeholder="TOB确认收入交易成功-红">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="chunk">
        <el-input v-model="queryCriteria.newSystemNumber4" placeholder="TOB确认收入下游单号"></el-input>
      </div>
      <div class="chunk">
        <el-input v-model="queryCriteria.newSystemPrimary4" placeholder="TOB确认收入下游主键"></el-input>
      </div>
      <div class="chunk">
        <el-input v-model="queryCriteria.headCode" placeholder="销售出库单号"></el-input>
      </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="ToB库存报表"
      >
      </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: 'TOB_ORDER'
      },
      pageModel: {
        'pageSize': 100,
        '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: '出库明细主键',
          prop: 'id',
          tooltip: true,
          width: 150
        },
        {
          label: '货主编码',
          prop: 'headCompanyCode',
          tooltip: true,
          width: 150
        },
        {
          label: '仓库编码',
          prop: 'headFacilityCode',
          tooltip: true,
          width: 150
        },
        {
          label: '平台编码',
          prop: 'headSourcePlatformCode',
          tooltip: true,
          width: 150
        },
        {
          label: '店铺编码',
          prop: 'headStoreCode',
          tooltip: true,
          width: 150
        },
        {
          label: '销售出库单号',
          prop: 'headCode',
          width: 150
        },
        {
          label: '货品sku',
          prop: 'skucode',
          tooltip: true,
          width: 150
        },
        {
          label: '货品名称',
          prop: 'skuname',
          tooltip: true,
          width: 150
        },
        {
          label: '实收数量',
          prop: 'receivedqty',
          tooltip: true,
          width: 150
        },
        {
          label: 'TOB库存-推送时间',
          prop: 'newpushdate',
          tooltip: true,
          width: 200
        },
        {
          label: 'TOB库存-报错详情',
          prop: 'newtransmitinfo',
          tooltip: true,
          width: 200
        },
        {
          label: 'TOB库存-推送状态',
          prop: 'newstate',
          tooltip: true,
          width: 200
        },
        {
          label: 'TOB库存-下游单号',
          prop: 'newsystemnumber',
          tooltip: true,
          width: 200
        },
        {
          label: 'TOB库存-下游主键',
          prop: 'newsystemprimary',
          tooltip: true,
          width: 150
        },
        {
          label: 'TOB确认收入-推送时间',
          prop: 'def5',
          tooltip: true,
          width: 150
        },
        {
          label: 'TOB确认收入-报错详情',
          prop: 'def6',
          tooltip: true,
          width: 150
        },
        {
          label: 'TOB确认收入-推送状态',
          prop: 'newstate4',
          tooltip: true,
          width: 200
        },
        {
          label: 'TOB确认收入-下游单号',
          prop: 'newsystemnumber4',
          tooltip: true,
          width: 150
        },
        {
          label: 'TOB确认收入-下游主键',
          prop: 'newsystemprimary4',
          tooltip: true,
          width: 150
        },
        {
          label: '业务类型',
          prop: 'businesstype',
          tooltip: true,
          width: 150
        },
      ],
      //正常合并
      tableDataMergeList: [],
      dist_state: {
        Y: '成功',
        N: '失败'

      }
    }
  },
  methods: {
    async downLoad() {
      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 < 31) {
        } else {
          this.$vmNews('开始时间和结束时间范围请选择在30天内')
          return
        }
      } else {
        this.$vmNews('请选择开始时间和结束时间')
        return
      }
      let params = {
        ...this.queryCriteria,
        ...this.pageModel,
        pageSize: 9999,
        pageNum: 1
      }
      this.openLoading('detail')
      const res = await authApi('busidataTocsalesServiceImpl', 'busidataTocsalesServiceImpl', 'queryToCSalesReportExcel', '', params)

      if (res.status == 200) {
        const response = await downFilesBasedFileNameFileTypeAPI(res.attribute)
        // console.log(res)
        const url = window.URL.createObjectURL(new Blob([response]), { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'toc正向流程报表.xlsx') // 设置下载的文件名
        document.body.appendChild(link)
        link.click()
      }
      return

    },
    reset() {
      this.pageModel.pageNum = 1
      this.queryCriteria = {
        businessType: 'TOB_ORDER'
      }
    },
    //limit改变
    pageSizeChange(val, obj) {
      obj.pageSize = val
      this.init()
    },
    //页码变更
    pageChange(val, obj) {
      obj.page = 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', 'queryToCSalesReport', '', params)
      console.log(res, '初始化res')
      this.pageModel.pageTotal = res.attribute.total
      res.attribute.list.forEach(item => {
        item.newstate = this.dist_state[item.newstate]
        item.newstate4 = this.dist_state[item.newstate4]
      })
      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>
