<template>
  <n-form
    inline
    :label-width="80"
    label-placement="left"
    :model="queryForm"
    size="medium"
    ref="queryFormRef"
  >
    <n-form-item label="权限或编号" path="value">
      <n-input
        v-model:value="queryForm.value"
        clearable
        placeholder="请输入···"
      />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="handleClick('row', 'search')"
        ><template #icon>
          <n-icon>
            <Search />
          </n-icon> </template
        >搜索</n-button
      >
    </n-form-item>
    <n-form-item>
      <n-button
        type="primary"
        @click="handleClick('row', 'add')"
        attr-type="button"
        ><template #icon>
          <n-icon>
            <Add />
          </n-icon> </template
        >新增权限</n-button
      ></n-form-item
    >
  </n-form>
  <n-data-table
    ref="tableRef"
    :bordered="false"
    :columns="columns"
    :data="data"
    :pagination="pagination"
  ></n-data-table>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
   preset="card"
    :title="modelTitle"
  >
    <n-form
      v-if="modelTitle == '配置菜单按钮'"
      :model="configureFormValue"
      :size="medium"
      :show-label="false"
      label-placement="left"
    >
      <n-form-item path="authorityName">
        <n-input
          v-model:value="configureFormValue.value"
          clearable
          placeholder="输入关键字进行过滤"
        />
      </n-form-item>
      <n-tree
        :data="configureFormValue.menuTree"
        block-line
        checkable
        default-expand-all
        cascade
      />
    </n-form>
    <n-form
      v-else
      :label-width="80"
      :model="addFormValue"
      :rules="addFormRules"
      :size="medium"
      label-placement="left"
      ref="addFormRef"
    >
      <n-form-item label="权限名称" path="authorityName">
        <n-input
          v-model:value="addFormValue.authorityName"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
      <n-form-item label="权限类型：" path="authorityType">
        <n-radio-group v-model:value="addFormValue.authorityType">
          <n-space>
            <n-radio :value="0">内部权限</n-radio>
            <n-radio :value="1">外部权限</n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="权限状态：" path="authorityStatus">
        <n-radio-group v-model:value="addFormValue.authorityStatus">
          <n-space>
            <n-radio :value="0">初始化</n-radio>
            <n-radio :value="1">停用</n-radio>
            <n-radio :value="2">正在使用</n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="备注：" path="remarks">
        <n-input
          placeholder="请输入···"
          v-model:value="addFormValue.remarks"
          type="textarea"
          :autosize="{
            minRows: 3,
            maxRows: 5,
          }"
        />
      </n-form-item>
      <n-form-item label="排序编号：" path="sortNum">
        <n-input
          v-model:value="addFormValue.sortNum"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
    </n-form>
    <template #action>
      <n-space>
        <n-button @click="() => (showModal = false)">取消</n-button>
        <n-button
          type="primary"
          :loading="formBtnLoading"
          @click="handleClick('rows', 'sure')"
          >确定</n-button
        >
      </n-space>
    </template>
  </n-modal>
</template>

<script>
import { ref, reactive, toRefs, h, onMounted } from "vue";
import { NButton, useMessage, useDialog,NTag } from "naive-ui";
import { Search, Add } from "@vicons/ionicons5";

export default {
  name: "authority",
  components: { Search, Add },
  setup() {
    const state = reactive({
      //搜索相关
      queryForm: {
        value: "",
      },
      //表格相关
      columns: [
        // {
        //   type: "selection",
        //   disabled(row, index) {
        //     return row.name === "Edward King 3";
        //   },
        // },
        {
          title: "权限名称",
          key: "authorityName",
          align: "center",
        },
        {
          title: "权限类型",
          key: "authorityType",
          align: "center",
          render(row) {
            return row.authorityType === 0 ? "内部权限" : "外部权限";
          },
        },
        {
          title: "权限状态",
          key: "authorityStatus",
          align: "center",
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color:{
                  color: "transparent",
                   textColor:
                    row.authorityStatus === 0
                      ? "#2080f0"
                      : row.authorityStatus === 1
                      ? "#d03050"
                      : "#36ad6a",
                }
              },
              {
                default:
                  row.authorityStatus === 0
                    ? "初始化"
                    : row.authorityStatus === 1
                    ? "停用"
                    : "正在使用",
              }
            );
          },
        },
        {
          title: "创建时间",
          key: "creatTime",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          width: "300",
          align: "center",
          render(row) {
            const btn = state.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: "10px",
                  },
                  type: item.btnType,
                  onClick: () => handleClick(row, item.type),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "edit",
          default: "修改权限",
        },
        {
          size: "small",
          btnType: "primary",
          type: "configure",
          default: "配置菜单按钮",
        },
        {
          size: "small",
          btnType: "primary",
          type: "delete",
          default: "删除权限",
        },
      ],
      //弹窗相关
      showModal: false,
      formBtnLoading: false,
      modelTitle: "",
      addFormValue: {
        authorityName: "",
        authorityType: 0,
        authorityStatus: 0,
        remarks: "",
        sortNum: "",
      },
      addFormRules: {
        authorityName: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入角色名称",
          },
        ],
        sortNum: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入编号",
          },
        ],
      },
      configureFormValue: {
        value: "",
        menuTree: [],
      },
    });
    const queryFormRef = ref(null);
    const tableRef = ref(null);
    const addFormRef = ref(null);
    const dialog = useDialog();
    const message = useMessage();
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 5,
      showSizePicker: true,
      pageSizes: [3, 5, 7],
      showQuickJumper: true,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    //获取表格数据
    const getTableData = async() => {
      let res=await getSysAuthorityData()
      if(res.code===200){
         state.data = res.data.list;
      }
    };
    //获取弹出框菜单数据
    const getMenuTree = () => {
      state.configureFormValue.menuTree = [
        {
          key: "0",
          label: "0",
          children: [
            {
              key: "0-0",
              label: "0-0",
            },
            {
              disabled: true,
              key: "0-1",
              label: "0-1",
              children: [
                {
                  label: "0-1-0",
                  key: "0-1-0",
                },
                {
                  label: "0-1-1",
                  key: "0-1-1",
                },
              ],
            },
          ],
        },
        {
          key: "1",
          label: "1",
          children: [
            {
              key: "1-0",
              label: "1-0",
            },
            {
              checkboxDisabled: true,
              key: "1-1",
              label: "1-1",
              children: [
                {
                  label: "1-1-0",
                  key: "1-1-0",
                },
                {
                  label: "1-1-1",
                  key: "1-1-1",
                },
              ],
            },
          ],
        },
      ];
    };
    //按钮点击事件
    const handleClick = (row, type) => {
      switch (type) {
        //搜索
        case "search":
          console.log("刷新界面", state.queryForm);
          break;
        //新增
        case "add":
          state.modelTitle = "新增";
          state.showModal = true;
          break;
        //编辑
        case "edit":
          console.log(row);
          state.modelTitle = "修改";
          state.addFormValue = row;
          state.showModal = true;
          break;
        //配置菜单按钮
        case "configure":
          console.log(row);
          state.modelTitle = "配置菜单按钮";
          getMenuTree();
          state.addFormValue = row;
          state.showModal = true;
          break;
        //删除
        case "delete":
          dialog.info({
            title: "提示",
            content: `您想删除${row.authorityName}`,
            positiveText: "确定",
            negativeText: "取消",
            onPositiveClick: () => {
              message.success("删除成功");
            },
            onNegativeClick: () => {},
          });
          break;
        case "sure":
          addFormRef.value.validate((errors) => {
            if (!errors) {
              message.success("验证成功");
              state.showModal = false;
              resetForm();
            } else {
              console.log(errors);
              message.error("验证失败");
            }
          });
      }
    };
    //重置表单
    const resetForm = () => {};
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      queryFormRef,
      tableRef,
      addFormRef,
      getTableData,
      getMenuTree,
      handleClick,
      resetForm,
      pagination: paginationReactive,
    };
  },
};
</script>

<style>
.n-data-table-base-table {
}
</style>