<template>
  <!-- 添加油价信息 -->
  <div class="addWagonLoad">
    <page-title>返回</page-title>
    <div class="form_you">
      <span class="text">油品名称 </span>
      <el-select v-model="oilNameId" filterable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="dialogVisible = true">新增油品名称</el-button>
    </div>
    <div class="form_box" style="margin-right: 10rem">
      <dil-form :formId="357" v-model="form1" ref="from1" @change="onchang"></dil-form>
    </div>
    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure">确定</el-button>
    </div>
    <el-dialog
      title="新增油品名称"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>注：<span style="color:red;">不能输入特殊符号('#')</span></span>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogMakeSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { isNumber,sjTime } from '@/utils/sharedJsFile'
export default {
  components: { PageTitle },
  data() {
    return {
      //下拉框选中的值
      oilNameId:null,
      //加载状态
      loading:false,
      //油品名称新增的值
      input:null,
      //是否显示添加油品名称的窗口
      dialogVisible:false,
      //下拉框的数据
      options:[],
      //表单的数据
      form1: {
        priceValue:'',
        priceDate:new Date(),
        priceStatus:false,
      },
    };
  },
  created(){
    this.initialization();
  },
  methods: {
    initialization(){
      this.axios.post('/api/v1/rms/oilNameSelect').then((res)=>{
        if(res.data.code == "200"){
          this.options = res.data.data;
        }
      })
    },
    onchang(val){
      if(val.priceStatus){
        this.$message.warning('确认启用后将会停用正在执行的油品价格')
      }
    },
    dialogMakeSure(){
      this.loading = true;
      if(this.input){
        this.axios.post('/api/v1/rms/addOilType?oilTypeName='+this.input).then((res)=>{
          if(res.data.code == "200"){
            this.loading = false;
            this.$message.success('新增成功')
            this.dialogVisible = false;
            this.initialization();
          }
        })
      }else{
        this.$message.warning('请输入油品名称')
      } 
    },
    makeSure() {
      this.loading = true;
      let state = false;
      if(!this.oilNameId){
        this.$message.warning('请填写油品名称')
      }else if(!this.form1.priceValue){
        this.$message.warning('请填写油品价格')
      }else if(!isNumber(this.form1.priceValue)){
        this.$message.warning('油品价格必修为整数或者小数')
      }else{
        state = true;            
      }
      if(state){
        let RmsOilPrice = {
          oilNameId:this.oilNameId,
          priceValue:this.form1.priceValue,
          priceDate:sjTime(this.form1.priceDate),
          priceStatus:this.form1.priceStatus
        };
        console.log(RmsOilPrice);
        this.axios.post("/api/v1/rms/insertOilPrice" , RmsOilPrice)
        .then((res) => {
          if (res.data.code == "200") {
            this.loading = true;
            this.$message.success('新增成功');
            this.cancel();
          }
        });
      }else{
        this.loading = true;
      }
    },
    // 取消
    cancel() {
      this.$router.push("/oilPrice");
    },
  },
};
</script>
<style lang='scss'>
.addWagonLoad{
  .form_you{
    margin-left: 35%;
    margin-top: 30px;
    .text{
      display: inline-block;
      width: 55px;
    }
    .el-select{
      width: 250px;
      margin-right: 20px;
    }
  }
  .form_box{
    margin-left: 35%;
    padding-top: 10px;
    width: 470px;
    display: flex;
    .el-form{
      .el-form-item{
        display: flex;
        align-items: center;
        .el-form-item__content{
          .el-input{
            width: 250px;
          }
          .el-switch{
            margin-left: -250px;
          }
        }
      }
    }
    .addbtn{
      margin-left: 30px;
    }
  }
  .button_box{
    margin-left: 40%;
    padding-top: 30px;
    width: 310px;
    display: flex;
    justify-content: center;
  }
}
</style>