<template>
  <div class="app-container">
    <el-card>
      <span>物料名称:</span>
      <el-input v-model="materialName" placeholder="物料名称" size="small" clearable/>
      <span>库存状态:</span>
      <el-select v-model="inventoryStateValue" placeholder="库存状态" size="small" clearable>
        <el-option
          v-for="item in inventoryState"
          :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="pageCurrent1=1;pageSize1=10;total1=0;searchTable1()">查询</el-button>
    </el-card>

    <el-card>
      <el-table
        v-loading="loading1"
        :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="库存状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.库存是否不足)===1" type="danger" size="small">不足</el-tag>
            <el-tag v-else type="success" size="small">充足</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="物料名称" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column label="物料型号" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
        <el-table-column label="物料规格" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <el-table-column label="供货商" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.供货商 }}
          </template>
        </el-table-column>
        <el-table-column label="当前库存量" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.当前库存量 }}
          </template>
        </el-table-column>
        <el-table-column label="安全库存量" min-width="200" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.changeSafeValue">
              <el-input v-model="scope.row.安全库存量" class="edit-input" size="mini"/>
              <el-button class="cancel-btn" size="mini" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
            </template>
            <span v-else>{{ scope.row.安全库存量 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设置" min-width="100" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.changeSafeValue" type="mini" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
            <el-button
              v-else
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="scope.row.changeSafeValue=!scope.row.changeSafeValue">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize1"
          :total="total1"
          style="display:inline-block;width:50%"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"/>
      </div>
    </el-card>

    <el-card>
      <el-row>
        <span>请购单号：</span>
        <el-input v-model="PurchaseOrder" size="small" style="width: 200px" placeholder="请购单号" clearable/>
        <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="pageCurrent2=1;pageSize2=10;total2=0;searchTable2()">查询</el-button>
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left: 15px" @click="handleAdd()">创建</el-button>
        <el-button
          type="warning"
          size="small"
          icon="el-icon-download"
          style="margin-left: 10px"
          @click="addMateriel">选入物料</el-button>
      </el-row>
    </el-card>

    <el-card>
      <el-table :data="tableData2" border style="max-height: 300px;" height="300px" size="mini" highlight-current-row @row-click="searchTable3">
        <el-table-column label="请购单状态" align="center" width="150">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.请购单状态)===1" type="warning" size="small">编辑中</el-tag>
            <el-tag v-if="parseInt(scope.row.请购单状态)===2" type="primary" size="small">已导出</el-tag>
            <el-tag v-if="parseInt(scope.row.请购单状态)===3" type="primary" size="small">已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="请购单号" align="center">
          <template slot-scope="scope">
            {{ scope.row.请购单编号 }}
          </template>
        </el-table-column>
        <el-table-column label="请购人" align="center">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column label="请购时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.请购时间 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350px" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" icon="el-icon-download" @click="exportTable('QG')">导出</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-left: 15px" @click="handleDelete(scope.row)">作废</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 10px 0;">
        <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-table :data="tableData3" 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">
            <el-input v-model="scope.row.数量" size="mini" style="width:70px" @change="update(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="用途" align="center" min-width="100">
          <template slot-scope="scope">
            <el-input v-model="scope.row.用途" size="mini" style="width:150px" @change="update(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteMateriel(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center style="min-height: 300px" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
        <el-form-item label="请购单编号" prop="请购单编号">
          <el-input
            v-model="form.请购单编号"
            size="small"
            style="width:200px"/>
        </el-form-item>

        <el-form-item label="请购人">
          <el-input
            v-model="name"
            size="small"
            readonly
            style="width:200px"/>
        </el-form-item>

        <el-form-item label="请购时间" prop="请购时间">
          <el-date-picker
            v-model="form.请购时间"
            size="small"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取消</el-button>
        <el-button v-show="title==='增加'" type="primary" @click="submitAdd('form')">确定</el-button>
        <el-button v-show="title==='编辑'" type="primary" @click="submitEdit('form')">确定</el-button>
      </div>
    </el-dialog>
    <table id="QG" cellspacing="0px" border align="center" style="display: none">
      <thead>
        <tr id="tableHead">
          <th>请购单编号</th>
          <th>物料名称</th>
          <th>物料规格</th>
          <th>物料型号</th>
          <th>数量</th>
          <th>用途</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(list, index) in tableData3" :key="index">
          <td align="center"> {{ list.请购单编号 }}</td>
          <td>{{ list.物料名称 }}</td>
          <td>{{ list.物料规格 }}</td>
          <td align="center">{{ list.物料型号 }}</td>
          <td>{{ list.数量 }}</td>
          <td>{{ list.用途 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { searchInventoryNum, searchOfflineContract, addData, editData, deleteData, searchMateriel, update,
  addMateriel, deleteMateriel, setSafeValue } from '@/api/WorkshopProcurement/OfflineContract1'
import { mapGetters } from 'vuex'
import { getExplorer, method5, Cleanup } from '@/vendor/exportExcel'

export default {
  data() {
    return {
      loading1: false,
      title: '',
      check1: 0,
      check2: 0,
      check3: 0,
      materialName: '',
      inventoryStateValue: '', // 库存状态
      inventoryState: [
        {
          label: '充足',
          value: 2
        },
        {
          label: '不足',
          value: 1
        }
      ],
      tableData1: [],
      pageCurrent1: 1,
      pageSize1: 10,
      total1: 0,
      PurchaseOrder: '', // 请购单编号
      PurchaseNumber: '',
      tableData2: [],
      total2: 0,
      pageCurrent2: 1,
      pageSize2: 10,
      dialogFormVisible: false,
      RequisitionList: '',
      form: {
        请购单编号: '',
        请购时间: ''
      },
      rules: {
        请购单编号: [{ required: true, message: '请输入请购单编号', trigger: 'blur' }],
        请购时间: [{ required: true, message: '请选择请购时间', trigger: 'change' }]
      },
      tableData3: [],
      materielGroup: [], // 物料流水号组
      partGroup: [] // 离线合同明细流水号组
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id' // 人员编号
    ])
  },
  methods: {
    searchTable1() { // 查询物料库物料
      this.loading1 = true
      this.materialName ? this.check1 = 1 : this.check1 = 0
      this.inventoryStateValue ? this.check2 = 1 : this.check2 = 0
      searchInventoryNum(this.pageCurrent1, this.pageSize1, this.check1, this.materialName, this.check2, this.inventoryStateValue).then(response => {
        this.tableData1 = response.data.rows
        this.tableData1.map(v => {
          this.$set(v, 'changeSafeValue', false)
          v.原安全库存量 = v.安全库存量
          return v
        })
        this.total1 = response.data.total
        this.loading1 = false
      })
    },
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.pageCurrent1 = 1
      this.searchTable1()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable1()
    },
    handleSelectionChange(val) {
      this.materielGroup = []
      for (let i = 0; i < val.length; i++) {
        this.materielGroup.push(val[i].物料流水号)
      }
    },
    cancelEdit(row) { // 取消设置
      row.安全库存量 = row.原安全库存量
      row.changeSafeValue = false
      this.$message('取消修改')
    },
    confirmEdit(row) { // 确认设置
      Number(row.安全库存量) ? row.安全库存量 = Number(row.安全库存量) : row.安全库存量 = 0
      setSafeValue(row.物料流水号, parseInt(row.安全库存量)).then(response => {
        if (response.data[0].result === '1') {
          row.changeSafeValue = false
          this.$message.success('设置成功')
          this.searchTable1()
        } else {
          this.$message.error('设置失败')
        }
      })
    },
    searchTable2() { // 查询请购单列表
      this.PurchaseOrder ? this.check3 = 1 : this.check3 = 0
      searchOfflineContract(this.pageCurrent2, this.pageSize2, this.check3, this.PurchaseOrder).then(response => {
        this.tableData2 = response.data.rows
        this.total2 = response.data.total
      })
    },
    handleSizeChange2(val) { // 请购单列表分页
      this.pageSize2 = val
      this.searchTable2()
    },
    handleCurrentChange2(val) { // 请购单列表分页
      this.pageCurrent2 = val
      this.searchTable2()
    },
    exportTable(tableid) {
      if (this.tableData3.length === 0) {
        this.$message.warning('暂无数据')
      } else {
        getExplorer()
        method5(tableid)
        Cleanup()
      }
    },
    update(row) {
      update(row.请购单明细流水号, row.数量, row.用途).then(response => {})
    },
    handleAdd() {
      this.addForm('form', [this.dialogFormVisible = true, this.title = '增加'])
    },
    submitAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addData(this.form.请购单编号, this.id, this.form.请购时间).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('增加成功')
              this.dialogFormVisible = false
              this.searchTable2()
            } else { this.$message.error('增加失败') }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleEdit(row) { // 弹出单据编辑
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.title = '编辑'
      this.dialogFormVisible = true
      this.RequisitionList = row.请购单流水号
      this.form.请购单编号 = row.请购单编号
      this.form.请购时间 = row.请购时间
    },
    submitEdit(formName) { // 提交单据编辑
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editData(this.RequisitionList, this.form.请购单编号, this.form.请购时间).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('编辑成功')
              this.dialogFormVisible = false
              this.searchTable2()
            } else { this.$message.error('编辑失败') }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleDelete(row) { // 作废单据
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteData(row.请购单流水号).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('作废成功')
            this.searchTable2()
          } else { this.$message.error('作废失败') }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    cancel(formName) {
      this.form = {}
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    searchTable3(row) { // 查询请购单明细
      this.PurchaseNumber = row.请购单流水号
      searchMateriel(this.PurchaseNumber).then(response => {
        this.tableData3 = response.data
      })
    },
    addMateriel() { // 将物料选入请购单
      addMateriel(this.PurchaseNumber, this.materielGroup).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('选入成功')
          searchMateriel(this.PurchaseNumber).then(response => {
            this.tableData3 = response.data
          })
        } else { this.$message.error('选入失败') }
      })
    },
    deleteMateriel(row) { // 移除物料
      this.$confirm('确定移除该物料?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMateriel(row.请购单明细流水号).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('移除成功')
            searchMateriel(this.PurchaseNumber).then(response => {
              this.tableData3 = response.data
            })
          } else { this.$message.error('移除失败') }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消移除'
        })
      })
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin-bottom: 15px;
  }
  .el-date-editor{
    width:150px;
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  span{
    margin: 10px 0 10px 10px;
  }
  .el-tag{
    margin: 0
  }
  .searchForm .el-form-item{
    margin-bottom: 5px;
  }
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 5px;
  }
</style>
