<template>
  <div class="search">
    <n-space>
      <span>服务IP</span>
      <n-select
        v-model:value="searchValue1"
        filterable
        clearable
        :options="options1"
        placeholder="请选择服务IP"
        @update:value="changeIp"
      />
      <span>服务名称</span>
      <n-select
        v-model:value="searchValue2"
        filterable
        clearable
        :options="options2"
        placeholder="请选择服务"
      />
      <span>责任人</span>
      <n-input v-model:value="searchValue3" clearable placeholder="责任人" />
      <n-button type="primary" @click="handleClick('search')">查询</n-button>
      <n-button @click="handleClick('reset')">重置</n-button>
      <n-button type="primary" @click="handleClick('add')">新增</n-button>
    </n-space>
  </div>
  <div class="table">
    <n-data-table
      ref="tableRef"
      :bordered="false"
      :max-height="700"
      striped
      :columns="columns"
      :data="data"
      :remote="true"
      :pagination="pagination"
    ></n-data-table>
  </div>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    preset="card"
    :title="modelTitle"
    :style="{ width: '500px' }"
  >
    <n-form
      :label-width="80"
      :model="addFormValue"
      :rules="addFormRules"
      :size="medium"
      label-placement="left"
      ref="addFormRef"
    >
      <n-form-item label="服务ip：" path="server_ip">
        <n-select
          v-model:value="addFormValue.server_ip"
          filterable
          clearable
          :options="options1"
          placeholder="请选择服务IP"
          @update:value="changeIp"
        />
      </n-form-item>
      <n-form-item label="服务：" path="exeName">
        <n-select
          v-model:value="addFormValue.exeName"
          filterable
          clearable
          :options="options2"
          placeholder="请选择服务IP"
        />
      </n-form-item>
      <n-form-item label="责任人" path="userName">
        <n-input
          v-model:value="addFormValue.userName"
          clearable
          placeholder="请选择责任人"
        />
      </n-form-item>
      <n-form-item label="邮箱：" path="emailAddress">
        <n-input
          v-model:value="addFormValue.emailAddress"
          clearable
          placeholder="请输入邮箱"
        />
      </n-form-item>
      <n-form-item label="手机号：" path="phone">
        <n-input
          v-model:value="addFormValue.phone"
          clearable
          placeholder="请输入手机号"
        />
      </n-form-item>
      <n-form-item label="用途描述：" path="description">
        <n-input
          v-model:value="addFormValue.description"
          type="textarea"
          clearable
          placeholder="请输入用途描述"
        />
      </n-form-item>
    </n-form>
    <template #action>
      <n-space>
        <n-button @click="() => (showModal = false)">取消</n-button>
        <n-button type="primary" @click="handleClick('sure')">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script>
import { ref, reactive, toRefs, h, onMounted } from "vue";
import { NButton, NTag, useDialog } from "naive-ui";
import {
  queryIp,
  queryByIp,
  selectExeManage,
  insertExeManage,
  updateExeManage,
  deleteExeManage,
} from "@/services";
import { isMobile, isEmail } from "@/utils/validate";
import { Sunny } from "@vicons/ionicons5";

export default {
  name: "userManage",
  setup() {
    const addFormRef = ref(null);
    const dialog = useDialog();
    const state = reactive({
      //搜索
      searchValue1: null,
      options1: [],
      searchValue2: null,
      options2: [],
      searchValue3: null,
      //表格
      columns: [
        {
          title: "程序名称",
          key: "exeName",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "程序IP",
          key: "server_ip",
          align: "center",
        },
        {
          title: "责任人",
          key: "userName",
          align: "center",
          width: "80",
        },
        {
          title: "邮箱",
          key: "emailAddress",
          align: "center",
          width: "210",
        },
        {
          title: "手机号",
          key: "phone",
          align: "center",
          width: "120",
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
        },
        {
          title: "修改时间",
          key: "updateTime",
          align: "center",
        },
        {
          title: "用途描述",
          key: "description",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "操作",
          key: "actions",
          align: "center",
          width: "120",
          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(item.type, row),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "edit",
          default: "修改",
        },
        {
          size: "small",
          btnType: "primary",
          type: "delete",
          default: "删除",
        },
      ],
      //弹窗
      showModal: false,
      modelTitle: null,
      addFormValue: {
        server_ip: null,
        exeName: null,
        userName: null,
        emailAddress: null,
        phone: null,
        description: null,
      },
      addFormRules: {
        server_ip: [
          {
            required: true,
            trigger: ["change"],
            message: "请选择服务ip",
          },
        ],
        exeName: [
          {
            required: true,
            trigger: ["change"],
            message: "请选择服务",
          },
        ],
        userName: [
          {
            required: true,
            trigger: ["blur"],
            message: "请输入责任人名称",
          },
        ],
        phone: [
          {
            required: true,
            trigger: ["blur"],
            validator: (rule, value) => {
              return new Promise((resolve, reject) => {
                if (value == null) {
                  reject(Error("请输入手机号"));
                } else if (!isMobile(value)) {
                  reject(Error("手机号格式错误"));
                } else {
                  resolve();
                }
              });
            },
          },
        ],
        emailAddress: [
          {
            required: true,
            trigger: ["blur"],
            validator: (rule, value) => {
              return new Promise((resolve, reject) => {
                if (value == null) {
                  reject(Error("请输入邮箱地址"));
                } else if (!isEmail(value)) {
                  reject(Error("邮箱格式错误"));
                } else {
                  resolve();
                }
              });
            },
          },
        ],
        description: [
          {
            required: true,
            trigger: ["blur"],
            message: "请输入用途描述",
          },
        ],
      },
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    //获取服务ip列表
    const getIpList = async () => {
      let res = await queryIp();
      if (res.code === 200) {
        state.options1 = res.data.map((v) => {
          return {
            label: v.serverIp,
            value: v.serverIp,
          };
        });
      }
    };
    const changeIp = (value) => {
      (state.searchValue2 = null),
        (state.addFormValue.exeName = null),
        getServerName(value);
    };
    // 获取服务列表
    const getServerName = async (value) => {
      let form = new FormData();
      form.append("serverIp", value);
      let res = await queryByIp(form);
      if (res.code == 200) {
        state.options2 = res.data.map((v) => {
          return {
            label: v.exeName,
            value: v.exeName,
          };
        });
      }
    };
    //获取表格数据
    const getTableData = async () => {
      let pramas = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: {
          exeName: state.searchValue1,
          server_ip: state.searchValue2,
          userName: state.searchValue3,
        },
      };
      let res = await selectExeManage(pramas);
      if (res.code == 200) {
        state.data = res.data.data;
        paginationReactive.pageCount = res.data.size;
        paginationReactive.itemCount = res.data.count;
      }
    };
    //按钮点击事件
    const handleClick = (type, row) => {
      switch (type) {
        case "search":
          getTableData();
          break;
        case "reset":
          state.searchValue1 = null;
          state.searchValue2 = null;
          state.searchValue3 = null;
          break;
        case "add":
          state.showModal = true;
          state.modelTitle = "新增";
          break;
        case "edit":
          state.showModal = true;
          state.modelTitle = "修改";
          state.addFormValue = { ...row };
          break;
        case "delete":
          state.modelTitle = null;
          dialog.info({
            title: "提示",
            content: `您想删除id为${row.id}这一项吗？`,
            positiveText: "确定",
            negativeText: "取消",
            onPositiveClick: () => {
              submit(row.id);
            },
            onNegativeClick: () => {},
          });
          break;
        case "sure":
          addFormRef.value.validate((errors) => {
            if (!errors) {
              submit();
            } else {
            }
          });
          break;
      }
    };
    // 提交
    const submit = async (id) => {
      if (state.modelTitle == "新增") {
        let res = await insertExeManage(state.addFormValue);
        if (res.code == 200) {
          state.showModal = false;
          getTableData();
        }
      } else if (state.modelTitle == "修改") {
        let res = await updateExeManage(state.addFormValue);
        if (res.code == 200) {
          state.showModal = false;
          getTableData();
        }
      } else {
        let res = await deleteExeManage(`?id=${id}`);
        if (res.message.code == 200) {
          getTableData();
        }
      }
    };
    onMounted(() => {
      getIpList();
      getServerName();
      getTableData();
    });
    return {
      addFormRef,
      ...toRefs(state),
      pagination: paginationReactive,
      getIpList,
      changeIp,
      getTableData,
      handleClick,
    };
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 10px;
  span {
    line-height: 30px;
  }
}
</style>