<template>
  <el-dialog :visible.sync="dialog"
             :title="title"
             width="450px"
             :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">

      <el-form-item label="物料编码" prop="item">
        <el-select v-model="form.item" clearable @focus="getItem" value-key="id" filterable placeholder="请选择物料"
                   style="width: 250px;">
          <el-option
            v-for="item in items"
            :key="item.id"
            :label="item.code"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="线边库区" prop="area">
        <el-select v-model="form.area" clearable value-key="id" placeholder="请选择"
                   style="width: 250px;" @change="getPointByArea(form.area)">
          <el-option
            v-for="area in KuQuList"
            :key="area.id"
            :label="area.name"
            :value="area.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="线边点位" prop="point">
        <el-select v-model="form.point" clearable value-key="id" placeholder="请选择"
                   style="width: 250px;">
          <el-option
            v-for="point in points"
            :key="point.id"
            :label="point.name"
            :value="point"
          />
        </el-select>
      </el-form-item>


    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="itemOutCancel">取 消</el-button>
    <el-button type="primary" @click="itemOutConfirm('form')">确 定</el-button>
    </span>


  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'
import {queryPointList} from "@/api/point";
import CRUD from "@crud/crud";
import {getItems} from "@/api/item";
import stockUrl from "@/api/stock"


export default {
  mixins: [crud],
  data() {
    return {
      title: '满料出库',
      items: [],
      areas: [],
      points: [],
      KuQuList: [{
        code: '2F产线叫料',
        name: '2F产线叫料'
      },
        {
          code: '2F产线叫料2',
          name: '2F产线叫料2'
        }],
      rules: {
        item: [
          {required: true, message: '物料必填', trigger: 'blur'}
        ],
        area: [
          {required: true, message: '线边库区必填', trigger: 'blur'}
        ],
        point: [
          {required: true, message: '线边点位必填', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    itemOutCancel() {
      this.dialog = false
      this.$refs['form'].resetFields();
    },
    getItem() {
      getItems({enabled: true, size: 100}).then(res => {
        this.items = res.content.map(function (obj) {
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },
    getPointByArea(areaName) {
      queryPointList({areaName}).then(res => {
        this.points = res
      })
    },
    itemOutConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let CallStock = {
            areaName: '1F存储区,2F齐套C区',
            pointCode: this.form.point.code,
            itemCode: this.form.item.code,
            scene: 2//1-空;2-满
          }
          stockUrl.callStock(CallStock).then(res => {
            if (res.status = 200) {
              this.itemOutCancel();
              this.$parent.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.SUCCESS);
              this.$parent.shuaxin();
            } else {
              this.$parent.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR);
            }
          })
        }
      });
    }


  }

}
</script>

<style scoped>
.java.hljs {
  color: #444;
  background: #ffffff !important;
}

::v-deep .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
</style>
