<!-- 限时折扣 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <HeaderCard name="限时折扣" intro="批量设置商品折扣" icon="xszk"></HeaderCard>
      <div class="row mt14">
        <el-button type="primary" @click="addRef.show()"
          v-if="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'">添加</el-button>
      </div>
      <div class="row mt14">
        <el-table :data="tableData.list" stripe border v-loading="tableData.loading" height="58vh">
          <el-table-column label="ID" prop="id" width="80"></el-table-column>
          <el-table-column label="活动时间" prop="validStartTime" width="250">
            <template #default="scope">
              {{ scope.row.validStartTime }} ~ {{ scope.row.validEndTime }}
            </template>
          </el-table-column>
          <el-table-column label="生效周期" prop="useDays" width="250"></el-table-column>
          <el-table-column label="生效时段" prop="useStartTime" width="250">
            <template #default="scope">
              <div v-if="scope.row.useTimeType == 'all'">全时段可用</div>
              <div v-else>{{ scope.row.useStartTime }} ~ {{ scope.row.useEndTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="折扣%" prop="discountRate"></el-table-column>
          <el-table-column label="优先级" prop="sort"></el-table-column>
          <el-table-column label="状态" prop="status" width="150">
            <template #default="scope">
              <el-tag :type="statusList.find(item => item.value === scope.row.status)?.type || 'info'">
                {{statusList.find(item => item.value === scope.row.status)?.label || '未知'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120">
            <template #default="scope">
              <el-button link type="primary" @click="addRef.show(scope.row)"
                v-if="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'">编辑</el-button>
              <el-button link type="primary" @click="addRef.show(scope.row)" v-else>查看</el-button>
              <el-popconfirm title="确认要删除吗？" @confirm="delHandle(scope.row)"
                v-if="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'">
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="row mt14">
        <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
          :page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <add ref="addRef" @success="getTableData" />
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { ref, reactive, onMounted } from 'vue'
import HeaderCard from '../components/headerCard.vue'
import add from './components/add.vue'
import { limitTimeDiscountPage, limitTimeDiscountDel } from '@/api/coupon/index.js'

const shopInfo = ref(JSON.parse(localStorage.getItem('userInfo')) || {});

const addRef = ref(null);

// 1未开始，2进行中，3已结束 -1当前时间不可用
const statusList = ref([
  { label: '未开始', value: 1, type: 'info' },
  { label: '进行中', value: 2, type: 'success' },
  { label: '已结束', value: 3, type: 'default' },
  { label: '不可用', value: -1, type: 'danger' },
]);

const tableData = reactive({
  loading: true,
  page: 1,
  size: 10,
  total: 0,
  list: []
})

// 删除
async function delHandle(row) {
  try {
    await limitTimeDiscountDel({ id: row.id });
    ElNotification({
      title: '成功',
      message: '删除成功',
      type: 'success',
    });
    getTableData();
  } catch (error) {
    console.error('删除失败', error);
  }
}

// 分页大小发生变化
function handleSizeChange(e) {
  tableData.pageSize = e;
  consumeCashbackRecordAjax();
}

// 分页发生变化
function handleCurrentChange(e) {
  tableData.page = e;
  consumeCashbackRecordAjax();
}

// 获取表格数据
async function getTableData() {
  tableData.loading = true;
  try {
    const res = await limitTimeDiscountPage({
      page: tableData.page,
      size: tableData.size
    });
    tableData.list = res.records;
    tableData.total = res.totalRow;
  } catch (error) {
    console.error('获取数据失败', error);
  }
  setTimeout(() => {
    tableData.loading = false;
  }, 500);
}

onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}
</style>