<template>
  <div>
    <n-card :bordered="false" class="proCard" title="客服记录">
      <BasicForm
        @register="register"
        @submit="handleSubmit"
        @reset="handleReset"
        @keyup.enter="handleSubmit"
        ref="formRef"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>

      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="actionColumn"
        @update:checked-row-keys="onCheckedRow"
        :scroll-x="1090"
      >
      </BasicTable>
    </n-card>
    <RetrofitModal ref="RetrofitModalRef" :infoParams="infoParams" />
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { FormSchema, useForm } from '@/components/Form/index';
  import { ChatLogPlayers, ChatLogInfo } from '@/api/chatLog/chatLog';
  import { columns } from './columns';
  import RetrofitModal from './modal/modal.vue';

  const metaTag = document.createElement('meta');
    metaTag.setAttribute('name', 'referrer');
    metaTag.setAttribute('content', 'no-referrer');
    document.head.appendChild(metaTag);

  const dialogWidth = ref('50%');

  function mapWidth() {
    let val = document.body.clientWidth;
    const def = 720; // 默认宽度
    if (val < def) {
      dialogWidth.value = '100%';
    } else {
      dialogWidth.value = def + 'px';
    }

    return dialogWidth.value;
  }


  const schemas: FormSchema[] = [
    {
      field: 'accId',
      component: 'NInputNumber',
      label: 'AccId',
      componentProps: {
        placeholder: '请输入玩家account id',
        showButton: false,
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'openId',
      component: 'NInput',
      label: 'OpenId',
      componentProps: {
        placeholder: '请输入玩家OpenId',
        showButton: false,
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'playerName',
      component: 'NInput',
      label: '玩家昵称',
      componentProps: {
        placeholder: '请输入玩家昵称',
        showButton: false,
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'time',
      component: 'NDatePicker',
      label: '选择日期',
      componentProps: {
        type: 'datetimerange',
        clearable: true,
        defaultValue: [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'text',
      component: 'NInput',
      label: '聊天内容',
      componentProps: {
        placeholder: '请输入聊天内容',
        showButton: false,
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
  ];

  const formRef: any = ref(null);
  const message = useMessage();
  const actionRef = ref();
  const formParams = ref<any>({
    accId: '',
    name: '',
    createdAt: '',
  });
  const params = ref({
    pageSize: 10,
  });

  const actionColumn = reactive({
    width: 220,
    title: '操作',
    key: 'action',
    // fixed: 'right',
    render(record) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '查看详情',
            onClick: handleInfo.bind(null, record),
          },
        ],
        select: (key) => {
          message.info(`您点击了，${key} 按钮`);
        },
      });
    },
  });

  const [register, {}] = useForm({
    gridProps: {
       cols: '1 s:1 m:2 l:3 xl:4 2xl:4',
       collapsed: false,
       collapsedRows: 2,
      },
    giProps:{
      offset: 2
    },
    labelWidth: 80,
    schemas,
  });

  const loadDataTable = async (res) => {
    console.log('params.value', params.value);
    console.log('res', res);
    mapWidth();
    let data = await ChatLogPlayers({ ...formParams.value,...params.value, ...res });
    return data;
  };

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleSubmit(values: Recordable) {
    console.log('handleSubmit values：' + JSON.stringify(values));
    params.value = values;
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log('handleReset values：' + JSON.stringify(values));
    params.value = values;
    reloadTable();
  }

  const RetrofitModalRef = ref();
  const infoParams = ref();
  function handleInfo(record: Recordable) {
    infoParams.value = { ...params.value, openId: record.openId };
    const { openDrawer } = RetrofitModalRef.value;
    openDrawer();
  }
</script>

<style lang="less" scoped></style>
