<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('routes.scenes.unAssistant')"
    width="800px"
    :minHeight="400"
    @ok="handleSubmit"
    :centered="true"
    @cancel="handleClose"
  >
    <div class="pt-2px pr-3px flex">
      <BasicTable
        :searchInfo="searchInfo"
        :rowSelection="{ type: 'checkbox' }"
        class="flex-1"
        height="100%"
        @register="registerTable"
      >
        <template #toolbar>
          <a-button type="primary" @click="handlePatchSelect">
            {{ t('routes.corporation.patchAction') }}</a-button
          >
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: t('routes.scenes.unAssistant'),
                // onClick: handleUnAssistant.bind(null, record),
                popConfirm: {
                  title: t('common.isConfirm'),
                  confirm: handleUnAssistant.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { unCollaborateApi, getUnCollaborateDetailApi } from '/@/api/scene/list';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { createMessage, createConfirm } = useMessage();

  const { t } = useI18n();

  const columns: BasicColumn[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80,
      defaultHidden: true,
    },
    {
      title: t('routes.scenes.sceneName'),
      dataIndex: 'title',
      ellipsis: false,
      width: 120,
    },
    {
      title: t('routes.scenes.num'),
      dataIndex: 'num',
      ellipsis: false,
      width: 120,
    },
  ];

  export default defineComponent({
    components: { BasicModal, BasicTable, TableAction },
    props: {
      // userData: { type: Object },
    },
    emits: ['register', 'submit'],
    setup(_, { emit }) {
      const searchInfo = ref({
        id: '',
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      const [registerTable, { reload, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
        title: t('routes.scenes.sceneList'),
        api: getUnCollaborateDetailApi,
        columns: columns,
        canResize: true,
        rowKey: 'id',
        immediate: false,
        bordered: true,
        clickToRowSelect: false,
        actionColumn: {
          width: 120,
          title: t('common.operation'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      async function onDataReceive(data) {
        searchInfo.value.id = String(data.id);
        console.log('searchInfo', searchInfo.value);
        reload();
      }
      const handleSubmit = async () => {
        clearSelectedRowKeys();
        emit('submit');
        closeModal();
      };

      function handleClose() {
        // resetFields();
        clearSelectedRowKeys();
        emit('submit');
        closeModal();
      }
      const handleUnAssistant = async (record: Recordable) => {
        console.log('record', record);
        await unCollaborateApi({
          contractorId: searchInfo.value.id,
          detailIds: [record.id],
        });
        createMessage.success(t('common.optSuccess'));
        clearSelectedRowKeys();
        reload();
      };
      function handlePatchSelect() {
        const keys = getSelectRowKeys();
        if (keys.length > 0) {
          createConfirm({
            iconType: 'warning',
            title: () => t('routes.corporation.patchAction'),
            content: () => t('common.isConfirm'),
            onOk: async () => {
              try {
                await unCollaborateApi({
                  contractorId: searchInfo.value.id,
                  detailIds: keys,
                });
                createMessage.success(t('common.optSuccess'));
                clearSelectedRowKeys();
                reload();
                // closeModal();
              } catch (error) {}
            },
          });
        } else {
          createMessage.info(t('modal.atLeastOne'));
        }
      }

      return {
        searchInfo,
        t,
        register,
        handleSubmit,
        closeModal,
        handleClose,
        registerTable,
        handleUnAssistant,
        handlePatchSelect,
      };
    },
  });
</script>
