<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="分组管理"
    @visible-change="handleVisibleChange"
    @ok="handleSubmit"
    @cancel="handleSubmit"
    :min-height="0"
  >
    <div class="pt-2px pr-3px">
      <div class="mx-5 BasicForm flex">
        <div class="input">
          <a-input style="width: 395px" maxlength="50" showCount v-model:value="fileFlow.dictName" placeholder="请输入" />
        </div>
        <a-button type="primary" @click="handleAdd"> 新增</a-button>
      </div>
      <BasicTable style="padding: 0" @register="registerTable">
        <template #action="{ record }">
          <TableAction
            v-if="!record.isShare"
            stopButtonPropagation
            :actions="[
              {
                label: '删除',
                //icon: 'ic:outline-delete-outline',
                color: 'error',
                onClick: handleDelete.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { sceneMove } from '/@/api/operate';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { getpageList, addOrUpdate, del } from '/@/api/media';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  const { t } = useI18n();
  export default defineComponent({
    components: { BasicModal, BasicTable, TableAction },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(props, { emit }) {
      const modelRef = ref({});
      const fileFlow = reactive({
        dictName: '',
        file: null,
      });
      const columns: BasicColumn[] = [
        {
          title: '名称',
          dataIndex: 'dictName',
          ellipsis: true,
          slots: { customRender: 'href' },
          resizable: true,
          minWidth: 150,
          width: 150,
        },
        {
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          ifShow: true,
          fixed: 'right',
          flag: 'ACTION',
          width: 80,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 50,
        autoSubmitOnEnter: true,
        autoAdvancedLine: 1,
        schemas: [
          {
            field: 'dictName',
            label: '名称',
            component: 'Input',
            componentProps: {
              maxLength: 100,
              placeholder: ' 请名称搜索',
            },
            colProps: {
              xl: 10,
              xxl: 10,
            },
          },
        ],
      };
      const { createMessage, createConfirm } = useMessage();
      const [registerTable, { reload }] = useTable({
        api: getpageList,
        title: ``,
        showTableSetting: false,
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columns,
        // searchInfo: { type: tableType },
        useSearchForm: true,
        formConfig: searchForm,
        showIndexColumn: false,
        canResize: true,
        maxHeight: 300,
        rowKey: 'num',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
      });
      onMounted(() => {});
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        console.log(data);
        data && onDataReceive(data);
      });

      function onDataReceive(data) {
        modelRef.value = data;
      }
      let loading = false
      function handleAdd() {
        if(loading) return;
        console.log('handleAdd', fileFlow.dictName);
        let params = {
          dictName: fileFlow.dictName,
        };
        if (!fileFlow.dictName) {
          return createMessage.warning('请输入名称');
        }
        loading = true;
        addOrUpdate(params).then((res) => {
          createMessage.success('添加成功');
          fileFlow.dictName = '';
          reload();
          loading = false;
        });
      }
      const handleSubmit = async () => {
        window.location.reload();
        emit('update');
        closeModal();
      };
      function handleVisibleChange(v) {
        // console.log(v);
        // v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      function handleCancel() {
        window.location.reload();
      }
      async function handleDelete(record: Recordable) {
        console.log('handleDelete', record);
        createConfirm({
          title: '删除',
          content: '确定要删除吗？',
          onOk: async () => {
            del({ id: record.id }).then(() => {
              createMessage.success({
                content: '删除成功',
              });
              reload();
            });
          },
        });
      }
      return {
        register,
        handleAdd,
        registerTable,
        model: modelRef,
        fileFlow,
        handleVisibleChange,
        handleSubmit,
        addListFunc,
        handleDelete,
        handleCancel,
        t,
      };
    },
  });
</script>
