<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('routes.devices.browserDevice')"
    @ok="submitModal"
    width="700px"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm">
        <template #userName="{ model, field }">
          {{ model[field] }}
        </template>
        <template #name="{ model, field }">
          {{ model[field] }}
        </template>
        <template #cameraNum="{ model, field }">
          {{ model[field] }}
        </template>
      </BasicForm>
      <BasicTable @register="registerDeviceTable" :searchInfo="searchInfo">
        <template #activatedTime="{ record }">
          <Time v-if="record.activeTime" :value="record.activeTime" mode="datetime" />
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                // icon: 'clarity:info-standard-line',
                label: t('routes.corporation.unBind'),
                popConfirm: {
                  title: t('routes.corporation.isUnBind'),
                  confirm: handleUnbindDevice.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { AddDevice, checkDevice } from '/@/api/corporation/modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { ListCompanyDeviceApi, unDeviceApi } from '/@/api/corporation/list';
  import { Time } from '/@/components/Time';

  export default defineComponent({
    components: { BasicModal, BasicForm, BasicTable, Time, TableAction },
    props: {
      userData: { type: Object },
    },
    emits: ['register', 'ok'],
    setup(_, { emit }) {
      // const modelRef = ref({});
      const num = ref(0);
      const { t } = useI18n();
      const { createMessage } = useMessage();

      const searchInfo = reactive<Recordable>({
        id: '',
        userName: '',
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      const schemas: FormSchema[] = [
        {
          field: 'name',
          label: t('routes.corporation.enterpriseName'),
          slot: 'userName',
          component: 'Input',
        },
        {
          field: 'userName',
          label: t('routes.corporation.enterpriseId'),
          slot: 'name',
          component: 'Input',
        },
        {
          field: 'cameraNum',
          label: t('routes.corporation.cameraNum'),
          slot: 'cameraNum',
          component: 'Input',
        },
      ];

      const [
        registerForm,
        {
          setFieldsValue,
          resetFields,
          // getFieldsValue,
          // validateFields,
          // appendSchemaByField,
          // removeSchemaByFiled,
        },
      ] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      const columns: BasicColumn[] = [
        {
          title: 'ID',
          dataIndex: 'id',
          fixed: 'left',
          width: 100,
        },
        {
          title: t('routes.corporation.deviceId'),
          dataIndex: 'childName',
          width: 100,
        },
        {
          title: t('routes.corporation.activeTime'),
          dataIndex: 'activeTime',
          slots: { customRender: 'activatedTime' },
          width: 100,
        },
      ];

      const [registerDeviceTable, { reload }] = useTable({
        title: '',
        api: ListCompanyDeviceApi,
        columns: columns,
        useSearchForm: false,
        // formConfig: searchForm,
        showTableSetting: false,
        showIndexColumn: false,
        immediate: false,
        rowKey: 'id',
        pagination: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'totalCount',
        },
        actionColumn: {
          width: 100,
          title: t('common.operation'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      function onDataReceive(data) {
        // 方式1;
        resetFields();
        setFieldsValue({
          ...data,
        });

        searchInfo.id = data.id;
        searchInfo.userName = data.userName;
        nextTick(reload);
      }

      async function submitModal() {
        emit('ok');
        closeModal();
      }

      function handleVisibleChange() {}
      async function handleUnbindDevice(record: Recordable) {
        console.log('record');
        await unDeviceApi({
          childName: record.childName,
        });
        createMessage.success(t('common.optSuccess'));
        nextTick(reload);
      }
      return {
        register,
        submitModal,
        schemas,
        registerForm,
        // numOnChange,
        // modelRef,
        handleVisibleChange,
        num,
        // errorMsg: error,
        t,
        registerDeviceTable,
        searchInfo,
        handleUnbindDevice,
      };
    },
  });
</script>
