<!-- IP营销数据列表 -->
<template>
  <ele-page flex-table>
    <!-- 搜索表单 -->
    <page-search ref="searchRef" @search="handleSearch" />

    <!-- 表格 -->
    <ele-card flex-table :bodyStyle="{ padding: 0 }">
      <CommonTable
        ref="tableRef"
        :pageConfig="pageConfig"
        :columns="columns"
        :bodyStyle="{ padding: 0 }"
      >
        <!-- 操作列 -->
        <template #action="{ row }">
          <div class="action-buttons">
            <el-button
              type="primary"
              link
              v-permission="'ipMarkup:datalist:detail'"
              @click="handleViewDetail(row)"
            >
              [查看详情]
            </el-button>

            <el-button
              type="success"
              link
              v-permission="'ipMarkup:datalist:share'"
              @click="handleShare(row)"
            >
              [分享信息]
            </el-button>
          </div>
        </template>
      </CommonTable>
    </ele-card>

    <!-- 查看详情弹窗 -->
    <view-detail ref="detailRef" />

    <!-- 分享信息弹窗 -->
    <share-info ref="shareRef" />
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import PageSearch from './components/page-search.vue';
  import ViewDetail from './components/view-detail.vue';
  import ShareInfo from './components/share-info.vue';

  // 表格实例
  const tableRef = ref(null);
  const searchRef = ref(null);
  const detailRef = ref(null);
  const shareRef = ref(null);

  // 页面配置
  const pageConfig = reactive({
    pageUrl: '/activity/activityUpsellInfo/pagelist',
    exportUrl: '/activity/activityUpsellInfo/export',
    fileName: 'IP营销数据列表',
    cacheKey: 'ipMarketingDataList',
    rowKey: 'id'
  });

  // 表格列配置
  const columns = ref([
    { label: '用户UID', prop: 'uid' },
    { label: '订单编号', prop: 'orderNo' },
    { label: '参与时间', prop: 'participateTime' },
    { label: '省份', prop: 'province' },
    { label: '地区', prop: 'city' },
    { label: '订单总本数', prop: 'totalBooks' },
    { label: '加价本数', prop: 'markupBooks' },
    { label: '订单总金额', prop: 'totalAmount' },
    { label: '实际加价金额', prop: 'actualMarkupAmount' },
    {
      columnKey: 'action',
      label: '操作',
      width: 200,
      align: 'center',
      slot: 'action',
      fixed: 'right'
    }
  ]);

  // 搜索
  const handleSearch = (where) => {
    let data = JSON.parse(JSON.stringify(where));
    tableRef.value?.reload(data);
  };

  // 导出Excel
  const handleExportExcel = () => {
    tableRef.value?.exportData();
  };

  // 查看详情
  const handleViewDetail = (row) => {
    detailRef.value.openDialog(row);
  };

  // 分享处理
  const handleShare = (row) => {
    shareRef.value.openDialog(row);
  };
  // 刷新表格
  const reload = () => {
    tableRef.value?.reload();
  };

  defineExpose({
    reload
  });
</script>

<style lang="scss" scoped>
  .app-container {
    padding: 15px;
  }
</style>
