<template>
  <div class="app-container">
    <el-card>
      <el-radio-group
        v-model="radio"
        size="small"
        style="margin: 10px;"
        @change="BasicShow()">
        <el-radio v-model="radio" :label="1" >修改记录</el-radio>
        <el-radio v-model="radio" :label="2" style="margin-left: 2px" >异常记录</el-radio>
      </el-radio-group>
      <span style="margin-left: 20px">项目名称:</span>
      <el-select v-model="ProjectValue" filterable clearable size="small" placeholder="请选择项目名称" style="width: 200px;margin-right:10px" @change="searchMachine()">
        <el-option
          v-for="item in Project"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>机床图号:</span>
      <el-select v-model="MachineValue" filterable clearable size="small" placeholder="机床图号" style="width: 200px;margin-right:10px" @change="searchGroupList()">
        <el-option
          v-for="item in Machine"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>组号:</span>
      <el-select v-model="GroupNumValue" filterable clearable size="small" placeholder="组号" style="width: 200px">
        <el-option
          v-for="item in GroupNum"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button
        type="success"
        size="small"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="pageCurrent=1;pageSize=10;total=0;getAlterRecord()">查询</el-button>
    </el-card>
    <el-card v-show="altershow">
      <el-table
        v-loading="loading"
        :data="tableData1"
        border
        style="width: 100%;max-height: 300px;"
        height="300px"
        size="mini"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55"/>
        <el-table-column label="项目名称" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.项目名称 }}
          </template>
        </el-table-column>
        <el-table-column label="机床图号" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column label="组号" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.名称 }}
          </template>
        </el-table-column>
        <el-table-column label="数量" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column label="修改原因" min-width="100" align="center">
          <template slot-scope="scope">

            {{ scope.row.修改原因 }}
          </template>
        </el-table-column>
        <el-table-column label="记录人" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column label="修改日期" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.修改日期 ? scope.row.修改日期.split(' ')[0] : '' }}
          </template>
        </el-table-column>
        <el-table-column label="仓库" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="零件类型" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.类型名称 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :total="total"
          style="display:inline-block;width:50%"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-card v-show="errorshow">
      <el-table
        v-loading="loading2"
        :data="tableData2"
        border
        style="width: 100%;max-height: 300px;"
        height="300px"
        size="mini"
        @selection-change="handleSelectionChange2">
        <el-table-column type="selection" align="center" width="55"/>
        <el-table-column label="项目名称" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.项目名称 }}
          </template>
        </el-table-column>
        <el-table-column label="机床图号" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column label="组号" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.名称 }}
          </template>
        </el-table-column>
        <el-table-column label="异常数量" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.异常数量 }}
          </template>
        </el-table-column>
        <el-table-column label="异常原因" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.异常原因 }}
          </template>
        </el-table-column>
        <el-table-column label="仓库" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="记录时间" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.记录时间 ? scope.row.记录时间.split(' ')[0] : '' }}
          </template>
        </el-table-column>
        <el-table-column label="零件类型" min-width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.类型名称 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent2"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize2"
          :total="total2"
          style="display:inline-block;width:50%"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"/>
      </div>
    </el-card>
    <el-card>
      <span>补投单号:</span>
      <el-input v-model="repleacecard" placeholder="补投单号" size="small" clearable style="width: 200px"/>
      <span>仓库:</span>
      <el-select v-model="HouseNumber" placeholder="请选择仓库" size="small" @change="searchDemo();payMethodChange()">
        <el-option
          v-for="item in House"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button
        type="success"
        size="small"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="pageCurrent3=1;pageSize3=10;total3=0;getReplacement()">查询</el-button>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        style="margin-left: 10px"
        @click="addCard">创建补投单</el-button>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-download"
        style="margin-left: 10px"
        @click="submitCardDetail">选入物料</el-button>
    </el-card>
    <el-card>
      <el-table v-loading="loading3" :data="tableData3" border style="max-height: 300px;" height="300px" size="mini" highlight-current-row @row-click="searchTable4">
        <el-table-column label="补投单编号" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.补投单编号 }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column label="补投时间" align="center" min-width="250">
          <template slot-scope="scope">
            {{ scope.row.补投时间 ? scope.row.补投时间.split(' ')[0] : '' }}
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" align="center" min-width="250">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="280" fixed="right">
          <template slot-scope="scope">
            <el-button :disabled="parseInt(scope.row.离线合同状态) === 1" type="danger" size="mini" icon="el-icon-delete" @click="deleteOfflineContract(scope.row)">作废</el-button>
            <el-button type="warning" size="mini" icon="el-icon-download" @click="doneRequestCard(scope.row)">导出</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 10px 0;">
        <el-pagination
          :current-page="pageCurrent3"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize3"
          :total="total3"
          style="display:inline-block;width:50%"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"/>
      </div>
      <el-table v-loading="loading4" :data="tableData4" border style="max-height: 300px;" height="300px" size="mini">
        <el-table-column label="补投单编号" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.补投单编号 }}
          </template>
        </el-table-column>
        <el-table-column label="项目名称" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.项目名称 }}
          </template>
        </el-table-column>
        <el-table-column label="机床图号" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column label="组号" align="center" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.名称 }}
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.数量 }}
          </template>
        </el-table-column>
        <el-table-column label="仓库名称" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.仓库名称 }}
          </template>
        </el-table-column>
        <el-table-column label="类型名称" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.类型名称 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button :disabled="disable" type="danger" size="mini" icon="el-icon-delete" @click="deleteDetail(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisibleExport" center style="min-height: 300px" width="60%">
      <el-card>
        <div id="print">
          <div style="text-align: center">
            <h2>仓 库 补 投 单</h2>
            <hr>
            <table class="tgClass" style="table-layout: fixed; width: 820px;margin: auto">
              <colgroup>
                <col style="width: 120px">
                <col style="width: 250px">
                <col style="width: 110px">
                <col style="width: 100px">
                <col style="width: 120px">
                <col style="width: 120px">
              </colgroup>
              <tr>
                <td class="tg-s268">补投单编号:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[0] }}</td>
                <td class="tg-0lax">姓名:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[1] }}</td>
              </tr>
              <tr>
                <td class="tg-0lax">补投时间:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[2] }}</td>
                <td class="tg-0lax">仓库名称:</td>
                <td class="tg-0lax" style="text-align: left">{{ inbondCard[3] }}</td>
              </tr>
            </table>
          </div>
          <div style="margin-top: 10px">
            <table class="tg" style="table-layout: fixed; width: 820px; margin: auto">
              <colgroup>
                <col style="width: 74px">
                <col style="width: 78px">
                <col style="width: 84px">
                <col style="width: 88px">
                <col style="width: 94px">
                <col style="width: 80px">
              </colgroup>
              <tr>
                <th class="tg-c3ow">项目名称</th>
                <th class="tg-c3ow">机床图号</th>
                <th class="tg-c3ow">组号</th>
                <th class="tg-c3ow">名称</th>
                <th class="tg-c3ow">数量</th>
                <th class="tg-c3ow">类型</th>
              </tr>
              <tr v-for="(list, index) in tableData4" :key="index">
                <td class="tg-c3ow">{{ list.项目名称 }}</td>
                <td class="tg-c3ow">{{ list.机床图号 }}</td>
                <td class="tg-c3ow">{{ list.组号 }}</td>
                <td class="tg-c3ow">{{ list.名称 }}</td>
                <td class="tg-c3ow">{{ list.数量 }}</td>
                <td class="tg-c3ow">{{ list.类型名称 }}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisibleExport=false">取消</el-button>
        <el-button type="primary" size="small" @click="printCard">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { initProject, searchmachine, searchTeam, searchAlterRecord, searchErrorRecord, searchReplacementCard, addReplacementCard, initWarehouse, addCardDetail, searchCardDetail, deleteReplacementCard, deleteCardDetail } from '@/api/Inventory/PartsReplacement'
import { mapGetters } from 'vuex'
import $ from 'jquery'
export default {
  data() {
    return {
      ProjectValue: '',
      Project: [],
      MachineValue: '',
      Machine: [],
      GroupNumValue: '',
      GroupNum: '',
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      loading: false,
      loading2: false,
      loading3: false,
      loading4: false,
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      pageCurrent2: 1,
      pageSize2: 10,
      total2: 0,
      pageCurrent3: 1,
      pageSize3: 10,
      total3: 0,
      ProjectValue_check: '',
      MachineValue_check: '',
      GroupNumValue_check: '',
      repleacecard: '',
      repleacecard_check: '',
      people: '',
      HouseNumber: '',
      House: [],
      radio: '',
      altershow: true,
      errorshow: false,
      projectGroup: [],
      machineGroup: [],
      partGroup: [],
      nameGroup: [],
      numberGroup: [],
      locateGroup: [],
      partType: [],
      reasonGroup: [],
      cardNumber: '',
      inbondCard: [], // 补投单
      dialogVisibleExport: false // 导出表单
    }
  },
  computed: {
    ...mapGetters([
      'id' // 人员编号
    ])
  },
  created() {
    this.fetchData()
    this.getpeopleid()
    this.getHouse()
  },
  methods: {
    // 获取人员编号
    getpeopleid() {
      this.people = this.id
    },
    getHouse() {
      initWarehouse().then(response => { // 初始化仓库
        console.log(response)
        for (let i = 0; i < response.data.length; i++) {
          this.House.push({
            label: response.data[i].仓库名称,
            value: response.data[i].仓库流水号
          })
        }
      })
    },
    handleSelectionChange(val) {
      this.projectGroup = []
      this.machineGroup = []
      this.partGroup = []
      this.nameGroup = []
      this.numberGroup = []
      this.locateGroup = []
      this.partType = []
      this.reasonGroup = []
      for (let i = 0; i < val.length; i++) {
        this.projectGroup.push(val[i].项目流水号)
        this.machineGroup.push(val[i].机床流水号)
        this.partGroup.push(val[i].组件流水号)
        this.nameGroup.push(val[i].名称)
        this.numberGroup.push(val[i].数量)
        this.locateGroup.push(val[i].货位流水号)
        this.partType.push(val[i].零件类型)
        this.reasonGroup.push(val[i].原因)
      }
    },
    handleSelectionChange2(val) {
      this.projectGroup = []
      this.machineGroup = []
      this.partGroup = []
      this.nameGroup = []
      this.numberGroup = []
      this.locateGroup = []
      this.partType = []
      this.reasonGroup = []
      for (let i = 0; i < val.length; i++) {
        this.projectGroup.push(val[i].项目流水号)
        this.machineGroup.push(val[i].机床流水号)
        this.partGroup.push(val[i].组件流水号)
        this.nameGroup.push(val[i].名称)
        this.numberGroup.push(val[i].异常数量)
        this.locateGroup.push(val[i].货位流水号)
        this.partType.push(val[i].零件类型)
        this.reasonGroup.push(val[i].异常原因)
      }
    },
    fetchData() {
      this.getSelect(initProject, ['项目名称', '项目流水号'], 'Project') // 项目名称
    },
    searchMachine() { // 查询机床
      this.Machine = []
      this.GroupNum = []
      this.MachineValue = ''
      this.GroupNumValue = ''
      console.log(this.ProjectValue)
      if (this.ProjectValue !== '') {
        searchmachine(1, this.ProjectValue).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.Machine.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号
            })
          }
        })
      }
    },
    searchGroupList() { // 查询组号
      this.GroupNum = []
      this.GroupNumValue = ''
      searchTeam(this.MachineValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.GroupNum.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
      })
    },
    // 查询修改记录
    getAlterRecord() {
      this.loading = true
      this.tableData1 = []
      if (this.ProjectValue === '') {
        this.ProjectValue_check = 0
      } else {
        this.ProjectValue_check = 1
      }
      if (this.MachineValue === '') {
        this.MachineValue_check = 0
      } else {
        this.MachineValue_check = 1
      }
      if (this.GroupNumValue === '') {
        this.GroupNumValue_check = 0
      } else {
        this.GroupNumValue_check = 1
      }
      searchAlterRecord(this.pageCurrent, this.pageSize, this.ProjectValue_check, this.ProjectValue, this.MachineValue_check, this.MachineValue, this.GroupNumValue_check, this.GroupNumValue).then(response => {
        this.tableData1 = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
      this.getErrorRecord()
    },
    // 查询异常记录
    getErrorRecord() {
      this.loading2 = true
      this.tableData2 = []
      if (this.ProjectValue === '') {
        this.ProjectValue_check = 0
      } else {
        this.ProjectValue_check = 1
      }
      if (this.MachineValue === '') {
        this.MachineValue_check = 0
      } else {
        this.MachineValue_check = 1
      }
      if (this.GroupNumValue === '') {
        this.GroupNumValue_check = 0
      } else {
        this.GroupNumValue_check = 1
      }
      searchErrorRecord(this.pageCurrent2, this.pageSize2, this.ProjectValue_check, this.ProjectValue, this.MachineValue_check, this.MachineValue, this.GroupNumValue_check, this.GroupNumValue).then(response => {
        this.tableData2 = response.data.rows
        this.total2 = response.data.total
        this.loading2 = false
      })
    },
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.PageSize = val
      this.getAlterRecord()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.getAlterRecord()
    },
    handleSizeChange2(val) {
      this.PageCurrent2 = 1
      this.PageSize2 = val
      this.getErrorRecord()
    },
    handleCurrentChange2(val) {
      this.PageCurrent2 = val
      this.getErrorRecord()
    },
    handleSizeChange3(val) {
      this.PageCurrent3 = 1
      this.PageSize3 = val
      this.getReplacement()
    },
    handleCurrentChange3(val) {
      this.PageCurrent3 = val
      this.getReplacement()
    },
    // 查询补投单
    getReplacement() {
      this.loading3 = true
      this.tableData3 = []
      if (this.repleacecard === '') {
        this.repleacecard_check = 0
      } else {
        this.repleacecard_check = 1
      }
      searchReplacementCard(this.pageCurrent3, this.pageSize3, this.repleacecard_check, this.repleacecard).then(response => {
        this.tableData3 = response.data.rows
        this.total3 = response.data.total
        this.loading3 = false
      })
    },
    addCard() {
      if (this.HouseNumber === '') {
        this.$message.error('请选择仓库')
      } else {
        addReplacementCard(this.people, this.HouseNumber).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.getReplacement()
          } else {
            this.$message.error('删除失败')
          }
        })
      }
    },
    BasicShow() {
      if (this.radio === 1) {
        this.altershow = true
        this.errorshow = false
      } else if (this.radio === 2) {
        this.altershow = false
        this.errorshow = true
      }
    },
    searchTable4(row) {
      this.cardNumber = row.补投单流水号
      this.getdetail()
    },
    submitCardDetail() {
      if (this.cardNumber === '') {
        this.$message.error('请选择领料单')
      } else {
        addCardDetail(this.cardNumber, this.projectGroup, this.machineGroup, this.partGroup, this.nameGroup, this.numberGroup, this.locateGroup, this.partType, this.reasonGroup, this.CardDetail).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('增加成功')
            this.searchTable4()
          } else {
            this.$message.error('增加失败')
          }
        })
      }
    },
    // 查询补投单明细
    getdetail() {
      this.loading4 = true
      searchCardDetail(this.cardNumber).then(response => {
        this.tableData4 = response.data
        this.loading4 = false
      })
    },
    // 删除补投单
    deleteOfflineContract(row) { // 删除请购单
      this.$confirm('确定删除该补投单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteReplacementCard(row.补投单流水号).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.getReplacement()
          } else {
            this.$message.error('数据占用')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除补投单明细
    deleteDetail(row) {
      this.$confirm('确定删除该补投单明细?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCardDetail(row.补投单明细流水号).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.getdetail()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    doneRequestCard(row) {
      this.dialogVisibleExport = true
      this.cardNumber = row.补投单流水号
      this.inbondCard[0] = row.补投单编号
      this.inbondCard[1] = row.姓名
      this.inbondCard[2] = row.补投时间.split(' ')[0]
      this.inbondCard[3] = row.仓库名称
      searchCardDetail(this.cardNumber).then(response => {
        this.tableData4 = response.data
      })
    },
    // 打印请购单
    printCard() {
      const htmlNode = $('#print').html() // #print为需要打印的dom节点id
      const body = $('body')
      body.children().hide()
      const printNode = $(htmlNode)
      body.append(printNode)
      window.print()
      body.children().not('script').show()
      printNode.remove()
    }
  }
}
</script>

<style scoped>
  .tg  {border-collapse:collapse;border-spacing:0;}
  .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
</style>
