<template>
  <ele-page flex-table>
    <page-search @search="reload" :status="useStatus"></page-search>

    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
      <template #toolbar>
        <div class="flex items-center mb-4">
          <el-button type="warning" plain @click="handleBatchPush">
            一键推送
          </el-button>
          <el-button
            type="success"
            plain
            @click="handleExportExcel"
            :icon="DownloadOutlined"
          >
            导出
          </el-button>
        </div>
      </template>

      <template #isPush="{ row }">
        <el-tag type="success" v-if="row.isPush === '是'">是</el-tag>
        <el-tag type="danger" v-else>否</el-tag>
      </template>

      <template #pushStatus="{ row }">
        <el-tag type="success" v-if="row.pushStatus === '成功'">成功</el-tag>
        <el-tag type="danger" v-if="row.pushStatus === '失败'">失败</el-tag>
        <el-tag type="warning" v-if="row.pushStatus === '系统错误'"
          >系统错误</el-tag
        >
        <el-tag type="info" v-if="row.pushStatus === '无数据'">无数据</el-tag>
      </template>

      <template #action="{ row }">
        <div>
          <el-button type="primary" link @click="handleDetail(row)">
            删除
          </el-button>
          <el-button type="primary" link @click="handlePush(row)">
            推送
          </el-button>
          <el-button type="primary" link @click="handlePushLog(row)">
            推送日志
          </el-button>
        </div>
      </template>
    </common-table>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { DownloadOutlined } from '@/components/icons';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import pageSearch from './components/page-search.vue';
  import request from '@/utils/request';

  defineOptions({ name: 'productPush' });

  const useStatus = ref('');

  /** 表格列配置 */
  const columns = ref([
    { label: '序号', prop: 'index', align: 'center', width: 70 },
    { label: 'ISBN', prop: 'isbn', align: 'center', minWidth: 120 },
    { label: '是否推送', prop: 'isPush', align: 'center', slot: 'isPush' },
    { label: '创建时间', prop: 'createTime', align: 'center', width: 180 },
    { label: '推送时间', prop: 'pushTime', align: 'center', width: 180 },
    { label: '扫描提交人', prop: 'submitter', align: 'center' },
    { label: '后台处理人', prop: 'processor', align: 'center' },
    {
      label: '推送状态',
      prop: 'pushStatus',
      align: 'center',
      slot: 'pushStatus'
    },
    {
      label: '操作',
      width: 240,
      align: 'center',
      slot: 'action'
    }
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/data/product/push/list',
    exportUrl: '/data/product/push/export',
    fileName: '商品档案推送',
    cacheKey: 'productPushTable'
  });

  // 刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }

  // 导出excel
  function handleExportExcel() {
    pageRef.value?.exportData('商品档案推送');
  }

  // 批量推送
  function handleBatchPush() {
    ElMessageBox.confirm('确认批量推送选中的商品档案?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        request.post('/data/product/push/batchPush').then((res) => {
          if (res.data.code === 200) {
            EleMessage.success('批量推送成功');
            reload();
          } else {
            EleMessage.error(res.data.msg || '批量推送失败');
          }
        });
      })
      .catch(() => {});
  }

  // 推送单个商品
  function handlePush(row) {
    ElMessageBox.confirm(`确认推送ISBN为${row.isbn}的商品档案?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        request.post(`/data/product/push/push/${row.isbn}`).then((res) => {
          if (res.data.code === 200) {
            EleMessage.success('推送成功');
            reload();
          } else {
            EleMessage.error(res.data.msg || '推送失败');
          }
        });
      })
      .catch(() => {});
  }

  // 查看详情
  function handleDetail(row) {
    // 实现详情查看逻辑
  }

  // 查看推送日志
  function handlePushLog(row) {
    // 实现推送日志查看逻辑
  }
</script>
