<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"
    :max-height="700"
    striped
    :columns="columns"
    :data="data"
    :pagination="pagination"
  ></n-data-table>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
   preset="card"
    :title="modelTitle"
    :style="{ width: '500px' }"
  >
    <n-transfer
      v-if="modelTitle == '配置机构' || modelTitle == '配置权限'"
      size="medium"
      virtual-scroll
      ref="transfer"
      v-model:value="configure.value"
      :options="configure.options"
      :source-title="configure.sourceTitle"
      :target-title="configure.targetTitle"
      filterable
    />
    <n-form
      v-if="modelTitle == '新增用户' || modelTitle == '修改用户'"
      :label-width="80"
      :model="addFormValue"
      :rules="addFormRules"
      :size="medium"
      label-placement="left"
      ref="addFormRef"
    >
      <n-form-item label="用户名称：" path="roleName">
        <n-input
          v-model:value="addFormValue.roleName"
          clearable
          placeholder="请输入···"
        />
      </n-form-item>
      <n-form-item label="用户类型：" path="roleType">
        <n-radio-group v-model:value="addFormValue.roleType">
          <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="roleStatus">
        <n-radio-group v-model:value="addFormValue.roleStatus">
          <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
      v-if="modelTitle == '新增用户' || modelTitle == '修改用户'"
    >
      <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: "role",
  components: { Search, Add },
  setup() {
    const state = reactive({
      //搜索相关
      queryForm: {
        value: "",
      },
      //表格相关
      columns: [
        // {
        //   type: "selection",
        //   disabled(row, index) {
        //     return row.name === "Edward King 3";
        //   },
        // },
        {
          title: "用户名称",
          key: "roleName",
          align: "center",
        },
        {
          title: "用户类型",
          key: "roleType",
          align: "center",
          render(row) {
            return row.roleType === 0 ? "内部用户" : "外部用户";
          },
        },
        {
          title: "用户状态",
          key: "roleStatus",
          align: "center",
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                type:
                  row.roleStatus === 0
                    ? "info"
                    : row.roleStatus === 1
                    ? "warning"
                    : "success",
              },
              {
                default:
                  row.roleStatus === 0
                    ? "初始化"
                    : row.roleStatus === 1
                    ? "停用"
                    : "正在使用",
              }
            );
          },
        },
        {
          title: "备注",
          key: "remarks",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          width: "400",
          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: "delete",
          default: "删除用户",
        },
        {
          size: "small",
          btnType: "primary",
          type: "configureOrgan",
          default: "配置机构",
        },
        {
          size: "small",
          btnType: "primary",
          type: "configureAuthority",
          default: "配置权限",
        },
      ],
      //弹窗相关
      showModal: false,
      formBtnLoading: false,
      modelTitle: "",
      addFormValue: {
        roleName: "",
        roleType: 0,
        roleStatus: 0,
        remarks: "",
        sortNum: "",
      },
      addFormRules: {
        roleName: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入用户名称",
          },
        ],
        sortNum: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入编号",
          },
        ],
      },
      configure: {
        value: "",
        options: [],
        sourceTitle: "",
        targetTitle: "",
      },
    });
    const queryFormRef = ref(null);
    const tableRef = ref(null);
    const addFormRef = ref(null);
    const dialog = useDialog();
    const message = useMessage();
    //分页
    const paginationReactive = reactive({
      page: 2,
      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 = () => {
      state.data = Array.apply(null, { length: 46 }).map((_, index) => ({
        roleName: `Edward King ${index}`,
        roleType: index % 2 === 0 ? 1 : 0,
        roleStatus: index - 3 === 0 ? 0 : index - 3 > 0 ? 1 : 2,
        remarks: `London, Park Lane no. ${index}`,
      }));
      console.log(state.data);
    };
    //获取穿梭框的options
    const createOptions = () => {
      state.configure.options = Array.apply(null, { length: 100 }).map(
        (v, i) => ({
          label: "Option " + i,
          value: i,
          disabled: i % 5 === 0,
        })
      );
    };
    //获取穿梭框的value
    const createValues = () => {
      state.configure.value = Array.apply(null, { length: 50 }).map(
        (v, i) => i
      );
    };
    //按钮点击事件
    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 "configureOrgan":
          state.modelTitle = "配置机构";
          state.configure.sourceTitle = "待选机构";
          state.configure.targetTitle = "已有机构";
          createOptions();
          createValues();
          state.showModal = true;
          break;
        //配置权限
        case "configureAuthority":
          state.modelTitle = "配置权限";
          state.configure.sourceTitle = "待选权限";
          state.configure.targetTitle = "已有权限";
          createOptions();
          createValues();
          state.showModal = true;
          break;
        //删除
        case "delete":
          dialog.info({
            title: "提示",
            content: `您想删除${row.roleName}`,
            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,
      pagination: paginationReactive,
      createOptions,
      createValues,
      handleClick,
      resetForm,
    };
  },
};
</script>

<style lang="less" scoped>
// ::v-deep(.n-data-table-base-table .n-button) {
//   color: var(--color-text);
// }
::v-deep(.n-dialog__title) {
  padding: 20px !important;
  color: red !important;
}
</style>