<template>
  <div>
    <TTable
      class="reset-t-table"
      row-key="index"
      :data="RecordList.list"
      :columns="columns"
      :loading="loading"
    >
      <template #detail="{ row }">
        <div class="detail-box" v-for="item in row.detail" :key="item.name">
          <span>{{ item.label }}：</span>
          <span>{{ item.value }}</span>
        </div>
      </template>
      <template #download="{ row }">
        <span class="download-text" @click="openDialog(row.response)">
          查看
        </span>
      </template>
    </TTable>
    <div class="custom-pagination">
      <t-pagination
        v-model="pageNum"
        v-model:page-size="pageSize"
        :total="total"
        :pageSizeOptions="[]"
        @current-change="pageChange"
      />
    </div>
    <GptDialog v-model="DialogVisible" :list="RecordList.gpt_list"></GptDialog>
  </div>
</template>

<script lang="ts" setup>
import { Table as TTable } from 'tdesign-vue-next';
import { onBeforeMount, reactive, ref, watch } from 'vue';
import { getGenerateRecords } from '@/utils/api/scenes';
import { Pagination as TPagination } from 'tdesign-vue-next';
import { TASKTYPE } from '@/utils/api/Task';
import GptDialog from './GptDialog.vue';
import { getLocalData, setLocalData } from '@/utils/tool';
const props = defineProps<{
  DefaultTable: string;
}>();
watch(
  () => props.DefaultTable,
  (v) => {
    if (v == 'text') {
      getLog();
    }
  }
);
const local_key = 'copy_writing_record_page';
const RecordList = reactive({
  // 绘图列表
  list: [],
  // 当前行的gpt对话列表
  gpt_list: [],
});
// 获取本地的page
const getPage = () => {
  const page = getLocalData(local_key, 'session');
  return page ? page : 1;
};
// 弹窗状态
const DialogVisible = ref(false);
const loading = ref(false);
const pageNum = ref<number>(getPage());
const pageSize = ref<number>(10);
const total = ref<number>(0);
// 文案记录
const columns = [
  {
    title: '产品',
    colKey: 'title',
  },
  {
    title: '详细',
    colKey: 'detail',
    align: 'center',
  },
  {
    title: '消耗字符数',
    colKey: 'consumes_characters',
    align: 'center',
  },
  {
    title: '操作',
    colKey: 'download',
    align: 'right',
  },
];
const pageChange = (value: number) => {
  pageNum.value = value;
  // 存本地
  setLocalData(local_key, value, 'session');
  getLog();
};
const openDialog = (list: any) => {
  // 过滤出机器人讲的内容
  const RobotList: any = list.filter((item: any) => item.role == 'assistant');
  let RealList = [];
  if (RobotList && RobotList.length) {
    RobotList.forEach((item: any) => {
      let obj = {
        message: item.content,
      };
      RealList.push(obj);
    });
  }
  if (RealList.length) {
    // 打开弹窗
    RecordList.gpt_list = RealList;
    DialogVisible.value = true;
  }
};

const getLog = async () => {
  try {
    loading.value = true;
    let res: any = await getGenerateRecords({
      page: pageNum.value,
      limit: pageSize.value,
      type: TASKTYPE.CHAT,
    });
    if (res.code == 0) {
      RecordList.list = res.data.data;
      total.value = res.data.total;
    }
    console.log(res);
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};
onBeforeMount(() => {
  getLog();
});
</script>

<style lang="less">
@import '@/style/variables.less';
.reset-t-table {
  background-color: transparent;
  min-height: 500px;
  .t-table__content {
    background-color: transparent;
  }
  thead {
    tr {
      background-color: transparent;
      th {
        border: none;
        background: #000000;
        color: white;
        font-size: @font-size-16;
        font-weight: 400;
      }
      & > :first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      & > :last-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  tbody {
    .t-table__empty-row {
      background-color: transparent;
      &:hover {
        background-color: transparent;
      }
      .t-table__empty {
        color: white;
      }
    }
    tr {
      background: transparent;
      td {
        color: #ffffff;
        border-bottom: 1px solid #464646;
        font-weight: 400;
        font-size: @font-size-14;
        .detail-box {
          text-align: start;
        }
        .img {
          width: 85px;
          height: 85px;
          border-radius: 8px;
        }
        .download-text {
          font-weight: 400;
          font-size: @font-size-14;
          color: #00f9f9;
          cursor: pointer;
          user-select: none;
        }
      }
    }
  }
  .t-loading--center {
    background: rgba(255, 255, 255, 0.1);
  }
}
.custom-pagination {
  padding: 12px 0;
  .t-pagination__total {
    color: white;
  }
  .t-is-current {
    background: #00f9f9;
    border-radius: 2px;
    border: none;
    color: #000000;
  }
  .t-pagination__btn {
    & > :nth-child(1) {
      color: #c9cdd4;
    }
  }
}
</style>
