<template>
  <div class="menuDrawer">
    <el-dialog :title="drawerTitle" width="50%" :visible.sync="dialogVisible" :close-on-click-modal="false"
      :show-close="false" :append-to-body="true" @close="handleClose">
      <el-form ref="userForm" :model="menuForm" :disabled="menuFormDisabled" :rules="rules" label-width="auto"
        style="margin: 10px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="">
              <!-- <el-input
                placeholder="请输入权限名"
                :disabled="menuFormDisabled"
                v-model="menuData.userName"
                size="mini"
              ></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单路由" prop="">
              <!-- <el-input
                placeholder="请输入权限名"
                :disabled="menuFormDisabled"
                v-model="menuData.userName"
                size="mini"
              ></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件名称" prop="">
              <!-- <el-input
                placeholder="请输入权限名"
                :disabled="menuFormDisabled"
                v-model="menuData.userName"
                size="mini"
              ></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单状态" prop="">
              <el-switch v-model="menuData.menuStatus" active-color="#13ce66" inactive-color="#ff4949"
                :disabled="menuFormDisabled"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图标选择" prop="">
              <iconSelect @selected="selected"></iconSelect>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="权限设置" prop="">
              <el-col :span="6">
                <el-radio label="页面" size="medium"></el-radio>
              </el-col>
              <el-col :span="6">
                <el-radio label="按钮" size="medium"></el-radio>
              </el-col>
              <el-col :span="24">
                <el-card shadow="never">
                  <el-input placeholder=""></el-input>
                </el-card>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import iconSelect from "@/components/IconSelect";
export default {
  components: {
    iconSelect,
  },
  props: {
    drawerTitle: {
      type: String,
      default: "",
    },
    menuFormDisabled: {
      type: Boolean,
      default: false,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    menuData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      menuForm: {},
      rules: {}
    };
  },
  updated() {
    this.menuForm = this.menuData;
  },
  watch: {
    dialogVisible(val, oldVal) {
      if (val) {
        this.menuForm = this.menuData;
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("handleClose", false);
    },
    selected(val) {
      console.log(val);
    },
    submit() { },
  },
};
</script>

<style>

</style>