// 新增内转钢坯需求
<template>
  <div class="inwardRequirement">
    <page-title>新增需求</page-title>
    <div>
      <!-- 用车单位 -->
      <div class="requireUnit form">
        <el-form  class="demo-form-inline" label-width="80px">
          <el-form-item label="用车单位">
            <el-input
              class="inline-input"
              v-model="requireUnitName"
              disabled
            >
            </el-input>
          </el-form-item>
          <el-form-item label="炉号">
            <el-input
              class="inline-input"
              v-model="heatNo"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="需求类型">
            <el-input
              class="inline-input"
              v-model="requirementType"
              disabled
            >
            </el-input>
          </el-form-item>
        <el-form-item label="选择班别">
            <el-select
              class="inline-select"
              v-model="clazz"
            >
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.value"
            :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="选择钢种">
            <el-select
              class="inline-select"
              v-model="type"
            >
            <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.value"
            :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择规格">
            <el-select
              class="inline-select"
              v-model="model"
            >
            <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.value"
            :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <!-- 车辆我设为多选了，我觉得会省事，他们应该不希望每台车都做一次 -->
        <el-form-item label="选择车辆">
            <el-select
              class="inline-select"
              v-model="capacityId"
              multiple
            >
            <el-option
            v-for="item in optionsCapacity"
            :key="item.capacityId"
            :label="item.capacityNumber"
            :value="item.capacityId">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择装货点">
            <el-select
              class="inline-select"
              v-model="loadPoint"
            >
            <el-option
            v-for="item in optionsLoad"
            :key="item.warehouseId"
            :label="item.warehouseName"
            :value="item.warehouseId">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="选择卸货点">
            <el-select
              class="inline-select"
              v-model="unloadPoint"
            >
            <el-option
            v-for="item in optionsUnload"
            :key="item.warehouseId"
            :label="item.warehouseName"
            :value="item.warehouseId">
            </el-option>
            </el-select>
        </el-form-item>
        </el-form>
      </div>
    
    </div>
    <div class="button-box">
      <el-button type="primary" @click="makeSure">确认新增</el-button>
      <el-button type="primary" @click="cancel">返回</el-button>
    </div>
  </div>
</template>

<script>
import PageTitle from '@/components/Page/Title'
import { sjTime } from '@/utils/sharedJsFile'
import { getCookie } from '@/utils/util.js'
import { checkTel } from '@/utils/validator.js'
import returnResultVue from '../offsetSteel/truckTransport/returnResult.vue'
export default {
  components: { PageTitle },
  data() {
    return {
        requireUnitId:null,
        requireUnitName:null,
        heatNo:null,
        requirementType:"计重",
        clazz:null,
        type:null,
        model:null,
        capacityId:null,
        loadPoint:null,
        unloadPoint:null,
        options: [{
            value:"甲"
        },{
            value:"乙"
        },{
            value:"丙"
        }
        ],
        options1: [{
            value:"Q215"
        },{
            value:"HPB300"
        },{
            value:"HRB400E"
        },{
            value:"HRB400"
        },{
            value:"HRB500"
        },{
            value:"HRB500E"
        },{
            value:"HRB600"
        }
        ],
        options2: [{
            value:"Φ16"
        },{
            value:"Φ6.5"
        },{
            value:"Φ6"
        },{
            value:"Φ8"
        },{
            value:"Φ10"
        },{
            value:"Φ12"
        },{
            value:"Φ14"
        },{
            value:"Φ16"
        },{
            value:"Φ36"
        },{
            value:"Φ40"
        }
        ],
        capacityArr:['场S74348','场S74976','场S73321','场S16586','场S00859'],
        optionsCapacity:[],
        optionsLoad:[],
        optionsUnload:[],
    }
  },
  mounted(){
    this.getRequireUnit();
    this.getLoadPoint();
    this.getUnloadPoint();
    this.getCapacity();
  },
  methods: {
    //获取炼钢厂连铸车间
    getRequireUnit(){
        this.axios
        .post('/api/v1/uc/getRequireUnitName?index=炼钢厂连铸车间')
        .then(res => {
          if (res.data.code == '200') {
            this.requireUnitId = res.data.data[0].shipperId
            this.requireUnitName = res.data.data[0].shipperName
          }
        })
    },
    //查询装货点
    getLoadPoint(){
        this.axios
        .post('/api/v1/uc/getUnloadingMesByLike?apiId=374&index=连铸车间')
        .then(res => {
          if (res.data.code == '200') {
            this.optionsLoad=res.data.data.list;
            this.loadPoint=parseInt(this.optionsLoad[0].warehouseId);
          }
        })
    },
    //查询卸货点
    getUnloadPoint(){
        this.axios
        .post('/api/v1/uc/getUnloadingMesByLike?apiId=374',{
            warehouseName:['一棒车间','高线车间']
        })
        .then(res => {
          if (res.data.code == '200') {
            this.optionsUnload=res.data.data.list;
          }
        })
    },
    //查询车牌号
    getCapacity(){
        this.axios
        .post('/api/v1/uc/getCapacityByLike?index=S')
        .then(res => {
          if (res.data.code == '200') {
            //过滤
            this.optionsCapacity = res.data.data.filter(function (x) {
                return x in this.capacityArr;
            });
          }
        })
    },
    // 新增
    makeSure() {
      let map={
        requireUnitId:this.requireUnitId,
        heatNo:this.heatNo,
        requirementType:"计重",
        clazz:this.clazz,
        type:this.type,
        model:this.model,
        capacityId:this.capacityId,
        loadPoint:this.loadPoint,
        unloadPoint:this.unloadPoint,
      }
      console.log("map:",map);
      if(!map.requireUnitId || !map.heatNo || !map.requirementType || !map.clazz || !map.type || !map.model || !map.loadPoint || !map.unloadPoint || !map.capacityId || map.capacityId.length<=0){
        this.$message.warning("每项都为必填！");
        return;
      }
      //提交
      this.axios
        .post('',map)
        .then(res => {
          if (res.data.code == '200') {
            
          }
        })
    },
    // 返回
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.inwardRequirement {
  .from {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 20px;
  }
  .drawSty {
    .el-input {
      width: 240px;
    }
  }
  .DueTime {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 20px;
    .chooseDueTime {
      margin-right: 70px;
    }
  }
  .capacity {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    margin-right: 10px;
  }
  .materialDrawer {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-input {
      width: 320px;
    }
    .el-select {
      width: 320px;
    }
    .el-autocomplete {
      width: 320px;
    }
    .el-form {
      padding: 10px;
    }
    .truckBtn {
      width: 320px;
    }
  }
  .swtichTop {
    display: flex;
    height: 40px;
    align-content: center;
    justify-content: center;
    padding-right: 20px;
    .titile {
      color: red;
      font-size: 14px;
    }
    .switch {
      margin-right: -30px;
    }
  }
  .requireUnit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .text {
      display: inline-block;
      width: 170px;
      text-align: right;
      .input {
        width: 250px;
        margin-right: 90px;
      }
    }
  }
  .form-box {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    ::v-deep .el-form {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 600px;
      // margin-left: -20px;
      background-color: yellow;
      .preview-group {
        background-color: blue;
        ::v-deep .el-form-item {
          background-color: blue;
          .el-form-item__label {
            width: 170px !important;
            background-color: blue;
          }
          ::v-deep .el-form-item__content {
            background-color: red;
            width: 300px;
          }
          .el-input {
            width: 210px !important;
          }
        }
      }
    }
  }
  .button-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-right: 90px;
  }
}
</style>
<style>
.el-drawer__body {
  overflow: auto;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>