<template>
  <div class="app-container">
    <div v-show="!commodityManageFormState.show">
      <div class="status-filter" style="display: flex; justify-content: space-between">
        <div>
          <button
            v-for="item in filterItems"
            :key="item.value"
            class="filter-btn"
            :class="{ active: activeFilter === item.value }"
            @click="handleFilterChange(item.value)"
            style="margin-right: 10px"
          >
            {{ item.label }} ({{ item.sum }})
          </button>
        </div>
        <el-button type="primary" @click="resetQuery"
        ><el-icon><Refresh /></el-icon>&nbsp;&nbsp;刷新</el-button
        >
      </div>
      <transition name="fade">
        <div>
          <el-form ref="queryFormRef" :model="queryParams">
            <el-row :gutter="20">
              <el-col :span="4">
                <el-form-item label="输入搜索：" prop="name">
                  <el-input v-model="queryParams.name" placeholder="请输入报告名称" clearable @keyup.enter="handleQuery" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="收货人：" prop="consignee">
                  <el-select v-model="queryParams.serviceClass" clearable>
                    <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="商品类型：" prop="submissionTime">
                  <el-select v-model="queryParams.serviceStatus" clearable>
                    <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="提交时间：" prop="serviceStatus">
                  <el-date-picker v-model="value1" type="datetime" placeholder="请选择时间" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="handleQuery">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </transition>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
        </el-col>
        <el-col :span="3">
          <el-select v-model="sortField" placeholder="排序方式" @change="handleSortChange">
            <el-option
              v-for="item in sortOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
      <!-- 表格组件 -->
      <el-table ref="multipleTable" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单编号" align="center" prop="id" />
        <el-table-column label="提交时间" align="center" prop="submissionTime" />
        <el-table-column label="用户账号" align="center" prop="userAccount" />
        <el-table-column label="订单金额" align="center" prop="orderAmount" />
        <el-table-column label="支付方式" align="center" prop="paymentMethod" />
        <el-table-column label="商品分类" align="center" prop="category" />
        <el-table-column label="订单状态" align="center" prop="orderStatus" />
        <el-table-column label="接口状态" align="center" prop="status" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <!-- 待签署和待付款状态显示取消订单 -->
            <el-text
              v-if="['待签署', '待付款'].includes(scope.row.orderStatus)"
              class="common-btn-text-primary"
              @click="cancelOrder(scope.row)"
            >
              取消订单
            </el-text>

            <!-- 已完成状态显示查看详情 -->
            <el-text
              v-if="scope.row.orderStatus === '已完成'"
              class="common-btn-text-primary"
              @click="viewDetails(scope.row)"
            >
              查看详情
            </el-text>

            <!-- 已退款和已取消状态不显示操作按钮 -->
            <span v-if="['已退款', '已取消'].includes(scope.row.orderStatus)">-</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
    </div>
    <CommodityManageForm v-if="commodityManageFormState.show" @onCancel="commodityManageFormState.show = false" @onConfirm="handleCommodityManageFormState" />
  </div>
</template>

<script setup name="CommodityManage">
import CommodityManageForm from "@/views/commodityManage/CommodityManageForm.vue";

const { proxy } = getCurrentInstance();
const queryFormRef = ref();
const value1 = ref();
// 搜索条件
const queryParams = reactive({
  name: '',
  serviceClass: '',
  serviceStatus: '',
  page: 1,
  page_size: 10
});
// 表格数据
const dataList = ref([
  {
    id: 'DD20230515001',
    submissionTime: '2023-05-15 09:30:45',
    userAccount: 'user_zhangsan',
    orderAmount: '¥258.00',
    paymentMethod: '微信支付',
    category: '电子产品',
    orderStatus: '待签署', // 改为中文状态值
    status: '正常'
  },
  {
    id: 'DD20230515002',
    submissionTime: '2023-05-15 10:15:22',
    userAccount: 'user_lisi',
    orderAmount: '¥599.00',
    paymentMethod: '支付宝',
    category: '家居用品',
    orderStatus: '待付款', // 改为中文状态值
    status: '正常'
  },
  {
    id: 'DD20230515003',
    submissionTime: '2023-05-15 13:45:18',
    userAccount: 'user_wangwu',
    orderAmount: '¥1299.00',
    paymentMethod: '银联云闪付',
    category: '家用电器',
    orderStatus: '已取消', // 改为中文状态值
    status: '正常'
  },
  {
    id: 'DD20230515004',
    submissionTime: '2023-05-15 15:20:33',
    userAccount: 'user_zhaoliu',
    orderAmount: '¥89.00',
    paymentMethod: '微信支付',
    category: '食品饮料',
    orderStatus: '已完成', // 改为中文状态值
    status: '已关闭'
  },
  {
    id: 'DD20230515005',
    submissionTime: '2023-05-15 18:05:07',
    userAccount: 'user_qianqi',
    orderAmount: '¥1999.00',
    paymentMethod: '支付宝',
    category: '数码产品',
    orderStatus: '已退款', // 改为中文状态值
    status: '异常'
  }
]);
// 加载中
const loading = ref(false);
// 总数
const total = ref(0);
// 表格选中的所有id
const ids = ref([]);
// 表格选中一个
const single = ref(true);
// 表格选中多个
const multiple = ref(true);
// 选中行的数据
const selectedRow = ref(null);
// 新增弹窗参数
const commodityManageFormState = ref({
  show: false,
  id: ''
})

// 获取数据
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500)
}

// 点击查询
const handleQuery = () => {
  queryParams.page = 1;
  getList();
};

// 重置查询条件
const resetQuery = () => {
  if (queryFormRef.value) {
    queryFormRef.value.resetFields(); // 重置表单并清除校验状态
  }
  // 重置日期选择器
  value1.value = null;
  // 重置查询参数
  Object.assign(queryParams, {
    name: '',
    serviceClass: '',
    serviceStatus: '',
    page: 1,
    page_size: 10
  });
  // 重置为全部订单
  activeFilter.value = 'all';

  getList();
};

// 新增修改确认回调
const handleCommodityManageFormState = () => {
  commodityManageFormState.value.show = false;
  handleQuery();
};

const cancelOrder = (row) => {};

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.reportId);
  selectedRow.value = selection.length === 1 ? selection[0] : null;
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

const activeFilter = ref('all');

const filterItems = [
  { label: '全部订单', value: 'all', sum: 1000 },
  { label: '待签署', value: 'pending_sign', sum: 1000 },
  { label: '待付款', value: 'pending_payment', sum: 1000 },
  { label: '已取消', value: 'cancelled', sum: 1000 },
  { label: '已完成', value: 'completed', sum: 1000 },
  { label: '已退款', value: 'refunded', sum: 1000 }
]

const handleFilterChange = (value) => {
  activeFilter.value = value;
  // 这里可以添加根据筛选条件重新获取数据的逻辑
  getList();
}

const handleExport = () => {};

const viewDetails = (row) => {};




getList();
</script>

<style lang="scss" scoped>
.status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-btn {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.filter-btn.active {
  color: #409eff;
  border-color: #409eff;
  background-color: #ecf5ff;
}
</style>
