<template>
  <BasicModal
    :confirmLoading="loading"
    v-bind="$attrs"
    @register="register"
    :title="t('routes.scene.sceneAsync')"
    @visible-change="handleVisibleChange"
    @ok="handleSubmit"
    width="1200px"
    :min-height="0"
  >
    <div class="">
      <a-tabs v-model:activeKey="tableType" @change="changeTable">
        <!-- <a-tab-pane :key="0" :tab="t('routes.scene.tableType.0')" />
        <a-tab-pane :key="1" :tab="t('routes.scene.tableType.1')" />
        <a-tab-pane :key="2" :tab="t('routes.scene.tableType.2')" />
        <a-tab-pane :key="5" :tab="t('routes.scene.tableType.5')" />
        <a-tab-pane :key="6" :tab="t('routes.scene.tableType.6')" /> -->
        <a-tab-pane :key="7" :tab="t('routes.scene.tableType.7')" />
      </a-tabs>
      <BasicTable @register="registerTable" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, h, onMounted, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { Descriptions, Tabs, Progress } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { Time } from '/@/components/Time';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { sceneMove } from '/@/api/operate';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicTable, FormProps, BasicColumn, useTable } from '/@/components/Table';
  const { t, locale } = useI18n();
  import { xspaceSceneList } from '/@/api/operate';

  export default defineComponent({
    components: {
      BasicModal,
      BasicTable,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(props, { emit }) {
      const loading = ref(false);
      const modelRef = ref({});
      console.log('locale', locale);
      const tableType = ref<Number>(7); //0看看 、1看见、2深时
      const selectPriceDate = ref('');
      const fileFlow = reactive({
        file: null,
      });
      const columns: BasicColumn[] = [
        {
          title: t('routes.scene.sceneName'),
          dataIndex: 'title',
          // slots: { customRender: 'href' },
          width: 150,
        },
        {
          title: t('routes.scene.num'),
          dataIndex: 'num',
          ellipsis: true,
          width: 180,
        },
        {
          title: t('routes.scene.userName'),
          dataIndex: 'userName',
          ellipsis: true,
          width: 180,
        },
        {
          title: t('routes.scene.shotTime'),
          dataIndex: 'createTime',
          ellipsis: true,
          width: 180,
          customRender: ({ record }) => {
            return (
              record.createTime &&
              h(Time, {
                value: record.createTime,
                mode: 'datetime',
              })
            );
          },
        },
      ];

      const searchForm: Partial<FormProps> = {
        labelWidth: 80,
        schemas: [
          {
            field: 'title',
            label: t('routes.scene.sceneName'),
            component: 'Input',
            labelWidth: 80,
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 5,
              xxl: 5,
            },
          },
          {
            label: t('routes.scene.num'),
            field: 'num',
            component: 'Input',
            labelWidth: 80,
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 5,
              xxl: 5,
            },
          },
          // {
          //   field: 'userName',
          //   label: t('routes.scene.userName'),
          //   component: 'Input',
          //   componentProps: {
          //     maxLength: 100,
          //   },
          //   colProps: {
          //     xl: 5,
          //     xxl: 5,
          //   },
          // },
          {
            field: 'timeList',
            labelWidth: locale.value == 'en' ? 140 : 80,
            label: t('routes.scene.timeList'),
            component: 'RangePicker',
            componentProps: {
              maxLength: 100,
              valueFormat: 'YYYY-MM-DD',
              format: 'YYYY-MM-DD',
              onCalendarChange: (date) => {
                console.log('current', date);
                selectPriceDate.value = date[0];
              },
              onOpenChange: (status) => {
                if (!status) {
                  selectPriceDate.value = '';
                }
              },
              disabledDate: (current) => {
                if (selectPriceDate.value) {
                  return (
                    current > dayjs(selectPriceDate.value).add(3, 'year') ||
                    current < dayjs(selectPriceDate.value).subtract(3, 'year')
                  );
                } else {
                  return false;
                }
              },
            },
            colProps: {
              xl: 7,
              xxl: 7,
            },
          },
        ],
      };
      const { createMessage } = useMessage();
      const [registerTable, { reload, getSelectRowKeys, getForm, clearSelectedRowKeys }] = useTable({
        api: xspaceSceneList,
        actionColumn: false,
        // title: `场景列表`,
        // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
        columns: columns,
        searchInfo: { type: tableType },
        useSearchForm: true,
        rowSelection: { type: 'checkbox' },
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        rowKey: 'num',
        handleSearchInfoFn: (T) => {
          if(T.timeList){
            T.timeStart =  T.timeList[0]+' 00:00:00'
            T.timeEnd =  T.timeList[1]+' 23:59:59'
          }
          return T;
        },
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        maxHeight: 200,
        canResize: true,
      });
      onMounted(() => {});
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        console.log(data);
        reload();
        data && onDataReceive(data);
      });
      function changeTable(val: string) {
        tableType.value = val;
        reload();
      }
      function onDataReceive(data) {
        modelRef.value = data;
      }
      const handleSubmit = async () => {
          loading.value = true;
          try {
          const params = getSelectRowKeys();
          console.log('res', params);
          if(params && params.length == 0){
            loading.value = false;
            return createMessage.error(t('routes.scene.transferTips'))
          }
          const res = await sceneMove(params);
          clearSelectedRowKeys();
          reload();
          closeModal();
          createMessage.success(t('routes.scene.transferSccuse'));
          emit('update');
          loading.value = false;
        } catch (error) {
          console.log('not passing', error);
          loading.value = false;
        }
      };
      function handleVisibleChange(v) {
        let formActions = getForm();
        !v && formActions.resetFields();
        // v && props.userData && nextTick(() => onDataReceive(props.userData));
      }

      return {
        register,
        registerTable,
        model: modelRef,
        fileFlow,
        handleVisibleChange,
        handleSubmit,
        addListFunc,
        changeTable,
        loading,
        t,
      };
    },
  });
</script>
