<template>
  <div class="normal-container project-cfg-box">
    <div class="header-box">
      <a-space>
        <a-input
          v-model:value="projectName"
          placeholder="请输入项目名称"
          allow-clear
          style="width: 200px"
          @change="search"
        />
        <a-button type="primary" @click="openCreateModal">新建</a-button>
      </a-space>
    </div>
    <div class="content-box">
      <a-table
        :columns="projectCfgCols"
        :data-source="dataList"
        :pagination="false"
        size="small"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'is_show'">
            <a-switch
              v-model:checked="record.is_show"
              :checkedValue="1"
              :unCheckedValue="0"
              @change="toChangeStatus(record.project_id, $event)"
            />
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <a-button
                type="link"
                size="small"
                @click="toGetDetail(record.project_id)"
              >
                编辑
              </a-button>
              <a-popconfirm
                title="确定删除？"
                @confirm="toDelete(record.project_id)"
              >
                <a-button type="link" size="small">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="pageState.page"
        :total="pageState.total"
        :page-size="pageState.perPage"
        :hide-on-single-page="false"
        size="small"
        class="pagination-box"
        @change="toGetProjectList"
      />
    </div>
    <CreateModal
      :width="700"
      :open="modalState.visible"
      :title="modalState.title"
      :type="modalState.type"
      :data="modalState.data"
      :confirmLoading="saveLoading"
      @cancel="modalState.visible = false"
      @ok="toSave"
    />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { message } from "ant-design-vue";
import { projectCfgCols } from "./config";
import {
  getProjectList,
  saveProject,
  deleteProject,
  getProjectDetail,
  updateStatus,
} from "./service";
import CreateModal from "./components/create-modal.vue";

const dataList = ref([]);
const listLoading = ref(false);
const saveLoading = ref(false);
const detailLoading = ref(false);
const projectName = ref("");

const modalState = reactive({
  title: undefined,
  visible: false,
  type: "", // add - 新建，edit - 编辑
  data: {
    project_name: undefined,
    is_show: 0,
    database_address: undefined,
    database_port: undefined,
    database_name: undefined,
    database_username: undefined,
    database_password: undefined,
  },
});

const pageState = reactive({
  page: 1,
  perPage: 20,
  total: 0,
});

onMounted(() => {
  toGetProjectList();
});

// 获取列表
const toGetProjectList = () => {
  listLoading.value = true;
  getProjectList({
    page: pageState.page,
    perPage: pageState.perPage,
    projectName: projectName.value,
  })
    .then((res) => {
      dataList.value = res.data.list;
      pageState.total = res.data.total;
    })
    .finally(() => {
      listLoading.value = false;
    });
};

// 保存
const toSave = (data) => {
  saveLoading.value = true;
  saveProject(data)
    .then(() => {
      message.success("保存成功");
      modalState.visible = false;
      toGetProjectList();
    })
    .finally(() => {
      saveLoading.value = false;
    });
};

// 获取详情
const toGetDetail = (projectId) => {
  detailLoading.value = true;
  modalState.visible = true;
  modalState.title = "编辑";
  modalState.type = "edit";
  getProjectDetail({ projectId }).then((res) => {
    modalState.data = res.data;
  });
};

// 删除
const toDelete = (id) => {
  deleteProject({ projectId: id }).then(() => {
    message.success("删除成功");
    search();
  });
};

const toChangeStatus = (id, status) => {
  updateStatus({ project_id: id, status }).then(() => {
    message.success("修改成功");
    search();
  });
};

const search = () => {
  pageState.page = 1;
  toGetProjectList();
};

// 点击新建
const openCreateModal = () => {
  modalState.visible = true;
  modalState.title = "新建";
  modalState.type = "add";
  modalState.data = {};
};
</script>

<style lang="less" scope>
.header-box {
  margin-bottom: 10px;
}

.ycode-ant-table-wrapper {
  margin-bottom: 10px;
}

.pagination-box {
  text-align: center;
}
</style>
