<template>
  <div class="page-container addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p" style="margin-left:20px;">{{propsData.basisId?'编辑':'新增'}}</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">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="basisName" style="width:498px;">
          <el-input v-model="form.basisName" placeholder="请输入检查依据模板名称" maxLength="20" style="width:500px;"/>
        </el-form-item>
        <el-form-item label="检查项目" prop="hazardCheckPros" style="width:498px;">
          <div class="form-add-box">
            <p class="add-time-button-p" @click="tableButton(1,'')">+ 新增项目</p>
            <p>已选择{{form.hazardCheckPros.length}}个三级检查项目</p>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="basisRemark" style="color:#606266;font-size:16px;font-weight:500;" class="wang-editor-form-item-box">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 5}"
            placeholder="请输入备注"
            v-model="form.basisRemark"
            maxlength="200"
            resize="none"
            show-word-limit
            style="width:548px;">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <itemCheckComponent ref="userCheckComponent" v-if="itemCheckComponentType"
                        :itemCheckComponentData="itemCheckComponentData"></itemCheckComponent>
  </div>
</template>

<script>
  import {
    securityCheckBasisDetail,
    securityCheckBasisAdd,
    securityCheckBasisUpdate,
  } from '@/api/safetyCheck/index'
  import itemCheckComponent from "./itemCheckComponent.vue";
  export default {
    name: "addPage",
    components: {
      itemCheckComponent
    },
    props:{
      propsData:{},
    },
    data() {
      return {
        itemCheckComponentType:false,
        itemCheckComponentData:{},
        // 表单参数
        form: {
          basisName:'',
          hazardCheckPros:[],
          basisRemark:'',
        },
        // 表单校验
        rules: {
          basisName:[
            {required: true, message: '请输入检查依据模板名称', trigger: 'blur'},
            { required: true, message: "请输入检查依据模板名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          hazardCheckPros:[
            {required: true, message: '请选择三级检查项目', trigger: 'blur'},
          ],
        },
      };
    },
    created() {
    },
    mounted(){
      if(this.propsData.basisId){
        this.$set(this,'form',this.propsData);
        this.securityCheckBasisDetail();
      }
    },
    methods: {
      //详情
      securityCheckBasisDetail(){
        securityCheckBasisDetail({basisId:this.propsData.basisId}).then(response => {
          this.$set(this.form,'basisId',response.data.basisId);
          this.$set(this.form,'basisName',response.data.basisName);
          this.$set(this.form,'hazardCheckPros',response.data.hazardCheckPros?response.data.hazardCheckPros.split(","):[]);
          this.$set(this.form,'basisRemark',response.data.basisRemark);
        });
      },
      addItemButton(){

      },
      tableButton(type,data){
        if(type == 1){
          //编辑
          this.$set(this,'itemCheckComponentData',this.form.hazardCheckPros);
          this.$set(this,'itemCheckComponentType',true);
        }else if(type == 2){
          //启用停用
        }else if(type == 3){
          //删除
        }else if(type == 4){
          //人员选择关闭
          this.$set(this,'itemCheckComponentType',false);
        }else if(type == 5){
          //人员选择确定
          this.$set(this.form,'hazardCheckPros',data);
          this.$set(this,'itemCheckComponentType',false);
        }
      },
      /** 提交按钮 */
      submitForm() {
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              let obj = {
                basisName:self.form.basisName,
                hazardCheckPros:self.form.hazardCheckPros+'',
                basisRemark:self.form.basisRemark,
              }
              if (this.form.basisId) {
                obj.basisId = self.form.basisId;
                securityCheckBasisUpdate(obj).then( response => {
                  self.msgSuccess(response.message);
                  self.$parent.tableButton('back');
                });
              } else {
                securityCheckBasisAdd(obj).then( response => {
                  self.msgSuccess(response.message);
                  self.$parent.tableButton('back');
                });
              }
            }).catch(() => {});
          }
        });
      },
      backPage(){
        this.$parent.tableButton('back','');
      },
      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;
      }
    }
  }
  .form-add-box{
    display: flex;
    .add-time-button-p{
      width:100px;
      height:40px;
      line-height:40px;
      text-align: center;
      cursor: pointer;
      border:1px solid #0183FA;
      border-radius:4px;
      color:#0183FA;
      margin-right: 35px;
    }
    p:nth-child(2){
      font-size:14px;
      color:#0183FA;
    }
  }
</style>
<style lang="scss">
  .wang-editor-form-item-box{
    .el-form-item__content{
      z-index:0;
    }
  }
</style>
