<template>
  <el-card class="topCard">
    <el-row>
      <span style="margin-left: 10px">站点名称：</span>
      <el-input v-model="stationName" placeholder="站点名称" clearable size="small" style="width: 150px"/>
      <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 15px" @click="pageSize=15;pageCurrent=1;selectDate();selectDate1()">查询</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small" style="margin-left: 15px" @click="addInformation()">增加站点</el-button>
      <el-button type="warning" icon="el-icon-plus" size="small" style="margin-left: 15px" @click="materialAddAll()">绑定物料</el-button>
      <div style="margin-top: 5px">
        <el-col :span="8">
          <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="tableData"
            :header-cell-style="{ background: '#F5F5F5' }"
            highlight-current-row
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            height="680px"
            style="width: 100%"
            border
            @row-click="rowClick"
          >
            <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-column align="center" label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" @click="editInformation(scope.row)"><i class="el-icon-edit"/></el-button>
                <el-button type="text" style="color: #ff0000" @click="deleteInformation(scope.row)"><i class="el-icon-delete"/></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="15">
          <el-table
            v-loading="loading1"
            ref="multipleTable1"
            :data="tableData1"
            :header-cell-style="{ background: '#F5F5F5' }"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            height="680px"
            style="width: 70%;margin-left: 10px"
            border
          >
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column align="center" label="物料号" width="200">
              <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="操作">-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-button type="text" size="mini" icon="el-icon-plus" @click="materialAdd(scope.row)">编辑</el-button>-->
            <!--                <el-button type="text" size="mini" icon="el-icon-edit" @click="materialEdit(scope.row)">解绑</el-button>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>
        </el-col>
      </div>
    </el-row>
    <!--    增加站点 -->
    <el-dialog :visible.sync="materialStationAddDialogVisible" title="增加站点" center width="400px">
      <el-form ref="materialStationAddForm" :model="materialStationAddForm" :rules="materialStationAddRules" label-position="center" label-width="110px" class="demo-ruleForm">
        <el-form-item label="站点名称" prop="materialStationName">
          <el-input v-model="materialStationAddForm.materialStationName" placeholder="站点名称" size="small" style="width:200px"/>
        </el-form-item>
        <el-form-item label="绑定工位" prop="stationNumber">
          <el-select v-model="materialStationAddForm.stationNumber" size="small" placeholder="绑定工位" style="width: 200px;">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="addInformationCancel('materialStationAddForm')">取消</el-button>
        <el-button type="primary" size="small" @click="addInformationConfirm('materialStationAddForm')">确认</el-button>
      </div>
    </el-dialog>
    <!--    编辑站点 -->
    <el-dialog :visible.sync="materialStationEditDialogVisible" title="编辑站点" center width="400px">
      <el-form ref="materialStationEditForm" :model="materialStationEditForm" :rules="materialStationEditRules" label-position="center" label-width="110px" class="demo-ruleForm">
        <el-form-item label="站点名称" prop="materialStationName">
          <el-input v-model="materialStationEditForm.materialStationName" placeholder="站点名称" size="small" style="width:200px"/>
        </el-form-item>
        <el-form-item label="绑定工位" prop="stationNumber">
          <el-select v-model="materialStationEditForm.stationNumber" size="small" placeholder="绑定工位" style="width: 200px;">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editInformationCancel('materialStationEditForm')">取消</el-button>
        <el-button type="primary" size="small" @click="editInformationConfirm('materialStationEditForm')">确认</el-button>
      </div>
    </el-dialog>
    <!--    绑定 -->
    <el-dialog :visible.sync="materialStationBindingDialogVisible" title="站点绑定物料" center width="800px">
      <el-form ref="materialBindingStationAddForm" :model="materialBindingStationAddForm" :rules="materialBindingStationAddRules" label-position="center" label-width="110px" class="demo-ruleForm">
        <el-form-item label="物料站点" prop="stationNumber">
          <el-select v-model="materialBindingStationAddForm.stationNumber" size="small" filterable placeholder="绑定物料站点" style="width: 200px;">
            <el-option
              v-for="item in stationNumberMaterial"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span style="margin-left: 10px">物料名称筛选</span>
          <el-input v-model="materialBindingStationAddForm.materialName" clearable size="small" style="width: 200px" @change="filterTable"/>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        ref="multipleTable1"
        :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="300px"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column align="center" label="物料号" width="150">
          <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="150">
          <template slot-scope="scope">
            {{ scope.row.站点名称 }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="materialAddCancel('materialBindingStationAddForm')">取消</el-button>
        <el-button type="primary" size="small" @click="materialAddSubmit('materialBindingStationAddForm')">确定</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 {
      materialStationAddForm: {
        materialStationName: '',
        stationNumber: ''
      },
      materialStationAddRules: {
        materialStationName: [{ required: true, message: '请输入站点名称', trigger: 'blur' }]
      },
      materialStationEditForm: {
        ID: '',
        materialStationName: '',
        stationNumber: ''
      },
      materialStationEditRules: {
        materialStationName: [{ required: true, message: '请输入站点名称', trigger: 'blur' }]
      },
      stationNumber: [],
      stationNumberMaterial: [],

      materialBindingStationAddForm: {
        stationNumber: '',
        materialName: ''
      },
      materialBindingStationAddRules: {
        stationNumber: [{ required: true, message: '请选择站点信息', trigger: 'change' }]
      },

      materialStationAddDialogVisible: false,
      materialStationEditDialogVisible: false,
      materialStationBindingDialogVisible: false,
      currentSelectRow: null,
      currentSelectRowList: [],

      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: [],
      tableData1: [],
      tableDataList: [],
      tableDataListOrigin: [],
      tableDataListAll: [],
      loading: false,
      loading1: false,
      pageCurrent: 1,
      pageSize: 15,
      total: 0,
      pageCurrent1: 1,
      pageSize1: 15,
      total1: 0
    }
  },
  watch: {
  },
  created() {
    this.searchDate = [getNowTime2(), getNowTime2()]
    this.getMaterialStation()
    this.getStationNumber()
    this.selectDate()
    this.selectDate1()
  },
  methods: {
    addInformation() {
      this.materialStationAddDialogVisible = true
      this.materialStationAddForm.materialStationName = ''
      this.materialStationAddForm.stationNumber = ''
    },
    addInformationConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['工位号', this.materialStationAddForm.stationNumber]
          param[1] = ['站点名称', this.materialStationAddForm.materialStationName]
          console.log(param)
          var Data = this.CreateData('12', '电子看板_装配零件_物料库存_站点信息_增加', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '增加成功',
                type: 'success'
              })
              this.materialStationAddDialogVisible = false
              this.selectDate()
            } else {
              this.$message.error('增加失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    addInformationCancel() {
      this.materialStationAddDialogVisible = false
      this.materialStationAddForm.materialStationName = ''
      this.materialStationAddForm.stationNumber = ''
    },
    editInformation(row) {
      this.materialStationEditForm.materialStationName = row.站点名称
      this.materialStationEditForm.stationNumber = row.工位号
      this.materialStationEditForm.ID = row.ID
      this.materialStationEditDialogVisible = true
    },
    editInformationConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['工位号', this.materialStationEditForm.stationNumber]
          param[1] = ['站点名称', this.materialStationEditForm.materialStationName]
          param[2] = ['ID', this.materialStationEditForm.ID]
          console.log(param)
          var Data = this.CreateData('12', '电子看板_装配零件_物料库存_站点信息_编辑', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.materialStationEditDialogVisible = false
              this.selectDate()
            } else {
              this.$message.error('编辑失败！')
            }
          })
        } else {
          return false
        }
      })
    },
    editInformationCancel() {
      this.materialStationEditDialogVisible = false
      this.materialStationEditForm.materialStationName = ''
      this.materialStationEditForm.stationNumber = ''
    },
    deleteInformation(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['ID', row.ID]
        var Data = this.CreateData('12', '电子看板_装配零件_物料库存_站点信息_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.selectDate()
          } else {
            this.$message.error('删除失败！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 初始化获取订单号
    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].工位名称
          })
        }
      })
    },
    // 初始化获取站点
    getMaterialStation() {
      this.stationNumberMaterial = []
      var param = []
      param[0] = ['站点名称', '']
      var Data = this.CreateData('11', '电子看板_装配零件_物料库存_站点信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumberMaterial.push({
            label: response.data[i].站点名称,
            value: response.data[i].ID,
            labelName: response.data[i].站点名称
          })
        }
      })
    },
    selectDate() {
      this.getMaterialStation()
      this.tableData = []
      var param = []
      param[0] = ['站点名称', this.stationName]
      var Data = this.CreateData('11', '电子看板_装配零件_物料库存_站点信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data
        }
        this.loading = false
        this.currentSelectRow = null
      })
    },
    rowClick(row) {
      console.log(row)
      this.currentSelectRow = row
      this.selectDate3(row)
    },
    selectDate3(row) {
      this.tableData1 = []
      var param = []
      param[0] = ['站点编号', row.ID]
      param[1] = ['物料号', '']
      param[2] = ['PageCurrent', 1]
      param[3] = ['PageSize', 1000]
      param[4] = ['PageCount', '1111', 'int', '1']
      param[5] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '电子看板_装配零件_物料拉动_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          this.tableData1 = response.data.result
        }
      })
    },
    selectDate1() {
      this.tableDataList = []
      var param = []
      param[0] = ['站点编号', '']
      param[1] = ['物料号', '']
      param[2] = ['PageCurrent', 1]
      param[3] = ['PageSize', 1000]
      param[4] = ['PageCount', '1111', 'int', '1']
      param[5] = ['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.tableDataListOrigin = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    materialAddAll() {
      this.materialStationBindingDialogVisible = true
    },
    filterTable() {
      if (this.materialBindingStationAddForm.materialName === '') {
        this.tableDataList = this.tableDataListOrigin
      } else {
        this.tableDataList = this.tableDataListOrigin.filter(item => item.零件名称.includes(this.materialBindingStationAddForm.materialName))
      }
    },
    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.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 pl = []
          for (let i = 0; i < this.currentSelectRowList.length; i++) {
            pl.push(this.materialBinding(this.currentSelectRowList[i]))
          }
          Promise.all(pl).then(response => {
            this.$refs.multipleTable1.clearSelection()
            this.$message.success('绑定成功！')
            this.selectDate1()
          })
        }
      })
    },
    materialBinding(row) {
      return new Promise((resolve, reject) => {
        const param = []
        param[0] = ['站点id', this.materialBindingStationAddForm.stationNumber]
        param[1] = ['物料号', row.物料号]
        param[2] = ['type', 1]
        const Data = this.CreateData('12', '电子看板_装配零件_物料库存_站点信息_绑定', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            if (response.data[0].result === '1') {
              resolve(true)
            } else {
              reject(false)
            }
          } else {
            reject(false)
          }
        })
      })
    },
    // 库存盘点取消
    materialAddCancel(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.materialStationBindingDialogVisible = false
    },
    handleSelectionChange(val) {
      this.currentSelectRowList = val
    },
    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.$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>
