<template>
    <el-dialog :title="modalTitle" :visible.sync="visible" width="30%" append-to-body @close="closeDialog">
      <el-form :model="parameter" label-width="120px" :rules="rules" ref="form" label-position="left">
        <el-form-item label="参数名称" prop="paramName">
          <el-input v-model="parameter.paramName"></el-input>
        </el-form-item>
        <el-form-item label="参数类型" prop="paramTypeVal">
          <el-select
            v-model="parameter.paramTypeVal"
            multiple
            placeholder="请选择"

          >
          <el-option
              v-for="item in paramTypeList"
              :key="item.id"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否区分项目" prop="type">
          <el-radio v-model="parameter.type" :label="1">是</el-radio>
          <el-radio v-model="parameter.type" :label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="parameter.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script>
  import { getDictionary } from "@/api/system/dict";
  import { submitParameter } from "../../../api/paramter/parmter.js";

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      params:{
        type: Object ,
        default: () => {}
      }
    },
    watch: {
      params: {
        handler: function(n) {
          if(n.id){
            this.modalTitle='编辑参数'
        
          }else{
            this.modalTitle='新增参数'
          }
        
        },
        deep: true,
      },
   },
    data() {
      return {
       
        parameter: {
          paramName: '',
          paramTypeVal: [],
          type: false,
          remarks: ''
        },
        modalTitle:'新增参数',
        paramTypeList:[],
        rules: {
          paramName: [
            { required: true, message: '请输入参数名称', trigger: 'blur' }
          ],
          paramTypeVal: [
            { required: true, message: '请选择参数类型', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择是否区分项目', trigger: 'change' }
          ]
        }
      };
    },

    created() {
      this.getParamTypeList();
    },
    methods: {
      show(n){
      this.visible=true
      this.parameter = JSON.parse(JSON.stringify(n));
            this.$set(this.parameter,"paramTypeVal", this.parameter.paramType.split(','))
    },
      getParamTypeList() {
            let code = "parameter_type";
            getDictionary({
                code,
            }).then((res) => {
                    this.paramTypeList = res.data.data;
            });
      },
      closeDialog() {
        this.visible=false
        this.$emit('update:visible', false);
        this.parameter = {
          paramName: '',
          paramTypeVal: [],
          type: false,
          remarks: ''
        };
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            
          submitParameter(
            {
              ...this.parameter,
              paramType:this.parameter.paramTypeVal.join(','),
              
            }
            ).then((res) => {
            if(res.data.code==200){
              this.$emit('add-parameter');
                this.$message.success(res.data.msg)
              
              }else{
                this.$message.error(res.data.msg)
              }
              this.closeDialog();

            });
           
          } else {
            return false;
          }
        });
      }
    }
  };
  </script>