<template>
  <PageWrapper contentBackground>
    <template #footer>
      <a-tabs v-model:activeKey="tableType" @change="changeTable">
        <a-tab-pane :key="0" :tab="t('routes.scenes.4dkk')" :disabled="loading" />
        <a-tab-pane :key="1" :tab="t('routes.scenes.4dkj')" :disabled="loading" />
        <a-tab-pane :key="2" :tab="t('routes.scenes.4dssdy')" :disabled="loading" />
        <a-tab-pane :key="4" :tab="t('routes.scenes.obj')" :disabled="loading" />
        <a-tab-pane :key="5" :tab="t('routes.scenes.4dsg')" :disabled="loading" />
        <a-tab-pane :key="6" :tab="t('routes.scenes.4dsgobj')" :disabled="loading" />
      </a-tabs>
    </template>
    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
        <template #toolbar>
          <a-button type="primary" @click="patchRestoreScene">
            {{ t('routes.archive.patchRestore') }}</a-button
          >
        </template>

        <template #cover="{ record }">
          <TableImg
            :size="120"
            :simpleShow="true"
            :imgList="[record.sceneThumb || '/resource/img/header.jpg']"
          />
        </template>
        <template #link="{ record }">
          <span>{{ record.sceneWebsite }}</span>
        </template>
        <template #payStatus="{ record }">
          <span v-if="record.payStatus != -2"> {{ t('routes.archive.payStatus0') }}</span>
          <span v-else>{{ t('routes.archive.payStatus1') }}</span>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                // color: 'warning',
                label: t('routes.archive.restore'),
                // disabled: record.status != -2,
                onClick: restoreScene.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <RestoreModal
      @register="registerRestoreModal"
      @success="handlerestoreSuccess"
      @cancel="handlerestoreCancel"
    />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, computed, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import {
    BasicTable,
    useTable,
    BasicColumn,
    FormProps,
    TableAction,
    TableImg,
  } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useModal } from '/@/components/Modal';
  import { Tabs } from 'ant-design-vue';
  // import { sceneDetail, buildSceneObj } from '/@/api/lastApi/index';

  import { ListApi } from '/@/api/archive/list';
  import { useI18n } from '/@/hooks/web/useI18n';
  import RestoreModal from './restoreModal.vue';
  // import { useUserStore } from '/@/store/modules/user';

  import { useLocaleStore } from '/@/store/modules/locale';
  const localeStore = useLocaleStore();
  const [registerRestoreModal, { openModal: openRestoreModal }] = useModal();

  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      TableImg,
      PageWrapper,
      RestoreModal,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const { createMessage } = useMessage();

      const { t } = useI18n();
      const loading = ref(false);
      const tableType = ref<Number>(0); //0看看 、1看见、2深时
      const isJA = computed(() => localeStore.getLocale === 'ja');
      const columns: BasicColumn[] = [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 80,
          defaultHidden: true,
        },
        {
          title: t('routes.scenes.sceneName'),
          dataIndex: 'sceneName',
          ellipsis: false,
          width: 120,
        },
        {
          title: t('routes.archive.userName'),
          dataIndex: 'userName',
          ellipsis: false,
          width: 120,
        },
        {
          title: t('routes.scenes.webSite'),
          dataIndex: 'sceneWebsite',
          ellipsis: false,
          slots: { customRender: 'link' },
          width: 180,
        },
        {
          title: t('routes.scenes.appListPicUrl'),
          dataIndex: 'sceneThumb',
          ellipsis: true,
          slots: { customRender: 'cover' },
          width: 150,
        },
        {
          title: t('routes.scenes.childName'),
          dataIndex: 'snCode',
          width: 120,
        },
        {
          title: t('routes.scenes.num'),
          dataIndex: 'sceneNum',
          width: 180,
        },
        {
          // '场景状态'
          title: t('routes.archive.sceneStatus'),
          dataIndex: 'payStatus',
          slots: { customRender: 'payStatus' },
          width: 180,
        },
        {
          title: t('routes.scenes.createTime'),
          dataIndex: 'shootingTime',
          width: 140,
        },

        {
          title: t('common.operation'),
          dataIndex: '',
          slots: { customRender: 'action' },
          width: isJA.value ? 100 : 100,
          // centered: true,
          fixed: 'right',
        },
      ];

      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          {
            field: 'userName',
            label: t('routes.archive.userName'),
            component: 'Input',
            span: 3,
            colProps: {
              lg: 6,
              xl: 6,
              xxl: 6,
              sm: 12,
              xs: 24,
            },
          },
          {
            field: 'shootingTime',
            label: t('routes.archive.shootingTime'),
            labelWidth: 130,
            component: 'RangePicker',
            componentProps: {
              showTime: false,
              valueFormat: 'YYYY-MM-DD',
              format: 'YYYY-MM-DD',
            },
            colProps: {
              lg: 6,
              xl: 6,
              xxl: 6,
              sm: 12,
              xs: 24,
            },
          },
          // {
          //   field: 'shootingEndTime',
          //   label: t('routes.archive.shootingEndTime'),
          //   component: 'DatePicker',
          //   componentProps: {
          //     showTime: true,
          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
          //     format: 'YYYY-MM-DD HH:mm',
          //   },
          //   colProps: {
          //     lg: 6,
          //     xl: 6,
          //     xxl: 6,
          //     sm: 12,
          //     xs: 24,
          //   },
          // },
        ],
      };

      const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
        title: t('routes.dashboard.archiveList'),
        api: ListApi,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        searchInfo: { type: tableType, lang: isJA.value ? 'ja' : 'zh' },
        tableSetting: { fullScreen: true },
        clickToRowSelect: false,
        showIndexColumn: true,
        rowKey: 'sceneNum',
        beforeFetch: (T) => {
          loading.value = true;
          return T;
        },
        afterFetch: (T) => {
          loading.value = false;
          return T;
        },
      });

      async function restoreScene(record: Recordable) {
        try {
          console.log('record', record);
          openRestoreModal(true, {
            tableType: tableType.value,
            sceneNum: [record.sceneNum],
          });
        } catch (error) {
          console.log('error', error);
        }
      }

      function changeTable(val: Number) {
        tableType.value = val;
        clearSelectedRowKeys();
        reload();
      }
      const patchRestoreScene = async () => {
        const keys = getSelectRowKeys();

        if (keys.length > 0) {
          console.log('patchRestoreScene', keys);
          openRestoreModal(true, {
            tableType: tableType.value,
            sceneNum: keys,
          });
        } else {
          createMessage.info(t('modal.atLeastOne'));
        }
      };

      const handlerestoreSuccess = () => {
        console.log('handlerestoreSuccess');
        clearSelectedRowKeys();
        setTimeout(() => {
          reload();
        }, 1000);
      };
      const handlerestoreCancel = () => {
        console.log('handlerestoreCancel');
        clearSelectedRowKeys();
      };

      return {
        reload,
        registerTable,
        createMessage,
        t,
        restoreScene,
        changeTable,
        tableType,
        loading,
        isJA,
        patchRestoreScene,
        registerRestoreModal,
        openRestoreModal,
        clearSelectedRowKeys,
        handlerestoreSuccess,
        handlerestoreCancel,
      };
    },
  });
</script>
<style scoped>
  :deep(.ant-table-tbody > tr > td:not(.ant-table-selection-column, .ant-table-cell-fix-right)) {
    opacity: 0.5;
    pointer-events: none;
  }
  :deep(.ant-table-tbody
      > tr.ant-table-row-selected
      > td:not(.ant-table-selection-column, .ant-table-cell-fix-right)) {
    /* background-color: gray; */
    opacity: 0.6;
    pointer-events: all;
  }
  :deep(.ant-picker) {
    width: 100%;
  }
  /* :deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
    background-color: red !important;
  } */
</style>
