<!--新增危险源-->
<template>
  <div class="page-container addLaboratory">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{form.cabinetId?'编辑危险源':'新增危险源'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-submit-p" @click="previewButton">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="120px" style="margin-top: 46px">
        <el-form-item label="名称：" prop="chName">
          <el-input
            style=width:600px;
            v-model="form.chName"
            maxlength="20"
            placeholder="请输入危险源名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="型号：" prop="hazardCode">
          <el-input
            style=width:600px;
            v-model="form.hazardCode"
            maxlength="10"
            placeholder="请输入危险源型号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="大分类：" prop="bigTypeValue">
          <el-select v-model="form.bigTypeValue" clearable placeholder="请选择大分类" @change="bigClassifyChange()" style="width: 600px">
            <el-option
              v-for="dict in bigClassifyOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="小分类：" prop="smallTypeValue">
          <el-select v-model="form.smallTypeValue" clearable placeholder="请选择大分类"  @change="smallClassifyChange()" style="width: 600px">
            <el-option
              v-for="dict in smallClassifyOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详情：" prop="content">
          <UEditor ref="UEditor" :content="form.content" :min-height="192" />
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="预览" class="richTextDialog" v-if="richTextDialogType" :close-on-click-modal="false" :visible.sync="richTextDialogType" append-to-body>
      <div class="button-max-box">
        <el-select v-model="previewKey" placeholder="请选择" style="margin-bottom:20px;">
          <el-option
            v-for="item in previewSetList"
            :key="item.key"
            :label="item.name"
            :value="item.key">
          </el-option>
        </el-select>
        <p class="page-inquire-common-style-button" style="margin-left:20px;" @click="rightButtonClick">提交</p>
      </div>
      <div class="text-max-box" :class="previewKey!=2?'move-text-max-box':''">
        <p class="text-max-null-p"></p>
        <div class="text-box scrollbar-box w-e-text" v-html="text"
             :style="'width:'+previewSetList[previewKey].width+'px;height:'+previewSetList[previewKey].height+'px;'">
        </div>
        <p class="text-max-null-p"></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  laboratoryHazardAdd, laboratoryHazardUpdate
} from '@/api/integratedManagement/index'
import { getDicts } from '@/api/commonality/noPermission'
export default {
  props:{
    propsData: null,
  },
  name: 'addLaboratory',
  data() {
    return {
      form:{},
      //大分类
      bigClassifyOptions:[],
      //小分类
      smallClassifyOptions:[],
      // 表单校验
      rules: {
        chName: [
          { required: true, message: "请输入危险源名称", trigger: "blur" },
          { required: true, message: "请输入危险源名称", validator: this.spaceJudgment, trigger: "blur" }
        ],
        hazardCode: [
          { required: true, message: "请输入危险源型号", trigger: "blur" },
          { required: true, message: "请输入危险源型号", validator: this.spaceJudgment, trigger: "blur" }
        ],
        bigTypeValue: [
          { required: true, message: "请选择大分类", trigger: "blur" },
          { required: true, message: "请选择大分类", validator: this.spaceJudgment, trigger: "blur" }
        ],
        smallTypeValue: [
          { required: true, message: "请选择小分类", trigger: "blur" },
          { required: true, message: "请选择小分类", validator: this.spaceJudgment, trigger: "blur" }
        ],
        content: [
          { required: true, message: "请编辑详情", trigger: "change" },
          { required: true, message: "请编辑详情", validator: this.spaceJudgmentHTML, trigger: "blur" }
        ],


      },
      config: {
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        initialContent: '请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent: true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 450,
        BaseUrl: '',
        // serverUrl: '//192.168.1.8:9300/exec',
        //serverUrl: '//180.76.134.43:30002/base/exec',
        serverUrl: '//'+this.judgmentNetworkReturnAddress()+'/base/exec',
        UEDITOR_HOME_URL: '/public/ueditor-1.4.3.3/'
      },
      richTextDialogType:false,
      previewKey:0,
      previewSetList:[
        {
          key:0,
          name:"iphone SE",
          width:375,
          height:667,
          scale:0.195312,
        },
        {
          key:1,
          name:"Samsung Galaxy S8+",
          width:360,
          height:740,
          scale:0.1875,
        },
        {
          key:2,
          name:"化学品终端",
          width:1041,
          height:725,
          scale:0.5421875,
        },
      ],
      text:"",
    }
  },
  created() {
    if(this.propsData){
      this.getSmallDicts(this.propsData.bigTypeValue)
      this.form = this.propsData
      this.form.content = unescape(this.form.content);

    }else{
      this.form={
        chName: '',
        hazardCode: '',
        bigTypeValue: '',
        smallTypeValue: '',
        content: '',
      }
    }
  },
  mounted() {
    this.getBigDicts();
  },
  methods: {
    //大分类字典
    getBigDicts(){
      getDicts('classify_dictionaries_all').then(response => {
        let list = response.data;
        getDicts('level_dictionaries_all').then(response => {
          list = list.concat(response.data)
          this.$set(this,'bigClassifyOptions',list);
        });
      });
    },
    //小分类字典
    getSmallDicts(val){
      getDicts(val).then(response => {
        this.$set(this,'smallClassifyOptions',response.data);
      });
    },
    //大分类选中
    bigClassifyChange(){
      let self=this;
      for (let i=0;i<this.bigClassifyOptions.length;i++){
        if (this.form.bigTypeValue==this.bigClassifyOptions[i].value){
          this.$set(this.form,'bigTypeName',this.bigClassifyOptions[i].label);
        }
      }
      this.getSmallDicts(this.form.bigTypeValue)
    },
    //小分类选中
    smallClassifyChange(){
      let self=this;
      for (let i=0;i<this.smallClassifyOptions.length;i++){
        if (this.form.smallTypeValue==this.smallClassifyOptions[i].value){
          this.$set(this.form,'smallTypeName',this.smallClassifyOptions[i].label);
        }
      }
    },
    // 返回按钮
    backPage(){
      this.$parent.tableButton('out','');
    },
    //预览
    previewButton(){
      this.$set(this.form,'content',this.$refs.UEditor.text);
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$set(this,'text',this.$refs.UEditor.text);
          this.richTextDialogType = !this.richTextDialogType
        }
      });
    },
    rightButtonClick(){
      this.$set(this.form,'content',this.$refs.UEditor.text||"");
      // this.form.content = this.$refs.UEditor.text;
      this.submitForm()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.content = escape(this.form.content);
          if (this.form.hazardId) {
            laboratoryHazardUpdate(this.form).then(response => {
              if(response.code = 200){
                this.msgSuccess("修改成功");
                this.backPage()
              }
            });
          } else {
            laboratoryHazardAdd(this.form).then(response => {
              if(response.code = 200){
                this.msgSuccess("新增成功");
                this.backPage()
              }
            });
          }
        }
      });
    },
  },

}
</script>

<style lang="scss" scoped>
.addLaboratory{
}
</style>
<style lang="scss">
  .richTextDialog{
    .el-dialog{
      width:1083px;
      .el-dialog__body{
        padding:20px;
      }
    }
    .button-max-box{
      display: flex;
      .button-null-p{
        flex:1;
      }
    }
    .text-max-box{
      display: flex;
      .text-max-null-p{
        flex:1;
      }
      .text-box{
        color:#000;
        font-size:16px;
        padding:8px;
        border:1px solid #dedede;
        font-weight:500;
      }
    }
    .move-text-max-box{
      video{
        width:100%!important;
        /*object-fit: fill;*/
        height:100%!important;
        /*display: block;*/
      }
      img{
        width:100%!important;
        height:100%!important;
        /*width:1500px;*/
        /*margin:20px 200px;*/
      }
    }
  }
  .richTextDemo{
  }
</style>
