<template>
  <div>
    <el-page-header @back="handleBack" content="审核" style="padding: 20px 20px 0 20px"></el-page-header>
    <warehousing-header page-type="examine" :details="details" />
    <sales-table :dataList="dataList" :column="column"> </sales-table>
    <div class="warehousing">
      <el-form label-position="left" label-width="120px" :model="screenForm" size="mini">
        <el-row :gutter="20">
          <el-col :xs="24" :ms="8" :lg="8">
            <el-form-item label="审核人" prop="customerNumber">
              <el-input disabled v-model="screenForm.customerNumber" placeholder="审核人" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :ms="8" :lg="8">
            <el-form-item label="审核时间" prop="changeTime">
              <el-date-picker
                disabled
                v-model="screenForm.changeTime"
                type="datetime"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :ms="24" :lg="24">
            <el-form-item label="备注" prop="approvalRemark">
              <el-input v-model="screenForm.approvalRemark" placeholder="备注" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="24" :lg="24">
            <div>
              <el-button type="primary" size="mini" @click="handelSubmit('OK')">同意</el-button>
              <el-button size="mini" @click="handelSubmit('FAIL')">驳回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import WarehousingHeader from '@/components/WarehousingHeader/WarehousingHeader'
import SalesTable from '@/components/SalesTable/SalesTable'
import { approvalCustomerStockOrder, getFrontDetail } from '@/api/stock'

export default {
  name: 'WarehouseExamine',
  props: ['detailsId', 'pageType'],
  components: {
    WarehousingHeader,
    SalesTable
  },
  data() {
    return {
      dataList: [],
      screenForm: { approvalRemark: '' },
      details: {},
      column: [
        {
          prop: 'materialName',
          label: '产品名称',
          width: '180'
        },
        {
          prop: 'materialOldNumber',
          label: '物料编码',
          width: '180'
        },
        {
          prop: 'specification',
          label: '规格型号',
          width: '300'
        },
        {
          prop: 'stockLockQty',
          label: '库存',
          width: '180'
        },
        {
          prop: 'directFlagText',
          label: '发生方向',
          width: '180'
        },
        {
          prop: 'stockChangeQty',
          label: '数量',
          width: '180'
        },
        {
          prop: 'notes',
          label: '备注'
        }
      ]
    }
  },
  created() {
    this.getFrontDetail()
  },
  methods: {
    getFrontDetail() {
      getFrontDetail({ id: this.detailsId }).then(res => {
        this.details = res.data
        res.data.orders.forEach(k => {
          k.directFlagText = k.directFlag == 1 ? '增加' : '减少'
        })
        this.dataList = res.data.orders
      })
    },
    handelSubmit(type) {
      approvalCustomerStockOrder({
        ...this.details,
        examineStatus: type,
        approvalRemark: this.screenForm.approvalRemark
      }).then(res => {
        this.$successMsg(type === 'OK' ? '审核成功' : '驳回成功')
        this.handleBack()
      })
    },
    handleBack() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.warehousing {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
}
</style>
