<template>
  <el-card class="topCard">
    <el-row>
      <div>
        <span style="margin-left: 10px">产品编号：</span>
        <el-input v-model="MaterialNo" clearable style="width: 200px" size="small" />
        <span style="margin-left: 10px">物料号：</span>
        <el-input v-model="MaterialNo1" clearable style="width: 200px" size="small" />
        <span style="margin-left: 10px">记录日期：</span>
        <el-date-picker
          v-model="searchDate"
          :clearable="false"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          size="small"
          start-placeholder="开始日期"
          end-placeholder="结束日期" />
        <el-button type="success" icon="el-icon-search" style="margin-left: 15px" size="small" @click="pageSize1=15;pageCurrent1=1;selectDate1()">查询</el-button>
        <el-button type="warning" icon="el-icon-download" style="margin-left: 10px" size="small" @click="selectDate3()">导出</el-button>

        <div style="margin-top: 5px">
          <el-table
            v-loading="loading1"
            ref="multipleTable"
            :data="tableDataList"
            :header-cell-style="{ background: '#F5F5F5'}"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            height="640px"
            style="width: 100%"
            border
          >
            <el-table-column type="index" label="序号" align="center" width="75" />
            <el-table-column align="center" label="产品编号" width="190">
              <template slot-scope="scope">
                {{ scope.row.发动机号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工位号" width="100">
              <template slot-scope="scope">
                {{ scope.row.工位号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料号" width="120">
              <template slot-scope="scope">
                {{ scope.row.物料号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料名称">
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量" width="80">
              <template slot-scope="scope">
                {{ scope.row.数量 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="剩余" width="80">
              <template slot-scope="scope">
                {{ scope.row.操作后库存 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="消耗类型" width="90">
              <template slot-scope="scope">
                <span v-if="scope.row.操作类型代码 === 1" style="color: #00893d">{{ scope.row.操作类型名称 }}</span>
                <span v-else-if="scope.row.操作类型代码 === 2" style="color: #ff4444">{{ scope.row.操作类型名称 }}</span>
                <span v-else-if="scope.row.操作类型代码 === 3" style="color: #ffb700">{{ scope.row.操作类型名称 }}</span>
                <span v-else>{{ scope.row.操作类型名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="消耗时间" width="170">
              <template slot-scope="scope">
                {{ scope.row.操作时间 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料条码" width="150">
              <template slot-scope="scope">
                {{ scope.row.物料条码 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="处理人" width="80">
              <template slot-scope="scope">
                {{ scope.row.操作人员 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="备注" width="120">
              <template slot-scope="scope">
                {{ scope.row.备注 }}
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 10px;margin-left: 10px">
            <el-pagination
              v-if="!loading1"
              :current-page="pageCurrent1"
              :page-sizes="[15, 30, 45]"
              :page-size="pageSize1"
              :total="total1"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
    </div></el-row>
    <!--    集中加帐 -->
    <el-dialog :visible.sync="materialAddAllDialogVisible" :append-to-body="true" :top="'5vh'" title="集中加帐" center width="655px">
      <el-form ref="materialAddAllForm" :model="materialAddAllForm" :rules="materialAddAllRules" label-position="center" label-width="110px" class="demo-ruleForm">
        <el-form-item label="产品型号" prop="EngineType">
          <el-select v-model="materialAddAllForm.EngineTypeID" size="small" placeholder="请选择产品型号" style="width: 200px;">
            <el-option
              v-for="item in engineTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="position: relative;display: flex;justify-content: center">
        <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
      </div>
      <div style="margin-top: 5px">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableDataListAll"
          :header-cell-style="{ background: '#F5F5F5', fontSize: '16px' }"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          height="300px"
          style="width: 100%"
          border
        >
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column align="center" label="物料号">
            <template slot-scope="scope">
              {{ scope.row.物料编码 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" width="120">
            <template slot-scope="scope">
              {{ scope.row.数量 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="materialAddAllCancel()">取消</el-button>
        <el-button type="primary" icon="el-icon-upload" size="small" @click="materialAddAllSubmit()">确认导入</el-button>
      </div>
    </el-dialog>
    <!--    库存加帐 -->
    <el-dialog :visible.sync="materialAddDialogVisible" :append-to-body="true" title="库存加帐" center width="400px">
      <el-form ref="materialAddForm" :model="materialAddForm" :rules="materialAddRules" label-position="center" label-width="110px" class="demo-ruleForm">
        <el-form-item label="物料号" prop="materialCode">
          <el-input v-model="materialAddForm.materialCode" size="small" readonly style="width:200px"/>
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="materialAddForm.materialName" size="small" readonly style="width:200px"/>
        </el-form-item>
        <el-form-item label="产品型号" prop="EngineType">
          <el-input v-model="materialAddForm.EngineType" size="small" readonly style="width:200px"/>
        </el-form-item>
        <el-form-item label="库存数量" prop="materialCount">
          <el-input v-model="materialAddForm.materialCount" size="small" style="width:90px"/>
          <span style="margin: 0 3px">→</span>
          <el-input v-model="materialAddForm.materialCountAfter" size="small" disabled style="width:90px;"/>
        </el-form-item>
        <el-form-item label="加帐数量" prop="editCount">
          <el-input-number v-model="materialAddForm.editCount" :step="1" :min="1" size="small" style="width:200px" @change="materialAddChange"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="materialAddCancel('materialAddForm')">取消</el-button>
        <el-button type="primary" size="small" @click="materialAddSubmit('materialAddForm')">确定</el-button>
      </div>
    </el-dialog>
    <!--    库存盘点 -->
    <el-dialog :visible.sync="materialEditDialogVisible" :append-to-body="true" title="库存盘点" center width="400px">
      <el-form ref="materialEditForm" :model="materialEditForm" :rules="materialEditRules" label-position="center" label-width="110px" class="demo-ruleForm">
        <el-form-item label="物料号" prop="materialCode">
          <el-input v-model="materialEditForm.materialCode" size="small" readonly style="width:200px"/>
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="materialEditForm.materialName" size="small" readonly style="width:200px"/>
        </el-form-item>
        <el-form-item label="产品型号" prop="EngineType">
          <el-input v-model="materialEditForm.EngineType" size="small" readonly style="width:200px"/>
        </el-form-item>
        <el-form-item label="库存数量" prop="materialCount">
          <el-input v-model="materialEditForm.materialCount" size="small" style="width:90px"/>
          <span style="margin: 0 3px">→</span>
          <el-input v-model="materialEditForm.materialCountAfter" size="small" disabled style="width:90px;"/>
        </el-form-item>
        <el-form-item label="盘点数量" prop="editCount">
          <el-input-number v-model="materialEditForm.editCount" :step="1" :min="-materialEditForm.materialCount" size="small" style="width:200px" @change="materialEditChange"/>
        </el-form-item>
        <el-form-item label="盘点原因" prop="editReason">
          <el-input :rows="2" v-model="materialEditForm.editReason" type="textarea" placeholder="请输入盘点原因" size="small" style="width:200px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="materialEditCancel('materialEditForm')">取消</el-button>
        <el-button type="primary" size="small" @click="materialEditSubmit('materialEditForm')">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
import UploadExcelComponent from '@/views/MaterialPull/UpLoadExcel.vue'
import { getNowTime2 } from '@/utils/tool'

export default {
  name: 'MaterialPull',
  components: { UploadExcelComponent },
  data() {
    return {
      stationNumber: [],
      stationNumberValue: '',
      stationName: '',
      materialAddAllDialogVisible: false,
      materialAddDialogVisible: false,
      materialEditDialogVisible: false,
      materialAddAllForm: {
        EngineType: '',
        EngineTypeID: 0
      },
      materialAddAllRules: {
      },
      materialEditForm: {
        materialCode: '',
        materialName: '',
        EngineType: '',
        EngineTypeID: 0,
        materialCount: 0,
        materialCountAfter: 0,
        editPerson: '',
        editReason: '',
        editCount: 0
      },
      materialEditRules: {
        editReason: [{ required: true, message: '请输入盘点原因', trigger: 'blur' }],
        editCount: [{ required: true, message: '请输入盘点数量', trigger: 'blur' }]
      },
      materialAddForm: {
        materialCode: '',
        materialName: '',
        EngineType: '',
        EngineTypeID: 0,
        materialCount: 0,
        materialCountAfter: 0,
        editPerson: '',
        editReason: '',
        editCount: 0
      },
      materialAddRules: {
      },
      activeName: 'first',
      MaterialNo: '',
      MaterialNo1: '',
      engineType: '',
      engineType1: '',
      searchDate: [],
      engineTypes: [],
      tableData: [],
      tableDataList: [],
      tableDataListAll: [],
      loading: false,
      loading1: false,
      pageCurrent: 1,
      pageSize: 15,
      total: 0,
      pageCurrent1: 1,
      pageSize1: 15,
      total1: 0
    }
  },
  watch: {
    stationNumberValue() {
      for (let i = 0; i < this.stationNumber.length; i++) {
        if (this.stationNumber[i].value === this.stationNumberValue) {
          this.stationName = this.stationNumber[i].labelName
        }
      }
      if (!this.stationNumberValue) {
        this.stationName = ''
      }
    }
  },
  created() {
    this.getStationNumber()
    this.searchDate = [getNowTime2(), getNowTime2()]
    this.getEngineType()
  },
  methods: {
    // 初始化获取订单号
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号,
            labelName: response.data[i].工位名称
          })
        }
      })
    },
    getEngineType() {
      const param = []
      this.engineTypes = []
      const Data = this.CreateData('11', 'CATL_基础信息_机型信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.engineTypes.push({
            label: response.data[i]['机型号'],
            value: response.data[i]['机型ID']
          })
        }
        this.engineType = response.data[0]['机型ID']
        this.engineType1 = response.data[0]['机型ID']
        // this.selectDate()
        this.selectDate1()
      })
    },
    selectDate() {
      this.tableData = []
      var param = []
      param[0] = ['产品型号代码', this.engineType]
      param[1] = ['工位号', this.stationNumberValue]
      param[2] = ['物料号', this.MaterialNo]
      param[3] = ['PageCurrent', this.pageCurrent]
      param[4] = ['PageSize', this.pageSize]
      param[5] = ['PageCount', '1111', 'int', '1']
      param[6] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '电子看板_装配零件_物料拉动_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    selectDate1() {
      this.tableDataList = []
      var param = []
      param[0] = ['产品型号代码', this.engineType1]
      param[1] = ['工位号', this.stationNumberValue]
      param[2] = ['物料号', this.MaterialNo1]
      param[3] = ['产品编号', this.MaterialNo]
      param[4] = ['开始日期', this.searchDate[0]]
      param[5] = ['结束日期', this.searchDate[1]]
      param[6] = ['PageCurrent', this.pageCurrent1]
      param[7] = ['PageSize', this.pageSize1]
      param[8] = ['PageCount', '1111', 'int', '1']
      param[9] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '电子看板_装配零件_物料拉动_消耗历史_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          this.tableDataList = response.data.result
        }
        this.total1 = parseInt(response.data.output[0].ItemCount)
        this.loading1 = false
      })
    },
    selectDate3() {
      if (this.tableDataList.length === 0) {
        this.$message.error('请先查询数据')
        return
      }
      var param = []
      param[0] = ['产品型号代码', this.engineType1]
      param[1] = ['工位号', this.stationNumberValue]
      param[2] = ['物料号', this.MaterialNo1]
      param[3] = ['产品编号', this.MaterialNo]
      param[4] = ['开始日期', this.searchDate[0]]
      param[5] = ['结束日期', this.searchDate[1]]
      var Data = this.CreateData('2001', '电子看板_装配零件_物料拉动_消耗历史_查询_导出', param)
      this.exportExcel_NPOI(Data)
    },
    materialAddAll() {
      this.materialAddAllForm.EngineTypeID = this.engineTypes[0].value
      this.materialAddAllDialogVisible = true
    },
    materialAddAllSubmit() {
      if (this.tableDataListAll.length === 0) {
        this.$message.error('内容为空')
      } else {
        var param = []
        param[0] = ['工位号', this.stationNumberValue]
        param[1] = ['用户id', this.$store.state.user.id]
        param[2] = ['用户', this.$store.state.user.name]
        param[3] = ['产品型号代码', this.materialAddAllForm.EngineTypeID]
        var Data = this.CreateData('12', '电子看板_装配零件_物料拉动_导入临时表_确认导入', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            if (response.data[0]['result'] === '1') {
              this.$message.success('库存加帐成功！')
              this.materialAddAllDialogVisible = false
              this.selectDate1()
              this.selectDate()
            } else {
              this.$message.error('库存加帐失败！')
            }
          } else {
            this.$message.error('库存加帐失败！')
          }
        })
      }
    },
    materialAddAllCancel() {
      this.materialAddAllDialogVisible = false
    },
    materialAdd(row) {
      this.materialAddForm.materialCode = row.物料号
      this.materialAddForm.materialName = row.零件名称
      this.materialAddForm.EngineType = row.发动机型号
      this.materialAddForm.EngineTypeID = row.产品型号代码
      this.materialAddForm.materialCount = row.库存数量
      this.materialAddForm.materialCountAfter = row.库存数量
      this.materialAddForm.editReason = ''
      this.materialAddForm.editCount = 0

      this.materialAddDialogVisible = true
    },
    materialAddChange(num) {
      this.materialAddForm.materialCountAfter = this.materialAddForm.materialCount + num
    },
    // 库存盘点提交
    materialAddSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = []
          param[0] = ['工位号', this.stationNumberValue]
          param[1] = ['物料号', this.materialAddForm.materialCode]
          param[2] = ['产品型号代码', this.materialAddForm.EngineTypeID]
          param[3] = ['消耗数量', this.materialAddForm.editCount]
          param[4] = ['消耗类型代码', 3]
          param[5] = ['操作人', this.$store.state.user.name]
          param[6] = ['发动机号', '']
          param[7] = ['备注', this.materialAddForm.editReason]
          const Data = this.CreateData('12', '电子看板_装配零件_物料拉动_消耗_编辑', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data.length > 0) {
              if (response.data[0].result === '1') {
                this.$message.success('库存加帐成功！')
                this.materialAddDialogVisible = false
                this.selectDate1()
                this.selectDate()
              } else {
                this.$message.error('库存加帐失败！')
              }
            } else {
              this.$message.error('库存加帐失败！')
            }
          })
        }
      })
    },
    // 库存盘点取消
    materialAddCancel(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.materialAddDialogVisible = false
    },
    materialEdit(row) {
      this.materialEditForm.materialCode = row.物料号
      this.materialEditForm.materialName = row.零件名称
      this.materialEditForm.EngineType = row.发动机型号
      this.materialEditForm.EngineTypeID = row.产品型号代码
      this.materialEditForm.materialCount = row.库存数量
      this.materialEditForm.materialCountAfter = row.库存数量
      this.materialEditForm.editReason = ''
      this.materialEditForm.editCount = 0

      this.materialEditDialogVisible = true
    },
    materialEditChange(num) {
      this.materialEditForm.materialCountAfter = this.materialEditForm.materialCount + num
    },
    // 库存盘点提交
    materialEditSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = []
          param[0] = ['工位号', this.stationNumberValue]
          param[1] = ['物料号', this.materialEditForm.materialCode]
          param[2] = ['产品型号代码', this.materialEditForm.EngineTypeID]
          param[3] = ['消耗数量', this.materialEditForm.editCount]
          param[4] = ['消耗类型代码', 2]
          param[5] = ['操作人', this.$store.state.user.name]
          param[6] = ['发动机号', '']
          param[7] = ['备注', this.materialEditForm.editReason]
          const Data = this.CreateData('12', '电子看板_装配零件_物料拉动_消耗_编辑', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data.length > 0) {
              if (response.data[0].result === '1') {
                this.$message.success('库存盘点成功！')
                this.materialEditDialogVisible = false
                this.selectDate1()
                this.selectDate()
              } else {
                this.$message.error('库存盘点失败！')
              }
            } else {
              this.$message.error('库存盘点失败！')
            }
          })
        }
      })
    },
    // 库存盘点取消
    materialEditCancel(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.materialEditDialogVisible = false
    },
    beforeUpload(file) {
      return true
    },
    handleSuccess({ results, header }) {
      const tableName = `基础数据_物料加帐_${this.stationNumberValue}_${this.$store.state.user.id}_导入临时表`
      var Data = this.CreateData('7', tableName, results, header)
      this.ExecDatabase(Data).then(response => {
        console.log(response)
        this.selectDate2()
      })
    },
    selectDate2() {
      this.tableDataListAll = []
      var param = []
      param[0] = ['工位号', this.stationNumberValue]
      param[1] = ['用户id', this.$store.state.user.id]
      var Data = this.CreateData('11', '电子看板_装配零件_物料拉动_导入临时表_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableDataListAll = response.data
        }
      })
    },

    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.selectDate()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.selectDate()
    },
    handleSizeChange1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      this.selectDate1()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.selectDate1()
    }
  }
}
</script>

<style scoped>

</style>
