{% load i18n %}
<script type="text/html" id="formDialog">

    <el-dialog v-if="form" label-width="100px" :title="title" :visible.sync="visible" @before-close="handleClose()">
        <el-form ref="form" :model="form" size="small" label-position="right" label-width="100px" :rules="rules">
            <el-form-item label="{% trans 'Parent' %}">

                <el-cascader style="width: 300px" v-model="form.parent" :options="tableData"
                             :props="{label:'name',value:'id',emitPath:false,checkStrictly:true}" filterable
                             clearable>
                    <template slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <span v-text="data.name"></span>
                        <span v-if="!node.isLeaf"> (<span v-text="data.children.length"></span>) </span>
                    </template>
                </el-cascader>

            </el-form-item>
            <el-form-item label="{% trans 'Type' %}">
                <el-radio-group v-model="form.resource_type">
                    <el-radio :label="0">{% trans 'Menu' %}</el-radio>
                    <el-radio :label="1">{% trans 'Button' %}</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="{% trans 'Name' %}" prop="name">
                <el-input style="width: 200px" v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="{% trans 'Code' %}" prop="code">
                <el-input style="width: 200px" v-model="form.code" autocomplete="off"></el-input>
                <el-link href="https://simpleui.72wo.com/docs/simplepro/permissions.html" target="_blank"><i
                        class="el-icon-question"></i></el-link>
            </el-form-item>

            <el-form-item label="{% trans 'Icon' %}">
                <icon-select style="width: 200px" v-model="form.icon" size="small"></icon-select>
            </el-form-item>

            <el-form-item label="{% trans 'Sort' %}">
                <el-input-number v-model="form.sort" :min="0"></el-input-number>
            </el-form-item>
            <template v-if="form.resource_type!=1">
                <el-form-item label="{% trans 'Url' %}">
                    <el-input style="width: 200px" v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="{% trans 'Menu Status' %}">
                    <el-switch v-model="form.is_menu"></el-switch>
                </el-form-item>

                <el-form-item label="{% trans 'Open Type' %}">
                    <el-radio-group v-model="form.open_type">
                        <el-radio :label="0">{% trans 'Current Tab' %}</el-radio>
                        <el-radio :label="1">{% trans 'New Tab' %}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="handleClose()">{% trans 'Cancel' %}</el-button>
            <el-button size="small" type="primary" @click="save()">{% trans 'Save' %}</el-button>
        </div>
    </el-dialog>

</script>