<template>
  <div class="app-container">
    <el-tabs type="border-card" @tab-click="searchTable1();searchTable2()">
      <el-tab-pane label="标准件和外购件">
        <el-row style="margin-bottom: 10px">
          <span style="margin-left: 0">项目名称:</span>
          <el-select v-model="projectValue" placeholder="项目名称" size="small" filterable clearable style="width: 170px">
            <el-option
              v-for="item in project"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span>物料状态:</span>
          <el-cascader :options="materialStatus" v-model="materialStatusValue" size="small" change-on-select/>
          <el-button
            type="success"
            size="small"
            icon="el-icon-search"
            style="margin-left: 10px"
            @click="pageCurrent1=1;pageSize1=20;total1=0;searchTable1()">查询</el-button>
          <div style="float:right">
            <span style="margin-left: 0">采购员:</span>
            <el-select v-model="personValue" placeholder="采购员" size="small" style="width: 100px">
              <el-option
                v-for="item in person"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-menu"
              style="margin-left: 10px"
              @click="allocateTask1">分配</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-back"
              style="margin-left: 10px"
              @click="executeReturn1">退回</el-button>
          </div>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <span style="margin-left: 0">物料类别:</span>
          <el-select
            v-model="MaterialCategoryValue"
            style="width:150px"
            placeholder="请选择"
            size="small"
            clearable
            @change="searchMaterialVariety">
            <el-option
              v-for="item in MaterialCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span>物料品种:</span>
          <el-select
            v-model="MaterialVarietyValue"
            style="width:150px"
            placeholder="请选择"
            size="small"
            clearable>
            <el-option
              v-for="item in MaterialVariety"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span>物料名称:</span>
          <el-input v-model="materialName" placeholder="物料名称" style="width:170px" size="small" clearable/>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-table v-loading="" :data="tableData1" size="mini" style="max-height: 600px" height="600px" border stripe @selection-change="handleSelectionChange1">
            <el-table-column :selectable="selectable" align="center" type="selection"/>
            <el-table-column align="center" label="采购情况" min-width="80px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.人员编号===''" type="primary" size="small">未分配</el-tag>
                <el-tag v-if="parseInt(scope.row.询价状态编号)===1&&scope.row.人员编号!==''" type="warning" size="small">未询价</el-tag>
                <el-tag v-if="parseInt(scope.row.询价状态编号)===3&&parseInt(scope.row.采购状态编号)!==3" type="success" size="small">已询价</el-tag>
                <el-tag v-if="parseInt(scope.row.采购状态编号)===3" type="info" size="small">已采购</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="项目名称" min-width="150px">
              <template slot-scope="scope">
                {{ scope.row.项目名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="机床图号" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.机床图号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="组号" min-width="80px">
              <template slot-scope="scope">
                {{ scope.row.组号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料类别" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.物料类别 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料品种" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.物料品种 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="图号" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.物料型号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="名称" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.物料名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="规格" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.物料规格 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量" min-width="80px">
              <template slot-scope="scope">
                {{ scope.row.零件数量 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="备注" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.备注 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="供货商" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.供货商 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="计划到货时间" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.物料计划到货时间.split(' ')[0] }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="生产分配时间" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.操作日期.split(' ')[0] }}
              </template>
            </el-table-column>
            <el-table-column :filters="person" :filter-method="filterHandler" align="center" label="采购员" min-width="80px" prop="buyer">
              <template slot-scope="scope">
                {{ scope.row.姓名 ? scope.row.姓名 : '—' }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div class="block">
          <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-tab-pane>
      <el-tab-pane label="基本件">
        <el-row style="margin-bottom: 10px">
          <span style="margin-left: 0">项目名称:</span>
          <el-select v-model="projectValue" placeholder="项目名称" size="small" filterable clearable style="width: 170px">
            <el-option
              v-for="item in project"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <span>物料状态:</span>
          <el-cascader :options="materialStatus" v-model="materialStatusValue" size="small" change-on-select/>
          <el-button
            type="success"
            size="small"
            icon="el-icon-search"
            style="margin-left: 10px"
            @click="pageCurrent2=1;pageSize2=20;total2=0;searchTable2()">查询</el-button>
          <div style="float:right">
            <span style="margin-left: 0">采购员:</span>
            <el-select v-model="personValue" placeholder="采购员" size="small" style="width: 100px">
              <el-option
                v-for="item in person"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-menu"
              style="margin-left: 10px"
              @click="allocateTask2">分配</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-back"
              style="margin-left: 10px"
              @click="executeReturn2">退回</el-button>
          </div>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-table v-loading="" :data="tableData2" size="mini" style="max-height: 600px" height="600px" border stripe @selection-change="handleSelectionChange2">
            <el-table-column :selectable="selectable" align="center" type="selection"/>
            <el-table-column align="center" label="采购情况" min-width="80px">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.人员编号===''" type="primary" size="small">未分配</el-tag>
                <el-tag v-if="parseInt(scope.row.询价状态编号)===1&&scope.row.人员编号!==''" type="warning" size="small">未询价</el-tag>
                <el-tag v-if="parseInt(scope.row.询价状态编号)===3&&parseInt(scope.row.采购状态编号)!==3" type="success" size="small">已询价</el-tag>
                <el-tag v-if="parseInt(scope.row.采购状态编号)===3" type="info" size="small">已采购</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="项目名称" min-width="150px">
              <template slot-scope="scope">
                {{ scope.row.项目名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="机床图号" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.机床图号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="组号" min-width="80px">
              <template slot-scope="scope">
                {{ scope.row.组号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="图号" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="名称" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="规格" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.规格 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="材料" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.材料 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量" min-width="80px">
              <template slot-scope="scope">
                {{ scope.row.数量 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="备注" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.备注 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="供货商" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.供货商 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="计划到货时间" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.物料计划到货时间.split(' ')[0] }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="生产分配时间" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.操作日期.split(' ')[0] }}
              </template>
            </el-table-column>
            <el-table-column :filters="person" :filter-method="filterHandler" align="center" label="采购员" min-width="80px" prop="buyer">
              <template slot-scope="scope">
                {{ scope.row.姓名 ? scope.row.姓名 : '—' }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div class="block">
          <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-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { initMaterialCategory, initMaterialVariety, initProject, initBuyer, searchTable1, searchTable2, allocateTask1, allocateTask2, executeReturn1, executeReturn2 } from '@/api/PurchasingCenter/PurchaseTaskAllocate'
import { mapGetters } from 'vuex'

export default {
  name: '', // 采购任务分配
  data() {
    return {
      MaterialCategoryValue: '', // 物料类别
      MaterialCategory: [], // 物料类别数组
      MaterialVarietyValue: '', // 物料品种
      MaterialVariety: [], // 物料品种数组
      projectValue: '',
      project: [],
      materialName: '',
      materialStatusValue: [0], // 物料状态
      materialStatus: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '未分配'
        },
        {
          value: 2,
          label: '已分配',
          children: [{
            value: 3,
            label: '未询价'
          }, {
            value: 4,
            label: '已询价',
            children: [{
              value: 5,
              label: '未采购'
            }, {
              value: 6,
              label: '已采购'
            }]
          }]
        }
      ], // 物料状态
      personValue: '',
      person: [],
      check1: 0,
      check2: 0,
      check3: 0,
      check4: 0,
      tableData1: [],
      tableData2: [],
      standardAndPurchase: [],
      basic: [],
      groupAndPart: [],
      groupAndPartBasic: [],
      pageCurrent1: 1,
      pageSize1: 20,
      total1: 0,
      pageCurrent2: 1,
      pageSize2: 20,
      total2: 0
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'id'
    ])
  },
  created() {
    this.searchTable1() // 查表1
    this.fetchData() // 初始化数据
  },
  methods: {
    fetchData() { // 初始化
      initProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.project.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号
          })
        }
      })
      initBuyer().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.person.push({
            text: response.data[i].姓名,
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
      this.getSelect(initMaterialCategory, ['物料类别', '物料类别流水号'], 'MaterialCategory', [0, this.DepartmentValue])
    },
    searchMaterialVariety() { // 初始化物料品种
      this.MaterialVariety = []
      this.MaterialVarietyValue = ''
      this.getSelect(initMaterialVariety, ['物料品种', '物料品种流水号'], 'MaterialVariety', this.MaterialCategoryValue)
    },
    searchTable1() { // 查询标准件和外购件
      this.MaterialCategoryValue ? this.check1 = 1 : this.check1 = 0
      this.MaterialVarietyValue ? this.check2 = 1 : this.check2 = 0
      this.projectValue ? this.check3 = 1 : this.check3 = 0
      this.materialName ? this.check4 = 1 : this.check4 = 0
      searchTable1(this.pageCurrent1, this.pageSize1, this.check1, this.MaterialCategoryValue, this.check2, this.MaterialVarietyValue, this.check3, this.projectValue, this.check4, this.materialName, this.materialStatusValue[this.materialStatusValue.length - 1]).then(response => {
        this.tableData1 = response.data.rows
        console.log(response.data.rows)
        this.total1 = response.data.total
      })
    },
    searchTable2() { // 查询基本件
      this.projectValue ? this.check3 = 1 : this.check3 = 0
      searchTable2(this.pageCurrent2, this.pageSize2, this.check3, this.projectValue, this.materialStatusValue[this.materialStatusValue.length - 1]).then(response => {
        this.tableData2 = response.data.rows
        this.total2 = response.data.total
      })
    },
    handleSelectionChange1(val) { // 标准件和外购件多选
      this.standardAndPurchase = []
      this.groupAndPart = []
      for (let i = 0; i < val.length; i++) {
        this.standardAndPurchase.push(val[i].标准件和外购件流水号)
        this.groupAndPart.push(val[i].组件零件流水号)
      }
    },
    handleSelectionChange2(val) { // 基本件多选
      this.basic = []
      this.groupAndPartBasic = []
      for (let i = 0; i < val.length; i++) {
        this.basic.push(val[i].基本件流水号)
        this.groupAndPartBasic.push(val[i].组件零件基本件流水号)
      }
    },
    selectable(row) { // 多选禁用
      return row.人员编号 === '' || row.人员编号 === null
    },
    allocateTask1() { // 标准件和外购件分配任务
      if (!this.personValue) {
        this.$message.error('请选择采购员')
      } else if (this.standardAndPurchase.length === 0) {
        this.$message.error('请选择需分配的物料')
      } else {
        this.$confirm('此操作执行后不可修改，是否确定分配?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          allocateTask1(this.standardAndPurchase, this.personValue).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('操作成功')
              this.searchTable1()
            } else { this.$message.error('操作失败') }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    },
    allocateTask2() { // 基本件分配任务
      if (!this.personValue) {
        this.$message.error('请选择采购员')
      } else if (this.basic.length === 0) {
        this.$message.error('请选择需分配的零件')
      } else {
        this.$confirm('此操作执行后不可修改，是否确定分配?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          allocateTask2(this.basic, this.personValue).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('操作成功')
              this.searchTable2()
            } else { this.$message.error('操作失败') }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    },
    filterHandler(value, row) {
      return parseInt(row['人员编号']) === parseInt(value)
    },
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.pageCurrent1 = 1
      this.searchTable1()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable1()
    },
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.pageCurrent2 = 1
      this.searchTable2()
    },
    handleCurrentChange2(val) {
      this.pageCurrent2 = val
      this.searchTable2()
    },
    executeReturn1() { // 退回标准件和外购件
      if (this.standardAndPurchase.length === 0) {
        this.$message.error('请选择需退回的物料')
      } else {
        this.$confirm('此操作执行后不可修改，是否确定退回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          executeReturn1(this.standardAndPurchase, this.groupAndPart).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('操作成功')
              this.searchTable1()
            } else { this.$message.error('操作失败') }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    },
    executeReturn2() { // 退回基本件
      if (this.basic.length === 0) {
        this.$message.error('请选择需退回的零件')
      } else {
        this.$confirm('此操作执行后不可修改，是否确定退回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          executeReturn2(this.basic, this.groupAndPartBasic).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('操作成功')
              this.searchTable2()
            } else { this.$message.error('操作失败') }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    }
  }
}
</script>

<style scoped>
  .el-tag{
    margin: 0
  }
  .el-card{
    margin-bottom: 15px;
  }
  .el-select{
    width:200px
  }
  .el-input{
    width:200px
  }
  span{
    margin: 10px 0 10px 10px;
  }
</style>
