<template>
  <div class="app-container">
    <el-col :span="10">
      <el-card>
        <!--<span>表单号:</span>-->
        <!--<el-input v-model="formNumber" size="small" placeholder="表单号" clearable style="width:150px"/>-->
        <span>厂家:</span>
        <el-input v-model="manufacturers" size="small" placeholder="厂家或外协任务单号" style="width:160px" clearable @keyup.enter.native="pageSize=20;pageList=1;fetchData()"/>
        <!--<span>下达任务日期:</span>-->
        <!--<el-date-picker-->
        <!--v-model="time"-->
        <!--type="date"-->
        <!--size="small"-->
        <!--placeholder="选择日期"/>-->
        <el-button type="success" size="mini" icon="el-icon-search" style="margin-left:10px" @click="pageSize=10;pageList=1;fetchData()">查询</el-button>
      </el-card>
      <el-card>
        <el-table v-loading="loading2" :data="List" :row-class-name="tableData1ClassName" highlight-current-row size="mini" height="550" border @row-click="searchProcess" >
          <el-table-column label="表单号" prop="表单号" align="center" min-width="200px">
            <template slot-scope="scope">
              {{ scope.row.表单号 }}
            </template>
          </el-table-column>
          <el-table-column label="外协厂家" prop="外协厂家" align="center" min-width="200px">
            <template slot-scope="scope">
              {{ scope.row.外协厂家名称 }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px;">
          <el-pagination
            v-show="!loading2"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </el-card>
    </el-col>
    <el-col :span="14">
      <el-card>
        <el-button :disabled="loading=false" type="warning" size="mini" icon="el-icon-arrow-down" style="margin-left:10px" @click="getSpareParts">收货</el-button>
        <el-table v-loading="loading" :data="List3" border stripe size="mini" highlight-current-row height="595" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column
            :selectable="selectable"
            type="selection"
            align="center"
            width="55"/>
          <el-table-column label="收货状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.到货状态===1" type="success" size="small" style="margin: 0px">已收货</el-tag>
              <el-tag v-else type="info" size="small" style="margin: 0px">未收货</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">-->
          <!--<template slot-scope="scope">-->
          <!--{{ scope.row.外协工序 }}-->
          <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { getTable, Arrival, getParts } from '@/api/Outsourcing/OutsourcingTaskQuery'
import { mapGetters } from 'vuex'
import elInput from 'element-ui/packages/input'

export default {
  components: {
    elInput
  },
  data() {
    return {
      工艺计划流水号: [],
      OutsouringNumber: [],
      wancheng: '',
      gongxulsh: [],
      bianliang: [],
      card: false,
      费用: '',
      加工价格合计: 0,
      材料价格合计: 0,
      其他价格合计: 0,
      运费: 0,
      总计: 0,
      大写金额: '',
      任务单号: '',
      任务下达日期: '',
      外协厂家: '',
      外协员: '',
      外协员电话: '',
      联系人: '',
      联系人电话: '',
      最早时间: '',
      最晚时间: '',
      // 以上是新增的
      loading: false,
      loading1: false,
      loading2: false,
      num: null,
      num1: null,
      num2: null,
      name1: '',
      time: '',
      time1: '',
      time2: '',
      input: '',
      contrast: 3000000000000,
      contrast1: 0,
      param: 0,
      partNumber: '',
      processingPrice: null,
      materialPrice: null,
      formNumber: '',
      coOperationProcess: [],
      ManufactorNumber: null,
      ManufactorNumber1: null,
      manufacturers: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      data2: [],
      List: [],
      money: null,
      sum: 0,
      num10: [],
      title: '',
      result: 0,
      documentStatus: null,
      sign: null,
      Number: null,
      form: {
        表单号: '',
        下达任务日期: '',
        外协厂家: '',
        运费: null
      },
      rules: {
        外协厂家: [{ required: true, message: '请选择外协厂家', trigger: 'change' }],
        运费: [{ required: true, message: '请输入运费', trigger: 'blur' }]
      },
      code: 0,
      code1: 0,
      processNum: [],
      single: null,
      procedure: [],
      List1: [],
      List2: [],
      List3: [],
      Explain: '',
      freight: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      process: [[]],
      returns: [],
      零件图号: [],
      零件名称: [],
      批次数量: [],
      外协预算总价格: [],
      加工价格_成交: [],
      外协分类: [],
      材料费: [],
      材料价格_价格: [],
      其他价格: [],
      机加工开始时间: [],
      机加工结束时间: [],
      外协加工任务单明细流水号: [],
      total: null, // 总条数
      pageSize: 20, // 每页显示条数
      pageList: 1, // 后台获取页
      currentPage: 1 // 显示当前页
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading2 = true
      this.List = []
      this.List3 = []
      var check
      this.manufacturers ? check = 1 : check = 0
      getTable(check, this.manufacturers, this.pageList, this.pageSize).then(response => {
        this.total = parseInt(response.data.total)
        this.List = response.data.rows
      })
      this.loading2 = false
    },
    // 控制某行是否可选
    selectable(row, index) {
      return parseInt(row.到货状态) !== 1 // 已经到货
    },
    // 查询
    searchProcess(row) {
      this.Number = row.外协加工任务单流水号
      this.loading = true
      this.List3 = []
      getParts(row.外协加工任务单流水号).then(response => {
        this.List3 = response.data
        this.loading = false
      })
    },
    handleSelectionChange(val) {
      this.OutsouringNumber = []
      this.工艺计划流水号 = []
      for (let i = 0; i < val.length; i++) {
        this.OutsouringNumber.push(val[i].外协加工任务单明细流水号)
        this.工艺计划流水号.push(val[i].工艺计划流水号)
      }
    },
    // 收货
    getSpareParts() {
      if (this.OutsouringNumber.length !== 0) {
        this.loading = true
        Arrival(this.Number, this.OutsouringNumber, this.工艺计划流水号).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('到货成功')
            this.fetchData()
            getParts(this.Number).then(response => {
              this.List3 = response.data
              this.loading = false
            })
          } else {
            this.$message.error('到货失败')
          }
        })
      } else {
        this.$message.warning('请选择零件')
      }
    },
    tableData1ClassName({ row, rowIndex }) {
      row.index = rowIndex
      if (row.到货状态 === '1') {
        return 'WXDHdh'
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
  .el-card{
    margin-bottom: 0px;
  }
</style>
<style>
  .WXDHdh{
    background: #9bd7fc !important;
  }
  td{
    width: 100px;
    height: 30px;
    text-align:center;
  }
  #tableHead td{
    border:1px solid black;
  }
  .tableData td{
    border:1px solid black;
  }
  #tableFoot td{
    border:1px solid black;
  }
  .tbodyHead td{
    text-align: left;
  }
  .foot td{
    width: 7%;
    text-align: left;
  }
</style>
<style>
  .el-table .chajia {
    background: #EBF953;
  }
  .el-table .chengjiao {
    background: #AEF199;
  }
  .el-input__inner {
    height: 30px;
  }
</style>
