<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="stockCode">
        <el-input v-model="form.stockCode" disabled style="width: 250px;"></el-input>
      </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="returnContainerCancel('form')">取 消</el-button>
    <el-button type="primary" @click="returnContainerConfirm('form')">确 定</el-button>
    </span>


  </el-dialog>
</template>

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

export default {
  mixins: [crud],
  data() {
    return {
      title: '',
      KuQuList: [{
        code: '1F空车区',
        name: '1F空车区'
      }, {
        code: '2F空车区',
        name: '2F空车区'
      }],
      points: [],
      rules: {
        stockCode: [
          {required: true, message: '容器必填', trigger: 'blur'}
        ],
        area: [
          {required: true, message: '线边库区必填', trigger: 'blur'}
        ],
        point: [
          {required: true, message: '线边点位必填', trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    handleClose(done) {
      done()
    },
    returnContainerCancel(formName) {
      this.dialog = false
      this.$refs[formName].resetFields();
    },
    returnEntityClick(data) {
      this.title = '容器返空'
      this.form.stockCode = data.code
    },
    getPointByArea(areaName) {
      queryPointList({areaName: '2F产线'}).then(res => {
        this.points = res
      })
    },
    returnContainerConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let LineReturn = {
            areaName: this.form.area,
            pointCode: this.form.point.code,
            stockCode: this.form.stockCode
          }
          stockUrl.lineReturn(LineReturn).then(res => {
            if ( res.code == 200) {
              this.returnContainerCancel(formName);
              this.$parent.crud.notify(res.msg, CRUD.NOTIFICATION_TYPE.SUCCESS);
              this.$parent.crud.toQuery();
            } else {
              this.$parent.crud.notify(res.msg, 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>
