<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="open"
    width="1200px"
    append-to-body
    @open="dialogOpen"
    @close="dialogClose"
  >

    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="88px"
    >
      <SearchBar :show-more="false" :collapse-span="6">
        <template #header>
          <el-col :span="6">
            <el-form-item label="生产订单" prop="workOrderNo">
              <el-input
                v-model="queryParams.workOrderNo"
                clearable
                placeholder="请输入生产订单号"
                @keyup="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料编码" prop="materialNo">
              <el-input
                v-model="queryParams.materialNo"
                :disabled="orderDisabled"
                placeholder="请输入物料编码"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料名称" prop="materialName">
              <el-input
                v-model="queryParams.materialName"
                placeholder="请输入物料名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </template>
        <template #buttons>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </template>
      </SearchBar>
    </el-form>

    <!-- 列表 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="list"
      border
      size="mini"
      max-height="250px"
      :row-key="getOnlyRowKey"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="selected"
        :reserve-selection="true"
        fixed="left"
      />
      <el-table-column
        label="生产订单"
        align="center"
        prop="workOrderNo"
        width="150"
        fixed="left"
        show-overflow-tooltip
      />
      <el-table-column
        label="用料清单"
        align="center"
        prop="workOrderBomNo"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料编码"
        align="center"
        prop="materialNo"
        width="130"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料名称"
        align="center"
        prop="materialName"
        width="130"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料规格"
        align="center"
        prop="materialModels"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="需求数量"
        align="center"
        prop="needQty"
        width="100"
      />
      <el-table-column
        label="已备数量"
        align="center"
        prop="allPreparedQty"
        width="100"
      />
      <el-table-column
        label="本次发料量"
        align="center"
        prop="nowSendQty"
        width="100"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.nowSendQty" @change="qtyChange" />
        </template>
      </el-table-column>
      <el-table-column
        label="剩余待发量"
        align="center"
        prop="overplusSendQty"
        width="100"
      />
      <el-table-column
        label="宽度"
        align="center"
        prop="width"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="步长"
        align="center"
        prop="stepLength"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="穴数"
        align="center"
        prop="hillQty"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="调机米数"
        align="center"
        prop="testScrapLength"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="损耗"
        align="center"
        prop="pcsScrap"
        width="100"
        show-overflow-tooltip
      />
    </el-table>

    <el-descriptions
      v-for="item in canUseQtyList"
      :key="item.materialNo"
      :border="true"
      size="small"
      :column="3"
    >
      <el-descriptions-item>
        <template slot="label">
          物料编码：
        </template>
        {{ item.materialNo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          可应答量：
        </template>
        {{ item.canUseQty }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          当前库存：
        </template>
        {{ item.totalNowQty }}
      </el-descriptions-item>
    </el-descriptions>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button
        type="primary"
        :loading="ensureLoading"
        @click="submitForm"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getWorkOrderBomPage, getResourcePage } from '@/api/wms/orders/productMaterials'

export default {
  name: 'IssueSupport',
  components:
  {
  },
  props: {
    inspectionType: {
      type: Number,
      default: 0
    },
    caselist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      orderDisabled: false,
      // 显示搜索条件
      showSearch: true,
      ensureLoading: false,
      // 总条数
      total: 0,
      // WMS 品质管理-检验项管理列表
      list: [],
      currentRows: [],
      // 选中的
      selectList: [],
      // 弹出层标题
      title: '',
      caseTitle: '',
      // 是否显示弹出层
      open: false,
      // 明细新增
      detailAdd: '',
      dom: '',
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        materialNo: null,
        workOrderNo: null,
        materialName: null,
        masterId: null
      },
      //
      modifyParams: {},
      // 表单参数
      form: {},
      isLoading: false,
      // 表单校验
      rules: {
      },
      // 库存可应答量
      canUseQtyList: []
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // 执行查询
      if (this.queryParams.masterId !== null && this.queryParams.masterId !== undefined) {
        getResourcePage(this.queryParams).then(response => {
          this.list = response.data.list
          this.total = response.data.total
        }).finally(() => {
          this.loading = false
        })
      } else {
        getWorkOrderBomPage(this.queryParams).then(response => {
          this.list = response.data.list
          this.total = response.data.total
        }).finally(() => {
          this.loading = false
        })
      }
    },
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        inspectionNo: undefined,
        inspectionName: undefined,
        inspectionModel: undefined,
        inspectionType: undefined,
        minValue: undefined,
        standValue: undefined,
        maxValue: undefined,
        code: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      const { materialNo, materialName, workOrderNo } = this.queryParams
      if (materialNo || materialName || workOrderNo) {
        this.getList()
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
      if (this.queryParams.materialNo !== null) {
        this.orderDisabled = true
      } else {
        this.orderDisabled = false
      }
    },
    dialogOpen() {
      this.$nextTick(() => {
        const { materialNo, materialName, workOrderNo } = this.queryParams
        if (materialNo || materialName || workOrderNo) {
          this.getList()
        }
        this.canUseQtyList = []
        this.scroll()
      })
    },
    // 选中的
    handleSelectionChange(val) {
      this.currentRows = val
    },
    // 小数点问题处理
    getHandleNumber(val) {
      return Math.round((parseFloat(val) * 100000000)) / 100000000
    },
    submitForm() {
      if (this.currentRows.length <= 0) {
        this.$modal.msgWarning('物料不能为空!')
        return
      }
      this.open = false
      this.$emit('send-data', this.currentRows)
    },
    scroll() {
      // 获取需要绑定的table
      this.dom = this.$refs.table.bodyWrapper
      this.dom.addEventListener('scroll', () => {
      // 表格滚动条滚动的距离
        const scrollTop = this.dom.scrollTop
        // 变量windowHeight是可视区的⾼度
        // let windowHeight = this.dom.clientHeight
        // 变量scrollHeight是滚动条的总⾼度
        const scrollHeight = this.dom.scrollHeight
        const clientHeight = this.dom.clientHeight
        const scrollBottom = scrollHeight - scrollTop - clientHeight
        if (scrollBottom < 1 && this.list.length < this.total) { // 这里就是滚动条滚动到底部的时候
          this.queryParams.pageSize += 10
          this.getList()
          if (this.list.length + 1 === this.total) {
            return
          }
          setTimeout(() => {
            this.loading = false
          }, 500)
        }
      })
    },
    dialogClose() {
      const { queryParams } = this
      queryParams.pageNo = 1
      queryParams.pageSize = 10
      queryParams.materialNo = undefined
      this.selectList = []
      queryParams.idList = []
      queryParams.idListDeleted = []
      this.getList()
      this.$refs.table.clearSelection()
      this.canUseQtyList = []
    },
    getOnlyRowKey(row) {
      return row.id
    },
    qtyChange(v) {
      if (typeof v === 'string') {
        v = Number(v)
      }
    },
    selected(row) {
      const { overplusSendQty } = row
      if (overplusSendQty <= 0) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
<style scoped>
::v-deep .el-descriptions--small.is-bordered .el-descriptions-item__cell {
  width: 200px!important;
}
::v-deep .highlight-row {
  background-color: #F56C6C !important;
}
</style>
