<!-- 用户管理 -->
<template>
    <div class="app-container model-detail">
      <el-card v-loading="loading">
        <template #header
          ><svg-icon
            icon-class="pause"
            style="width: 20px; height: 20px"
          />菜单基本信息</template
        >
        <el-row>
          <el-col :lg="12" :xs="24">
            <el-form ref="menuFormRef" :model="formData" :rules="rules" label-width="160px">
        <el-form-item label="父级菜单" prop="parentId">
          <el-tree-select
            v-model="formData.parentId"
            placeholder="选择上级菜单"
            :data="menuOptions"
            filterable
            check-strictly
            :render-after-expand="false"
          />
        </el-form-item>

        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入菜单名称" />
        </el-form-item>

        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="formData.type" @change="onMenuTypeChange">
            <el-radio label="CATALOG">目录</el-radio>
            <el-radio label="MENU">菜单</el-radio>
            <el-radio label="BUTTON">按钮</el-radio>
            <el-radio label="EXTLINK">外链</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- v-if="
            formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU
          " -->
        <el-form-item
          label="路由路径"
          prop="path"
        >
          <el-input
            v-model="formData.path"
            placeholder="system"
          />
        </el-form-item>

        <!-- 组件页面完整路径 -->
        <el-form-item
          label="页面路径"
          prop="component"
        >
          <el-input
            v-model="formData.component"
            placeholder="system/user/index"
            style="width: 95%"
          >
            <template #prepend
              >src/views/</template
            >
            <template #append>.vue</template>
          </el-input>
        </el-form-item>

        <el-form-item
          prop="visible"
          label="显示状态"
        >
          <el-radio-group v-model="formData.visible">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="是否始终显示"
        >
          <template #label>
            <div>
              是否始终显示
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  当设置为始终显示时，即使只有一个子菜单也会显示
                </template>
                <i-ep-QuestionFilled class="inline-block" />
              </el-tooltip>
            </div>
          </template>

          <el-radio-group v-model="formData.alwaysShow">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否缓存">
          <el-radio-group v-model="formData.keepAlive">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formData.sort"
            style="width: 100px"
            controls-position="right"
            :min="0"
          />
        </el-form-item>

        <!-- 权限标识 -->
        <el-form-item
          label="权限标识"
          prop="perm"
        >
          <el-input v-model="formData.perm" placeholder="sys:user:add" />
        </el-form-item>

        <el-form-item
          label="图标"
          prop="icon"
        >
          <!-- 图标选择器 -->
          <icon-select v-model="formData.icon" />
        </el-form-item>

        <el-form-item label="跳转路由">
          <el-input v-model="formData.redirect" placeholder="跳转路由" />
        </el-form-item>
      </el-form>
          </el-col>
          <el-col :lg="12" :xs="24"> </el-col>
        </el-row>
      </el-card>
      <el-card class="card-footer">
          <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
          <el-button @click="closeBack"><i-ep-close />取 消</el-button>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  defineOptions({
    name: "User",
    inheritAttrs: false,
  });
  
  import UserAPI from "@/api/user";
  import { UserForm } from "@/api/user/model";
  
  const router = useRouter();
  const loading = ref(false); //  加载状态
  
  const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
  
  // 用户表单数据
  const formData = reactive<UserForm>({
    status: 1,
  });
  
  const radioSelected = ref('');
  
  // 校验规则
  const rules = reactive({
    username: [{ required: true, message: "不能为空", trigger: "blur" }],
    nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
    deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
    roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
    email: [
      {
        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
        message: "请输入正确的邮箱地址",
        trigger: "blur",
      },
    ],
    mobile: [
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
  });
  
  const list = [
    {
      csmc: "10.0.8.12",
      csms: "DOCKER-TOOL",
      csmc1: "acd0032a-6833-4348-b0fc-04798f94354c",
      csmc2: "华为",
      csmc3: "1.2",
      csmc4: "已连接",
    },
    {
      csmc: "192.10.71.44",
      csms: "ETL",
      csmc1: "ac1232a-6233-4348-b0fc-04798f94551",
      csmc2: "华为",
      csmc3: "1.2",
      csmc4: "已连接",
    },
  ];
  
  /** 表单提交 */
  const handleSubmit = useThrottleFn(() => {
    loading.value = true;
    setTimeout(() => {
      ElMessage.success("保存成功");
      loading.value = false;
      closeBack();
    }, 1000);
  }, 3000);
  
  /** 返回默认页面 */
  function closeBack() {
    router.push({ path: "/system/menu" });
  }
  
  onMounted(() => {
    //handleQuery();
  });
  </script>
  <style scoped lang="scss">
  .model-detail {
    :deep(.el-card__header) {
      padding: 8px 4px;
      display: flex;
      align-items: center;
    }
  }
  .sp-file {
    color: #29d;
  }
  .tb-base-info {
    line-height: 30px;
  }
  :deep(.svg-icon) {
    margin-right: 8px;
  }
  .card-footer {
    position: fixed;
    width: calc(100% - 215px);
    bottom: 0px;
    :deep(.el-card__body) {
      padding: 10px;
      .el-pagination {
        justify-content: end;
      }
    }
  }
  </style>
  