<template>
    <div>
        <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="addDialog"
            :title="dialogType == 'add' ? '新增第三方系统信息' : '编辑第三方系统信息'" width="600px" top="20vh">
            <!-- <base-form ref="customForm" :formRow="formRow" :isFunBtn="false" :rules="rules" :spanNumber="24">
            </base-form> -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                <el-form-item label="系统名称" prop="sysName">
                    <el-input v-model="ruleForm.sysName" clearable></el-input>
                </el-form-item>
                <el-form-item label="系统图标">
                    <userAvatar @getfilesID="getfilesID" />
                </el-form-item>
                <el-form-item label="系统描述" prop="sysRemark">
                    <el-input v-model="ruleForm.sysRemark" :min="1" style="width: 100%;"></el-input>
                </el-form-item>
                <el-form-item label="系统地址链接" prop="sysLink">
                    <el-input v-model="ruleForm.sysLink" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item style="text-align: end;">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <!-- <i @click="resetForm('ruleForm')"></i> -->
                </el-form-item>
            </el-form>
        </base-dialog>

    </div>
</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import userAvatar from "./userAvatar";

export default {
    name: 'CheckAppAddDialog',
    components: {
        baseDialog, baseForm, userAvatar
    },
    data() {
        return {
            addDialog: false,
            formLabelWidth: '100px',
            ruleForm: {
                sysName: '',
                sysRemark: '',
                sysLink: '',
                sysIcon: '',

            },
            // formRow: [
            //     {
            //         elCol: [{
            //             label: '系统名称',
            //             prop: 'sysName',
            //             tag: 'elInput',
            //         },]
            //     }, {
            //         elCol: [{
            //             label: '系统描述',
            //             prop: 'sysRemark',
            //             tag: 'elInput',
            //         },]
            //     },
            //     {
            //         elCol: [{
            //             label: '系统图标',
            //             prop: 'sysIcon',
            //             tag: 'elBotton',
            //         },]
            //     },
            //     {
            //         elCol: [{
            //             label: '系统地址链接',
            //             prop: 'sysLink',
            //             tag: 'elInput',
            //         },]
            //     },
            // ],
            rules: {
                sysRemark: [
                    {
                        required: true,
                        message: "请输入系统描述",
                        trigger: "blur",
                    },
                ], sysName: [
                    {
                        required: true,
                        message: "请输入系统名称",
                        trigger: "blur",
                    },
                ],
                // sysIcon: [
                //     {
                //         required: true,
                //         message: "请选择系统图标",
                //         trigger: "blur",
                //     },
                // ],
                sysLink: [
                    {
                        required: true,
                        message: "系统地址链接",
                        trigger: "blur",
                    },
                ],
            },
            dialogType: '',
        };
    },
    watch: {
        addDialog: {
            deep: true, //深度监听设置为 true
            handler: function (newV, oldV) {
                if (newV == false) {
                    // this.formRow[0].elCol[0].disabled = false
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields('ruleForm')
                        // this.$partents.$refs.othertablePage.pageClear()
                    })
                }
            }
        },
    },

    mounted() {

    },
    methods: {
        openDialog() {
            this.addDialog = true
        },
        closeDialog() {
            this.addDialog = false
        },
        setForm(form) {
            this.ruleForm = Object.assign(this.ruleForm, form)
        },
        getfilesID(val) {
            this.ruleForm.sysIcon = val
            // this.$set(this.ruleForm, ruleForm.sysIcon, val);
            console.log(this.ruleForm);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('handleAddDialogDetails', this.ruleForm);
                    console.log(this.ruleForm);
                } else {
                    this.$message({ message: '请输入必填项', type: 'warning' });
                    return
                }
            })
        },
        handleClose() {
            this.addDialog = false
            this.ruleForm.sysIcon = ''
        }
    },
};
</script>

<style lang="scss" scoped></style>