<template>
    <!-- 修改参数配置 -->
    <el-dialog v-dialogDrag width="60%" :close-on-click-modal="false" title="下属单位参数配置" :visible.sync="visible"
      :before-close="cancel" top="10%">
      <el-form :model="form" size="mini" :rules="rules" ref="ruleForm" label-width="120px" class="diaForm">
        <el-form-item label="跳转地址" prop="jumpUrl">
          <el-input clearable placeholder="请输入地址" v-model="form.jumpUrl" class="input-with-select">
          </el-input>
        </el-form-item>
        <el-form-item label="是否跳转" prop="isOpne" class="bg-item">
            <el-radio-group v-model="form.isOpne">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="原文地址" prop="filesUrl">
          <el-input clearable placeholder="请输入内容" v-model="form.filesUrl" class="input-with-select">
          </el-input>
        </el-form-item>
        <el-form-item class="btnClass">
          <el-button @click="submit('ruleForm')" icon="el-icon-tickets" type="primary" size="mini">确定</el-button>
          <el-button @click="cancel" icon="el-icon-close" type="info" size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </template>
  <script>
    import {
      message,
      loading,
      loadingClose
    } from "@/utils/common";
    import {
      tif2jpge
    } from "@/api/tool";
   export default {
      props: {
        visible: {
          type: Boolean,
          default: () => false,
        },
        form:{
            type:Object,
            default:()=>{}
        }
      },
      data() {
        return {
            rules: {
                jumpUrl: [{
                    required: true,
                    message: "请输入跳转地址",
                    trigger: "blur"
                }],
                filesUrl: [{
                    required: true,
                    message: "请输入原文地址",
                    trigger: "blur"
                }],
                isOpne: [{
                    required: true,
                    message: "请选择",
                    trigger: "change"
                }],
            },
        };
      },
      methods: {
        submit(formName) {
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              this.$emit('clickSubmit',this.form);
              
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        cancel() {
          this.$refs.ruleForm.resetFields()
          this.$emit("cancel");
        },
      },
    };
  
  </script>
  <style lang='scss' scoped>
    .btnClass {
      text-align: center;
    }
    .bg-item{
        ::v-deep .el-form-item__content{
            display:flex;
            flex-direction: row;
        }
        .left{
            margin-right:10px;
            width:120px;
            height:60px;
            img{
              width:120px;
              height:100%;
            }
        }
    }
  
  </style>
  