<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-row style="margin-bottom: 10px">
          <span>物料名称:</span>
          <el-input v-model="materialName" placeholder="物料名称" size="small" clearable/>
          <span>物料规格:</span>
          <el-input v-model="materialSpec" placeholder="物料规格" size="small" clearable/>
          <span>物料型号:</span>
          <el-input v-model="materialModel" placeholder="物料型号" size="small" clearable/>
        </el-row>
        <el-row style="">
          <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;searchTable()">查询</el-button>
        </el-row>
      </div>
      <div>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%;max-height: 460px;"
          height="460"
          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="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.物料名称 }}
            </template>
          </el-table-column>
          <el-table-column label="物料型号" min-width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.物料型号 }}
            </template>
          </el-table-column>
          <el-table-column label="物料规格" min-width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.物料规格 }}
            </template>
          </el-table-column>
          <el-table-column label="供货商" min-width="150" 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="70" align="center">
            <template slot-scope="scope">
              {{ scope.row.当前库存量 }}
            </template>
          </el-table-column>
          <el-table-column label="安全库存量" min-width="150" 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="cancelEdit1(scope.row)">取消</el-button>
              </template>
              <span v-else>{{ scope.row.安全库存量 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设置" min-width="70" align="center">
            <template slot-scope="scope">
              <el-tooltip :open-delay="1000" effect="dark" content="设置安全库存量" placement="top">
                <el-button v-if="scope.row.changeSafeValue" type="mini" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit1(scope.row)">确定</el-button>
                <el-button
                  v-else
                  type="warning"
                  size="mini"
                  plain
                  icon="el-icon-edit"
                  @click="scope.row.changeSafeValue=!scope.row.changeSafeValue">设置</el-button>
              </el-tooltip>
            </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:800px"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-card>

    <el-card>
      <div slot="header">
        <span>采购明细表名称:</span>
        <el-input v-model="purchasingDetailsForm" placeholder="采购明细表名称" size="small" clearable/>
        <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-button
          type="primary"
          size="small"
          style="margin-left: 10px"
          @click="addpurchasingDetailsForm">创建采购明细表</el-button>
        <el-tooltip :open-delay="1000" effect="dark" content="将勾选的物料库中物料选入到选中的采购明细表" placement="top">
          <el-button
            :disabled="Number(whetherToAllocate) === 1"
            type="warning"
            size="small"
            style="margin-left: 10px"
            @click="addMateriel">选入物料</el-button>
        </el-tooltip>
      </div>
      <!--       -->
      <el-table v-loading="loading1" :data="tableData1" border style="max-height: 460px;" height="300px" size="mini" highlight-current-row @row-click="searchTable2">
        <el-table-column label="分配状态" align="center" min-width="170">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.是否分配)===0" type="warning" size="small">未分配</el-tag>
            <el-tag v-if="parseInt(scope.row.是否分配)===1" type="success" size="small">已分配</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="表单编号" align="center" min-width="170">
          <template slot-scope="scope">
            {{ scope.row.表单编号 }}
          </template>
        </el-table-column>
        <el-table-column label="表单名称" align="center" min-width="170">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input v-model="scope.row.表单名称" style="width:120px;margin-right:3px" clearable size="mini" width="120"/>
            </template>
            <span v-else>{{ scope.row.表单名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请人" align="center" min-width="170">
          <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-popover v-model="scope.row.visible2" title="调整采购任务" placement="top" width="180">
              <div style="text-align: right; margin: 0">
                <el-select v-model="PersonValue" style="width:150px" placeholder="人员" size="small" filterable clearable>
                  <el-option
                    v-for="item in Person"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <el-button type="primary" size="mini" style="margin:10px 50px 0px 20px" @click="scope.row.visible2 = false;tiaoZheng()">确定</el-button>
              </div>
              <el-button v-if="!scope.row.edit" slot="reference" :disabled="Number(scope.row.是否分配)===1" type="primary" icon="el-icon-tickets" plain size="mini" style="margin-right:10px" @click="scope.row.visible2 = true;getPeople()">分配</el-button>
            </el-popover>
            <el-button v-if="scope.row.edit" type="text" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>
            <el-button v-if="scope.row.edit" class="cancel-btn" size="mini" type="text" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
            <el-button v-else :disabled="Number(scope.row.是否分配)===1" type="warning" size="mini" icon="el-icon-edit" plain @click="scope.row.edit=!scope.row.edit">编辑</el-button>
            <el-button v-if="!scope.row.edit" :disabled="Number(scope.row.是否分配)===1" type="danger" size="mini" icon="el-icon-delete" plain @click="openDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 10px 0;">
        <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>
      <h3>合同详细信息</h3>
      <el-table v-loading="" :data="tableData2" border style="max-height: 500px;" height="450px" size="mini">
        <el-table-column label="序号" type="index" align="center" width="110"/>
        <el-table-column label="表单编号" align="center" width="110">
          <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.数量" :disabled="Number(whetherToAllocate) === 1" size="mini" style="width:70px" @change="updateNumber(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="150" prop="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.备注" :disabled="Number(whetherToAllocate) === 1" size="mini" style="width:120px" @change="updateNumber(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button :disabled="Number(whetherToAllocate) === 1" type="danger" plain size="mini" icon="el-icon-delete" @click="deleteMateriel(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-el-drag-dialog :title="title" :visible.sync="dialogVisible" center style="min-height: 300px" width="450px">
        <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px">
          <el-form-item label="采购表单名称" prop="采购表单名称">
            <el-input v-model="form.采购表单名称" size="small"/>
          </el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-check"
            @click="submitaddpurchasingDetailsForm">确定</el-button>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { searchInventoryNum, submitaddpurchasingdetailsform, searchpurchasingDetailsForm, confirmEditpurchasingDetailsForm, openDeletepurchasingDetailsForm, addmateriel, searchtable2, setSafeValue, updateNumber, getperson, tiaozheng, deletematerial } from '@/api/ManufacturingCenter/CreateWarehousePurchasing'
import { mapGetters } from 'vuex'
export default {
  name: '', // 创建仓库采购
  data() {
    return {
      visible2: false,
      dialogVisible: false, // 新增明细表弹出框
      title: '', // 新增明细表标题
      form: {
        采购表单名称: ''
      },
      rules: { // 离线合同表单验证规则
        采购表单名称: [{ required: true, message: '请填写采购表单名称' }]
      },
      materialName: '', // 物料名称
      materialSpec: '', // 物料规格
      materialModel: '', // 物料型号
      inventoryStateValue: '', // 库存状态
      inventoryState: [
        {
          label: '充足',
          value: 2
        },
        {
          label: '不足',
          value: 1
        }
      ], // 库存状态
      tableData: [], // 表单数据
      loading: '', // 加载表单
      total: 0, // 数据总数
      pageCurrent: 1,
      pageSize: 10,
      purchasingDetailsForm: '', // 采购明细表号
      tableData1: [], // 采购单列表
      total1: 0, // 数据总数
      pageCurrent1: 1,
      pageSize1: 10,
      loading1: '',
      applicant: '',
      formNumber: '', // 表单编号
      materielGroup: [], // 物料组
      tableData2: [], // 采购明细
      PersonValue: '', // 采购员编号
      Person: [], // 采购员
      whetherToAllocate: '' // 是否分配
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'id' // 人员编号
    ])
  },
  created() {
    this.searchTable()
    this.searchTable1()
  },
  methods: {
    // 查询采购员
    getPeople() {
      this.PersonValue = ''
      this.Person = []
      getperson().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Person.push({
            value: response.data[i].人员编号,
            label: response.data[i].姓名
          })
        }
        this.PersonValue = response.data[0].人员编号
      })
    },
    searchTable() { // 查询物料库物料
      this.loading = true
      let check2, check3
      this.materialSpec ? check2 = 1 : check2 = 0
      this.materialModel ? check3 = 1 : check3 = 0
      this.materialName ? this.check1 = 1 : this.check1 = 0
      this.inventoryStateValue ? this.check2 = 1 : this.check2 = 0
      searchInventoryNum(this.pageCurrent, this.pageSize, this.check1, this.materialName, check2, this.materialSpec, check3, this.materialModel, this.check2, this.inventoryStateValue).then(response => {
        this.tableData = response.data.rows
        this.tableData.map(v => {
          this.$set(v, 'changeSafeValue', false)
          v.原安全库存量 = v.安全库存量
          return v
        })
        this.total = response.data.total
        this.loading = false
      })
    }, // 创建采购表单
    addpurchasingDetailsForm() {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.title = '创建采购明细表'
      this.form.采购表单编号 = ''
      this.form.采购表单名称 = ''
      this.dialogVisible = true
    }, // 确认创建采购表单
    submitaddpurchasingDetailsForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          submitaddpurchasingdetailsform(this.form.采购表单名称, this.id).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('新建采购明细表成功')
            } else {
              this.$message.error('新建采购明细表失败')
            }
          })
          this.searchTable1()
          this.dialogVisible = false
        }
      })
    },
    cancelEdit1(row) { // 取消设置
      row.安全库存量 = row.原安全库存量
      row.changeSafeValue = false
      this.$message('取消修改')
    },
    confirmEdit1(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('设置失败')
        }
      })
    },
    // 查询采购明细单
    searchTable1() {
      this.tableData1 = []
      searchpurchasingDetailsForm(this.pageCurrent1, this.pageSize1, this.purchasingDetailsForm).then(response => {
        console.log(response, 222)
        // this.tableData1 = response.data.rows
        if (response.data.rows.length !== 0) {
          for (let i = 0; i < response.data.rows.length; i++) {
            this.tableData1.push({
              表单编号: response.data.rows[i].表单编号,
              表单名称: response.data.rows[i].表单名称,
              申请人: response.data.rows[i].姓名,
              检测时间: response.data.rows[i].检测时间,
              表单名称_原: response.data.rows[i].表单名称,
              表单流水号: response.data.rows[i].表单流水号,
              是否分配: response.data.rows[i].是否分配,
              edit: false,
              visible2: false
            })
          }
        }
        this.total1 = response.data.total
        this.loading1 = false
      })
    }, // 取消编辑
    cancelEdit(index, row) {
      row.edit = false
      row.表单名称 = this.tableData1[index].表单名称
      this.$message('取消修改')
    }, // 确认编辑
    confirmEdit(row) {
      confirmEditpurchasingDetailsForm(row.表单名称, row.表单流水号).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('编辑成功')
        } else {
          this.$message.error('编辑失败')
        }
      })
      this.searchTable1()
      row.edit = false
    },
    updateNumber(row) {
      updateNumber(row.id, row.数量, row.备注).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('编辑成功')
        } else {
          this.$message.error('编辑失败')
        }
      })
    },
    openDelete(row) {
      openDeletepurchasingDetailsForm(row.表单流水号).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
      })
      this.searchTable1()
    }, // 选入物料
    addMateriel() {
      addmateriel(this.formNumber, this.materielGroup).then(response => {
        if (response.data[0].result === '1') {
          searchtable2(this.formNumber).then(response => {
            console.log(response.data)
            this.tableData2 = response.data
          })
          this.$message.success('选入物料信息成功')
        } else {
          this.$message.error('选入物料信息失败')
        }
      })
    }, // 查询表单明细
    searchTable2(row) {
      this.formNumber = row.表单流水号
      this.tableData2 = []
      this.whetherToAllocate = row.是否分配
      searchtable2(row.表单流水号).then(response => {
        console.log(response.data)
        this.tableData2 = response.data
      })
    }, // 调整采购计划
    tiaoZheng() {
      tiaozheng(this.formNumber, this.PersonValue).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('分配成功')
        } else {
          this.$message.error('分配失败')
        }
      })
      this.searchTable1()
    }, // 移除物料明细
    deleteMateriel(row) {
      deletematerial(row.id).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('移除成功')
        } else {
          this.$message.error('移除失败')
        }
      })
    },
    // 勾选物料
    handleSelectionChange(val) {
      this.materielGroup = []
      for (let i = 0; i < val.length; i++) {
        this.materielGroup.push(val[i].物料流水号)
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    },
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.pageCurrent1 = 1
      this.searchTable1()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable1()
    }
  }
}
</script>

<style scoped>

  .offlineContract td{
    height: 40px;
    text-align: center;
  }
  .el-card{
    margin-bottom: 1px;
  }
  .el-date-editor{
    width:150px;
  }
  .el-select{
    width:195px
  }
  .el-input{
    width:195px
  }
  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>
