<!--
 * @Author: 快乐橙 1760016317@qq.com
 * @Date: 2025-04-14 21:19:35
 * @LastEditors: 快乐橙 1760016317@qq.com
 * @LastEditTime: 2025-04-20 22:43:49
 * @FilePath: \tmerclub-platform\src\views\modules\product\recycle\club\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 快乐橙 1760016317@qq.com
 * @Date: 2025-04-14 21:19:35
 * @LastEditors: 快乐橙 1760016317@qq.com
 * @LastEditTime: 2025-04-14 22:25:43
 * @FilePath: \tmerclub-platform\src\views\modules\recycle\club\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container order-home">
    <!-- 搜索相关区域 -->
    <div class="search-bar">
      <!-- native modifier has been removed, please confirm whether the function has been affected  -->
      <el-form
        ref="searchRef"
        :inline="true"
        :model="pageQuery"
        class="demo-form-inline"
        @submit.prevent
      >
        <div class="input-row">
          <!-- 类型 -->
          <el-form-item
            label="类型:"
            prop="cueOrderType"
          >
            <el-select
              v-model="pageQuery.cueOrderType"
              placeholder="请选择类型"
              :empty-values="[null, undefined]"
              value-key="brandId"
            >
              <el-option
                label="回收"
                :value="1"
              />
              <el-option
                label="置换"
                :value="2"
              />
              <el-option
                label="寄售"
                :value="3"
              />
            </el-select>
          </el-form-item>
          <!-- 是否审核 -->
          <el-form-item
            label="审核:"
            prop="orderStatus"
          >
            <el-select
              v-model="pageQuery.orderStatus"
              placeholder="请选择"
              :empty-values="[null, undefined]"
              value-key="brandId"
            >
              <el-option
                label="待审核"
                :value="0"
              />
              <el-option
                label="审核"
                :value="1"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="onGetPage(true)"
            >
              {{ $t("table.search") }}
            </el-button>
            <el-button @click="onClearSearchInfo()">
              {{ $t("table.reset") }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-content">
      <div class="operation-bar">
        <el-button
          v-permission="['product:attr:save']"
          type="primary"
          class="filter-item"
          @click="onAddOrUpdate()"
        >
          {{ $t("table.create") }}
        </el-button>
      </div>
      <div class="table-con">
        <!-- 列表相关区域 -->
        <el-table
          v-loading="pageLoading"
          :data="pageVO.list"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          highlight-current-row
          style="width: 100%"
        >
          <!-- 商品名称 -->
          <el-table-column
            label="商品名称"
            prop="productName"
            align="left"
          />
          <!-- 商品图片 -->
          <el-table-column
            label="商品图片"
            prop="productImages"
            align="left"
          >
            <template #default="{ row }">
              <img-show :src="row.productImages" />
            </template>
          </el-table-column>
          <el-table-column
            label="品牌"
            prop="brandName"
            align="left"
          />
          <el-table-column
            label="类型"
            prop="typeName"
            align="left"
          />
          <el-table-column
            label="回收类型"
            prop="cueOrderType"
            align="left"
          >
            <template #default="{ row }">
              <span v-if="row.cueOrderType == 1"> 回收</span>
              <span v-if="row.cueOrderType == 2">置换</span>
              <span v-if="row.cueOrderType == 3">寄售</span>
            </template>
          </el-table-column>
          <!-- 商品价格 -->
          <el-table-column
            label="价格"
            prop="productPrice"
            align="left"
          />
          <el-table-column
            label="状态"
            prop="orderStatus"
            align="left"
          >
            <template #default="{ row }">
              <span v-if="row.orderStatus == 5">已完成</span>
              <span v-if="row.orderStatus == 10">待审核</span>
              <span v-if="row.orderStatus == 11">审核通过(待发货)</span>
              <span v-if="row.orderStatus == 12">审核拒绝</span>
              <span v-if="row.orderStatus == 13">已发货</span>
              <span v-if="row.orderStatus == 14">已收货(评估中)</span>
              <span v-if="row.orderStatus == 15">评估成功</span>
              <span v-if="row.orderStatus == 16">评估失败</span>
              <span v-if="row.orderStatus == 17">评估失败用户已填写回邮地址</span>
              <span v-if="row.orderStatus == 18">评估失败(已退回)</span>
              <span v-if="row.orderStatus == 19">拒绝(已填写回邮地址)</span>
              <span v-if="row.orderStatus == 20">已完成</span>
            </template>
          </el-table-column>
          <!-- 创建时间 -->
          <el-table-column
            :label="$t('table.createTime')"
            prop="createTime"
            align="center"
            min-width="180"
          >
            <template #default="{ row }">
              <span>{{ row.createTime }}</span>
            </template>
          </el-table-column>
          <!-- 更新时间 -->
          <el-table-column
            :label="$t('table.updateTime')"
            prop="updateTime"
            align="center"
            min-width="180"
          >
            <template #default="{ row }">
              <span>{{ row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.actions')"
            align="center"
            width="230"
            class-name="small-padding fixed-width"
          >
            <template #default="{ row }">
              <div class="table-btn-con">
                <el-button
                  v-permission="['product:attr:update']"
                  type="primary"
                  link
                  @click="review(row.orderId)"
                >
                  查看详情
                </el-button>
                <!-- <el-button v-permission="['product:attr:update']" type="primary" link
                  @click="onAddOrUpdate(row.productId)">
                  {{ $t("table.edit") }}
                </el-button> -->
                <!-- <el-button v-permission="['product:attr:delete']" type="primary" link @click="onDelete(row.productId)">
                  {{ $t("table.delete") }}
                </el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页条 -->
    <pagination
      v-show="pageVO.total > 0"
      v-model:page="pageQuery.pageNum"
      v-model:limit="pageQuery.pageSize"
      :total="pageVO.total"
      @pagination="onGetPage()"
    />
    <review-dialog ref="reviewDialogRef" />
  </div>
</template>

<script setup>
import {
  getRecycleOrder,
  getStickBrand,
  getStickType,
  getStickSeries,
  deleteStick
} from '@/api/product/recycle'
import reviewDialog from './review-dialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const addOrUpdateRef = ref(null)
const reviewDialogRef = ref(null)
const searchRef = ref(null)
const pageLoading = ref(false)
const addOrUpdateVisible = ref(false)
const pageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  cueOrderType: null,
  orderStatus: null
})
const pageVO = reactive({
  total: 0,
  list: []
})

const stickBrandList = ref([]) // 获取品牌列表
const stickTypeList = ref([]) // 获取球杆类型列表
const stickSeriesList = ref([]) // 获取球杆系列列表
const onGetPage = () => {
  pageLoading.value = true
  getRecycleOrder(pageQuery)
    .then((res) => {
      console.log(res)
      pageVO.list = res.list
      pageVO.total = res.total
    })
    .finally(() => {
      pageLoading.value = false
    })
}
// 清空搜索内容
const onClearSearchInfo = () => {
  searchRef.value.resetFields()
  onGetPage()
}

const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value.init(id)
  })
}
// 获取品牌列表
const getStickBrandList = (val) => {
  getStickBrand({
    pageNum: 1,
    pageSize: 10000
  }).then((res) => {
    stickBrandList.value = res.list
  })
}
// 获取球杆类型列表
const getStickTypeList = (val) => {
  getStickType({
    pageNum: 1,
    pageSize: 10000
  }).then((res) => {
    stickTypeList.value = res.list
  })
}
// 获取球杆系列列表
const getStickSeriesList = (val) => {
  getStickSeries({
    pageNum: 1,
    pageSize: 10000
  }).then((res) => {
    stickSeriesList.value = res.list
  })
}

// 删除球杆
const onDelete = (productId) => {
  ElMessageBox.confirm('确定删除该球杆吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteStick({ productId }).then(() => {
        ElMessage.success('删除成功')
        onGetPage()
      })
    })
    .catch(() => { })
}

const review = (orderId) => {
  reviewDialogRef.value.init(orderId)
}
onMounted(() => {
  onGetPage()
  getStickBrandList()
  getStickTypeList()
  getStickSeriesList()
})
</script>

<style lang="scss" scoped></style>
