<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 #size="{ row }">
        <div v-for="(item, index) in row.size" :key="item">
          <span
            >{{ item }}
            <template v-if="index != 0">,</template>
          </span>
        </div>
      </template>
      <template #url="{ row }">
        <img
          class="row-image"
          @click="openImageListDialog(row)"
          :src="getImage(row)"
          alt=""
        />
      </template>
      <template #progress="{ row }">
        <div>{{ row.completed_quantity }}/{{ row.number }}</div>
      </template>
      <template #download="{ row }">
        <span class="download-text" @click="onDownLoad(row)">
          <template v-if="row.download_status == 1"> 下载 </template>
          <template v-else>
            正在导出
            <TLoading size="small" :inheritColor="true"></TLoading>
          </template>
        </span>
      </template>
    </TTable>
    <div class="custom-pagination">
      <t-pagination
        v-model="pageNum"
        v-model:page-size="pageSize"
        :total="total"
        :pageSizeOptions="[]"
        @current-change="pageChange"
      />
    </div>
    <ImageListDialog
      v-model="dialog_obj.visible"
      :list="dialog_obj.list"
    ></ImageListDialog>
  </div>
</template>

<script lang="ts" setup>
import { Table as TTable, Loading as TLoading } 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 { batchQrCodeZip } from '@/utils/downLoadImage';
import { show_message } from '@/utils/tdesign_tool';
import ImageListDialog from './ImageListDialog.vue';
import { getLocalData, setLocalData } from '@/utils/tool';
const props = defineProps<{
  DefaultTable: string;
}>();
watch(
  () => props.DefaultTable,
  (v) => {
    if (v == 'img') {
      getLog();
    }
  }
);
const local_key = 'mapping_record_page';
const imgs = {
  empty: new URL('../../../assets/svg/gpt/empty.svg', import.meta.url).href,
};
const RecordList = reactive({
  // 绘图列表
  list: [],
});
// 导出状态
const outputStatus = ref<'' | 'loading'>('');
const loading = ref(false);
// 获取本地的page
const getPage = () => {
  const page = getLocalData(local_key, 'session');
  return page ? page : 1;
};
const pageNum = ref<number>(getPage());
const pageSize = ref<number>(10);
const total = ref<number>(0);
// 弹窗状态
const dialog_obj = reactive({
  visible: false,
  list: [],
});
// 绘图记录
const columns = [
  {
    title: '产品',
    colKey: 'title',
  },
  {
    title: '详细',
    colKey: 'detail',
    align: 'center',
    width: '40%',
  },
  {
    title: '尺寸',
    colKey: 'size',
    align: 'center',
  },
  {
    title: '数量',
    colKey: 'number',
    align: 'center',
  },
  {
    title: '图片',
    colKey: 'url',
    align: 'center',
  },
  {
    title: '进度',
    colKey: 'progress',
    align: 'center',
  },
  {
    title: '下载',
    colKey: 'download',
    align: 'right',
  },
];
// 获取图片列表
const getImageList = (row: any) => {
  const res = row.response;
  // 必须是数组
  const is_array = Object.prototype.toString.call(res.url) === '[object Array]';
  if (res && res.url && res.url[0] && is_array) {
    return res.url;
  }
  return [imgs.empty];
};
// 打开图片弹窗
const openImageListDialog = (row: any) => {
  const list = getImageList(row);
  dialog_obj.visible = true;
  dialog_obj.list = list;
};
// 图片链接
const getImage = (row: any) => {
  const res = row.response;
  // 必须是数组
  const is_array = Object.prototype.toString.call(res.url) === '[object Array]';
  if (res && res.url && res.url[0] && is_array) {
    return row.response.url[0];
  }
  return imgs.empty;
};
// 下载图片
const onDownLoad = async (row: any) => {
  if (outputStatus.value == 'loading') {
    // 加载中
    show_message('导出未完成');
    return;
  }
  const res = row.response;
  if (res && res.url && res.url.length) {
    let list = res.url;
    outputStatus.value = 'loading';
    row.download_status = 2;
    // 开始下载
    await batchQrCodeZip(list);
    outputStatus.value = '';
    row.download_status = 1;
  } else {
    show_message('没有图片');
  }
};
const pageChange = (value: number) => {
  pageNum.value = value;
  // 存本地
  setLocalData(local_key, value, 'session');
  getLog();
};
const getLog = async () => {
  try {
    loading.value = true;
    let res: any = await getGenerateRecords({
      page: pageNum.value,
      limit: pageSize.value,
      type: TASKTYPE.PAINTING,
    });
    if (res.code == 0) {
      res.data.data.forEach((item: any) => {
        item.download_status = 1;
      });
      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;
        }
        .row-image {
          width: 85px;
          height: 85px;
          border-radius: 8px;
          cursor: pointer;
        }
        .img {
          width: 85px;
          height: 85px;
          border-radius: 8px;
        }
        .download-text {
          font-weight: 400;
          font-size: @font-size-14;
          color: #00f9f9;
          cursor: pointer;
          .t-loading--center {
            background: transparent;
          }
        }
      }
    }
  }
}
.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>
