<template>
  <div class="page-container addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p" style="margin-left:20px;">{{addPropsData.id?'编辑':'新增'}}</p>
      <p class="page-top-title-out-p" style="margin-right:20px;" @click="backPage">返回</p>
      <p class="page-top-title-add-p" @click="submitForm">提交</p>
    </div>
    <div class="addPage-min safe-book-el-dialog" v-if="addType">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="化学品名称" prop="name" style="width:498px;">
          <el-input v-model="form.name" placeholder="请输入化学品名称" maxLength="20" style="width:500px;"/>
        </el-form-item>
        <el-form-item label="化学品编号" prop="code" style="width:498px;">
          <el-input v-model="form.code" placeholder="请输入化学品编号" maxLength="20" style="width:500px;"/>
        </el-form-item>
        <el-form-item label="化学品详情" prop="content" style="color:#606266;font-size:16px;font-weight:500;" class="wang-editor-form-item-box">
          <wangEditor :content="form.content" placeholder="请输入化学品详情" @change="change" :min-height="192" style="width:1000px;"/>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { chemicalMsdsAdd,chemicalMsdsEdit } from "@/api/chemicalManage/index";
  export default {
    name: "addPage",
    props:{
      addPropsData:{},
    },
    data() {
      return {
        addType:false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name:[
            {required: true, message: '请输入化学品名称', trigger: 'blur'},
            { required: true, message: "请输入化学品名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          code:[
            {required: true, message: '请输入化学品编号', trigger: 'blur'},
            { required: true, message: "请输入化学品编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          content:[
            {required: true, message: '请输入化学品详情', trigger: 'blur'},
            { required: true, message: "请输入化学品详情", validator: this.spaceJudgmentHTML, trigger: "blur" }
          ],
        },
      };
    },
    created() {
    },
    mounted(){
      if(this.addPropsData.id){
        this.$set(this,'form',this.addPropsData);
        this.addType=true;
      }else{
        this.addType=true;
      }
    },
    methods: {
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.form))
            obj.content = escape(obj.content);
            if (obj.id != null) {
              chemicalMsdsEdit(obj).then( response => {
                this.msgSuccess(response.message);
                this.$parent.pageToggle(1);
              });
            } else {
              chemicalMsdsAdd(obj).then( response => {
                this.msgSuccess(response.message);
                this.$parent.pageToggle(1);
              });
            }
          }
        });
      },
      backPage(){
        this.$parent.pageToggle(0);
      },
      change(val) {
        this.$set(this.form,'content',val);
        // this.form.content = val;
      },
    }
  }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex !important;
    flex-direction: column;
    p{
      margin:0;
    }
    .addPage-min{
      flex:1;
      display: flex !important;
      flex-direction: column;
      padding:20px!important;
      .bottom-button-p{
        margin:40px auto;
        line-height:40px;
        width:100px;
        text-align: center;
      }
    }
  }
</style>
<style lang="scss">
  .wang-editor-form-item-box{
    .el-form-item__content{
      z-index:0;
    }
  }
</style>
