<template>
  <div class="app-container">
    <div v-show="!commodityManageFormState.show">
      <transition name="fade">
        <div>
          <el-form ref="queryFormRef" :model="queryParams">
            <el-row :gutter="20">
              <el-col :span="6">
                <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="6">
                <el-form-item label="服务分类：" prop="serviceClass">
                  <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="6">
                <el-form-item label="服务状态：" prop="serviceStatus">
                  <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="6">
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </transition>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button plain icon="Upload" @click="handleImport">导入</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
        </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="name" />
        <el-table-column label="定价" align="center" prop="fixedPrice" />
        <el-table-column label="售价" align="center" prop="price" />
        <el-table-column label="访问量" align="center" prop="visit" />
        <el-table-column label="支付数" align="center" prop="payAmount" />
        <el-table-column label="销量" align="center" prop="sales" />
        <el-table-column label="退款数" align="center" prop="refundAmount" />
        <el-table-column label="接口数" align="center" prop="" />
        <el-table-column label="调用数" align="center" prop="" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
            <el-text class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
          </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 queryParams = reactive({
  name: '',
  serviceClass: '',
  page: '',
  page_size: ''
});
// 表格数据
const dataList = ref([{}]);
// 加载中
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 = () => {
  commodityManageFormState
  queryParams.page = 1;
  getList();
};

// 重置查询条件
const resetQuery = () => {
  if (queryFormRef.value) {
    queryFormRef.value.resetFields(); // 重置表单并清除校验状态
  }
  getList();
};

// 删除按钮操作
const handleDelete = (row) => {
  proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(() => {
    getList();
    proxy?.$modal.msgSuccess('删除成功');
  });
};

// 展示新增修改界面
const handleAdd = (id) => {
  commodityManageFormState.value.id = true;
  commodityManageFormState.value.show = true;
};

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

const handleView = () => {};

// 多选框选中数据
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 handleImport = () => {};

// 导出
const handleExport = () => {};

getList();
</script>

<style lang="scss" scoped>

</style>
