<template>
  <n-card :bordered="false" class="proCard" title="代码生成">
    <!--    <n-card :bordered="false" title="代码生成"> 你可以在这里查看到平台所有的短信发送记录。 </n-card>-->
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" ref="searchFormRef">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1090"
    >
      <template #tableTitle>
        <n-button type="primary" @click="addTable">
          <template #icon>
            <n-icon>
              <PlusOutlined />
            </n-icon>
          </template>
          立即生成
        </n-button>
        &nbsp;
        <n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
          <template #icon>
            <n-icon>
              <DeleteOutlined />
            </n-icon>
          </template>
          批量删除
        </n-button>
      </template>
    </BasicTable>

    <n-modal
      v-model:show="showModal"
      :show-icon="false"
      preset="dialog"
      title="立即生成"
      :style="{
        width: dialogWidth,
      }"
    >
      <!--      <n-alert :show-icon="false" type="info">-->
      <!--        注意：！-->
      <!--      </n-alert>-->
      <n-form
        :model="formParams"
        :rules="rules"
        ref="formRef"
        label-placement="left"
        :label-width="80"
        class="py-4"
      >
        <n-form-item label="生成类型" path="genType">
          <n-select
            placeholder="请选择"
            :options="selectList.genType"
            v-model:value="formParams.genType"
            :on-update:value="onUpdateValueGenType"
          />
        </n-form-item>

        <n-form-item label="生成模板" path="genTemplate">
          <n-select
            placeholder="请选择"
            :options="genTemplateOptions"
            v-model:value="formParams.genTemplate"
            :onFocus="onFocusGenTemplate"
          />
        </n-form-item>

        <n-form-item
          label="数据库"
          path="dbName"
          v-if="formParams.genType >= 10 && formParams.genType < 20"
        >
          <n-select
            placeholder="请选择"
            :options="selectList.db"
            v-model:value="formParams.dbName"
            @update:value="handleDbUpdateValue"
          />
        </n-form-item>
        <n-form-item
          label="数据库表"
          path="tableName"
          v-if="formParams.genType >= 10 && formParams.genType < 20"
        >
          <n-select
            filterable
            tag
            :loading="tablesLoading"
            placeholder="请选择"
            :options="selectList.tables"
            v-model:value="formParams.tableName"
            @update:value="handleTableUpdateValue"
            :disabled="formParams.dbName === ''"
          />
        </n-form-item>

        <n-form-item
          label="菜单名称"
          path="tableComment"
          v-show="formParams.genType >= 10 && formParams.genType < 20"
        >
          <n-input placeholder="请输入" v-model:value="formParams.tableComment" />
        </n-form-item>

        <n-form-item label="实体命名" path="varName">
          <n-input placeholder="请输入" v-model:value="formParams.varName" />
        </n-form-item>
      </n-form>

      <template #action>
        <n-space>
          <n-button @click="() => (showModal = false)">取消</n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">生成配置</n-button>
        </n-space>
      </template>
    </n-modal>
  </n-card>
</template>

<script lang="ts" setup>
  import { h, onBeforeMount, reactive, ref } from 'vue';
  import { NTag, TreeSelectOption, useDialog, useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { List, Delete, Edit, Selects, TableSelect } from '@/api/develop/code';
  import { useRouter } from 'vue-router';
  import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
  import { newState } from '@/views/develop/code/components/model';
  import { getOptionLabel } from '@/utils/hotgo';

  const selectList = ref({
    db: [],
    genType: [],
    status: [],
    tables: [],
    formMode: [],
    formRole: [],
    dictMode: [],
    whereMode: [],
  });
  const columns = [
    {
      title: '生成ID',
      key: 'id',
      width: 80,
    },
    {
      title: '生成类型',
      key: 'genType',
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: 'info',
            bordered: false,
          },
          {
            default: () => getOptionLabel(selectList.value.genType, row.genType),
          }
        );
      },
      width: 180,
    },
    {
      title: '生成模板',
      key: 'genTemplate',
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: 'default',
            bordered: false,
          },
          {
            default: () => row.genTemplateGroup,
          }
        );
      },
      width: 120,
    },
    {
      title: '实体命名',
      key: 'varName',
      render(row) {
        return row.varName;
      },
      width: 180,
    },
    {
      title: '数据库',
      key: 'dbName',
      width: 150,
    },
    {
      title: '数据表',
      key: 'tableName',
      width: 200,
    },
    {
      title: '菜单名称',
      key: 'tableComment',
      width: 200,
    },
    {
      title: '生成状态',
      key: 'status',
      render(row) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px',
            },
            type: row.status == 1 ? 'success' : 'warning',
            bordered: false,
          },
          {
            default: () => getOptionLabel(selectList.value.status, row.status),
          }
        );
      },
      width: 150,
    },
    {
      title: '创建时间',
      key: 'createdAt',
      width: 180,
    },
    // {
    //   title: '更新时间',
    //   key: 'updatedAt',
    //   width: 180,
    // },
  ];

  const dialog = useDialog();
  const batchDeleteDisabled = ref(true);
  const checkedIds = ref([]);
  const searchFormRef = ref<any>();

  const schemas = ref<FormSchema[]>([
    {
      field: 'genType',
      component: 'NSelect',
      label: '生成类型',
      componentProps: {
        placeholder: '请选择生成类型',
        options: [],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'varName',
      component: 'NInput',
      label: '实体命名',
      componentProps: {
        placeholder: '请输入实体命名',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      rules: [{ trigger: ['blur'] }],
    },
    {
      field: 'status',
      component: 'NSelect',
      label: '生成状态',
      componentProps: {
        placeholder: '请选择状态码',
        options: [],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
  ]);

  const router = useRouter();
  const showModal = ref(false);
  const formBtnLoading = ref(false);
  const formRef: any = ref(null);
  const message = useMessage();
  const actionRef = ref();
  const formParams = ref<any>();

  const rules = {
    varName: {
      required: true,
      trigger: ['blur', 'input'],
      message: '实体命名不能为空,首字母大写',
    },
  };

  const actionColumn = reactive({
    width: 220,
    title: '操作',
    key: 'action',
    // fixed: 'right',
    render(record) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '生成配置',
            onClick: handleEdit.bind(null, record),
          },
          {
            label: '删除',
            onClick: handleDelete.bind(null, record),
          },
        ],
      });
    },
  });

  const [register, {}] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas,
  });

  function onCheckedRow(rowKeys) {
    batchDeleteDisabled.value = rowKeys.length <= 0;
    checkedIds.value = rowKeys;
  }

  function handleDelete(record: Recordable) {
    dialog.warning({
      title: '警告',
      content: '你确定要删除？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        Delete(record).then((_res) => {
          console.log('_res:' + JSON.stringify(_res));
          message.success('操作成功');
          reloadTable();
        });
      },
      onNegativeClick: () => {
        // message.error('取消');
      },
    });
  }

  function batchDelete() {
    dialog.warning({
      title: '警告',
      content: '你确定要删除？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: () => {
        Delete({ id: checkedIds.value }).then((_res) => {
          message.success('操作成功');
          reloadTable();
        });
      },
      onNegativeClick: () => {
        // message.error('取消');
      },
    });
  }

  const loadDataTable = async (res) => {
    mapWidth();
    return await List({ ...res, ...searchFormRef.value?.formModel });
  };

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleEdit(record: Recordable) {
    router.push({ name: 'develop_code_deploy', params: { id: record.id } });
  }

  function handleSubmit(_values: Recordable) {
    reloadTable();
  }

  function handleReset(_values: Recordable) {
    reloadTable();
  }

  function addTable() {
    showModal.value = true;
    formParams.value = newState(null);
  }

  function confirmForm(e) {
    e.preventDefault();
    formBtnLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {
        console.log('formParams:' + JSON.stringify(formParams.value));
        Edit(formParams.value).then((res) => {
          message.success('生成成功，正在前往配置');
          setTimeout(() => {
            showModal.value = false;
            router.push({ name: 'develop_code_deploy', params: { id: res.id } });
          });
        });
      } else {
        message.error('请填写完整信息');
      }
      formBtnLoading.value = false;
    });
  }

  const dialogWidth = ref('50%');
  function mapWidth() {
    let val = document.body.clientWidth;
    const def = 840; // 默认宽度
    if (val < def) {
      dialogWidth.value = '100%';
    } else {
      dialogWidth.value = def + 'px';
    }

    return dialogWidth.value;
  }

  onBeforeMount(async () => {
    await loadSelect();
  });

  const loadSelect = async () => {
    selectList.value = await Selects({});

    for (const item of schemas.value) {
      switch (item.field) {
        case 'status':
          item.componentProps.options = selectList.value.status;
          break;
        case 'genType':
          item.componentProps.options = selectList.value.genType;
          break;
      }
    }
  };

  const tablesLoading = ref(false);
  // 处理选项更新
  async function handleDbUpdateValue(
    value: string | number | Array<string | number> | null,
    _option: TreeSelectOption | null | Array<TreeSelectOption | null>
  ) {
    tablesLoading.value = true;
    await loadTableSelect(value);
    tablesLoading.value = false;
  }

  async function loadTableSelect(value) {
    selectList.value.tables = await TableSelect({ name: value });
  }

  function handleTableUpdateValue(value, option) {
    formParams.value.varName = option?.defVarName as string;
    formParams.value.daoName = option?.daoName as string;
    formParams.value.tableComment = option?.defTableComment as string;
  }

  const genTemplateOptions = ref([]);
  function onFocusGenTemplate() {
    for (let i = 0; i < selectList.value.genType?.length; i++) {
      if (selectList.value.genType[i].value === formParams.value.genType) {
        genTemplateOptions.value = selectList.value.genType[i].templates;
        formParams.value.genTemplate = null;
      }
    }
  }

  function onUpdateValueGenType(value) {
    formParams.value.genType = value;
    onFocusGenTemplate();
  }
</script>

<style lang="less" scoped></style>
