<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>采购单号:</span>
        <el-select v-model="purchaseOrderValue" placeholder="采购单号" size="small" clearable filterable>
          <el-option
            v-for="item in purchaseOrder"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>供应商:</span>
        <el-input v-model="supplierName0" placeholder="供应商" style="width: 200px" size="small" clearable/>
        <el-button
          type="success"
          size="small"
          icon="el-icon-search"
          style="margin-left: 10px"
          @click="pageCurrent=1;pageSize=10;total=0;searchTable()">查询</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%;max-height: 460px;"
        height="270"
        size="mini"
        highlight-current-row
        @row-click="searchTable1">
        <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="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="90" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.总价" size="mini" style="width:100px" @change="totalChange(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="下单日期" min-width="90" align="center">
          <template slot-scope="scope">
            {{ scope.row.下单日期.split(' ')[0] }}
          </template>
        </el-table-column>
        <el-table-column label="计划完成日期" min-width="90" align="center">
          <template slot-scope="scope">
            {{ scope.row.计划完成日期.split(' ')[0] }}
          </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>
      <el-table v-loading="" :data="tableData1" :summary-method="getSummaries" border style="max-height: 300px;" height="400px" size="mini" show-summary>
        <el-table-column label="状态" align="center" width="100" fixed="left">
          <template slot-scope="scope">
            <el-tag v-if="Number(scope.row.是否到货)===0" type="warning" size="small">未到货</el-tag>
            <el-tag v-if="Number(scope.row.是否到货)===1" type="primary" size="small">已到货</el-tag>
          </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="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="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.备注1 }}
          </template>
        </el-table-column>
        <el-table-column label="重量" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.重量1 }}
          </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.批次数量 * scope.row.单价 * scope.row.重量1 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-goods" @click="OpenArrival(scope.row)">到货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" title="到货" center style="min-height: 300px" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="100px">
        <el-row>
          <el-form-item label="重量" prop="重量">
            <el-input v-model="form.重量" size="small" style="width: 200px"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="单价" prop="单价">
            <el-input v-model="form.单价" size="small" style="width: 200px"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-check"
          @click="submitArrival">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>import { initPurchaseOrder, searchPurchaseOrder, searchMateriel, Arrival, totalChange } from '@/api/WorkshopProcurement/OutsourcingStockArrival'
export default {
  data() {
    return {
      purchaseOrderValue: '',
      purchaseOrder: [],
      supplierName0: '',
      totalMoney: 0,
      check: 0,
      chekc1: 0,
      num: '',
      tableData: [],
      tableData1: [],
      loading: false,
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      disable: true,
      dialogVisible: false,
      form: {
        采购计划明细流水号: '',
        重量: '',
        单价: ''
      },
      rules: {
        重量: [{ required: true, message: '请填写重量' }],
        单价: [{ required: true, message: '请填写单价' }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      initPurchaseOrder(0, this.purchaseOrderValue, 0, this.supplierName0).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.purchaseOrder.push({
            label: response.data[i].采购单号,
            value: response.data[i].采购单号
          })
        }
      })
    },
    searchTable() { // 查询外购备料
      this.loading = true
      this.purchaseOrderValue ? this.check = 1 : this.check = 0
      this.supplierName0 ? this.check1 = 1 : this.check1 = 0
      searchPurchaseOrder(this.pageCurrent, this.pageSize, this.check, this.purchaseOrderValue, this.check1, this.supplierName0).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    },
    searchTable1(row) {
      this.num = row.采购计划流水号
      this.totalMoney = 0
      searchMateriel(this.num).then(response => {
        this.tableData1 = response.data
        for (let i = 0; i < response.data.length; i++) {
          this.totalMoney += (response.data[i].批次数量 * response.data[i].重量1 * response.data[i].单价)
        }
      })
    },
    totalChange(row) {
      totalChange(row.采购计划流水号, row.总价).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('编辑成功')
        } else { this.$message.error('编辑失败') }
      })
    },
    OpenArrival(row) {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.dialogVisible = true
      this.form.采购计划明细流水号 = row.采购计划明细流水号
      this.form.重量 = row.重量1
      this.form.单价 = row.单价
    },
    submitArrival() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          Arrival(this.form.采购计划明细流水号, this.form.重量, this.form.单价).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('到货成功')
              searchMateriel(this.num).then(response => {
                this.tableData1 = response.data
                this.totalMoney = 0
                for (let i = 0; i < response.data.length; i++) {
                  this.totalMoney += (response.data[i].批次数量 * response.data[i].重量1 * response.data[i].单价)
                }
              })
              this.dialogVisible = false
            } else { this.$message.error('到货失败') }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 7) {
          sums[index] = '总重量'
          return
        } else if (index === 8) {
          const values = data.map(item => Number(item['重量1'] * item['批次数量']))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return Number(prev) + Number(curr)
              } else {
                return Number(prev)
              }
            }, 0)
            sums[index] += ' kg'
          } else {
            sums[index] = 'N/A'
          }
        } else if (index === 9) {
          sums[index] = '总价'
        } else if (index === 10) {
          sums[index] = this.totalMoney
        }
      })
      return sums
    }
  }
}
</script>

<style scoped>
  span{
    margin: 10px 0 10px 10px;
  }
</style>
