<template>
  <div class="page-div categories-page">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'isExternal'">
          <a-tag color="green" v-if="record.isExternal">外部链接</a-tag>
          <a-tag color="blue" v-else>系统功能</a-tag>
        </template>
        <template v-if="column.key === 'isShow'">
          <a-switch
            v-model:checked="record.isShow"
            checkedChildren="启用"
            unCheckedChildren="停用"
            @change="changeIsShow(record)"
          />
        </template>
      </template>
    </BasicTable>
  </div>
  <SpecialModal ref="modalForm" @register="registerModal" @submit="submit" />
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, watch, createVNode, unref } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { useModal } from '@/components/Modal';
  import { useGlobSetting } from '@/hooks/setting';
  import { BasicTable, useTable } from '@/components/Table';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';
  import SpecialModal from './Modal/index.vue';
  import {
    LoadDataBaseInfo,
    AddOrUpdateForm,
    DeleteEntity,
    UpdateIsShow,
  } from '@/api/sys/specialcolumn';
  import { columns, searchFormSchema } from './index.data';

  const { createMessage } = useMessage();
  const { uploadUrl } = useGlobSetting();

  // 弹窗的数据
  const modalForm = ref();
  // 默认数据
  const modalData = reactive({
    title: '',
    data: {
      id: '' as string,
      title: '' as string,
      isShow: true as boolean,
      imgUrl: '' as string,
      sort: 0 as number,
    } as any,
    type: '',
  });
  // 默认排序
  let sortNumber = 0;

  // 弹窗
  const [registerModal, { openModal, closeModal }] = useModal();
  // 表格
  const [registerTable, { reload, getSelectRows }] = useTable({
    api: LoadDataBaseInfo,
    columns: columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    showIndexColumn: false,
    rowSelection: {
      type: 'radio',
    },
    useSearchForm: true,
    bordered: true,
    showTableSetting: true,
    handleSearchInfoFn(info) {
      return info;
    },
    afterFetch: (res) => {
      sortNumber = res.length + 1;
    },
  });
  // 修改是否显示状态
  const changeIsShow = (record) => {
    UpdateIsShow({ id: record.id, isshow: record.isShow })
      .then((res) => {
        if (res) {
          createMessage.success(`修改表单状态成功`);
        } else {
          createMessage.error(`修改表单状态失败`);
        }
      })
      .catch(() => {
        createMessage.error('修改表单状态失败');
      });
  };
  // 按键分类
  const buttonClick = async (type) => {
    switch (type) {
      case 'btnAdd':
        let temp_add = cloneDeep(modalData);
        temp_add.title = '添加';
        temp_add.type = 'add';
        temp_add.data = {
          id: '',
          title: '',
          isShow: true,
          imgUrl: '',
          sort: sortNumber,
        };
        openModal(true, temp_add);
        break;
      case 'btnEdit':
        if (getSelectRows().length !== 1) {
          message.warning('请选择一条数据');
          return;
        }
        let temp_edit = cloneDeep(modalData);
        temp_edit.title = '编辑';
        temp_edit.data = getSelectRows()[0];
        temp_edit.type = 'edit';
        openModal(true, temp_edit);
        break;
      case 'btnDelete':
        if (getSelectRows().length !== 1) {
          message.warning('请选择一条数据');
          return;
        }
        await DeleteEntity({ id: getSelectRows()[0].id });
        closeModal();
        reload();
        break;
    }
  };
  // 提交
  async function submit(data) {
    await AddOrUpdateForm(data);
    closeModal();
    reload();
  }
</script>

<style lang="scss" scoped>
  .page-div {
    position: relative;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: flex;
    .left-div {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      .header {
        display: flex;
        flex-direction: column;
        padding: 10px;
        border-bottom: 1px solid #eee;
        .buttons-div {
          display: flex;
          justify-content: space-between;
        }
        .search-div {
          margin-top: 10px;
          display: flex;
        }
      }
      .content {
        border-radius: 5px;
        height: 100%;
        overflow: auto;
        .showTree {
          height: 100%;
          overflow: auto;
        }
      }
    }
    .right-div {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
</style>
<style lang="scss">
  .categories-page {
    .left-div {
      .h-full {
        height: auto;
      }
      .search-div {
        .ant-btn-primary {
          background-color: #2a7dc9;
        }
        .ant-input-search-button {
          width: 42px;
        }
      }
    }
  }
  .categories-modal {
    .ant-modal-footer > button {
      display: none;
    }
    .ant-modal-footer {
      margin-top: 0px;
      border-top: 0px;
    }
  }
  // ant-table-header
</style>
