<!--
 * @Author: 快乐橙 1760016317@qq.com
 * @Date: 2025-04-14 21:19:35
 * @LastEditors: 快乐橙 1760016317@qq.com
 * @LastEditTime: 2025-04-15 21:52:11
 * @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 club-brand-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="brandName"
          >
            <el-input
              v-model="pageQuery.brandName"
              placeholder="品牌名称"
              maxlength="20"
              clearable
            />
          </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="brandSeq"
            align="left"
          />
          <!-- 品牌名称 -->
          <el-table-column
            label="品牌名称"
            prop="brandName"
            align="left"
          />
          <!-- 品牌图片 -->
          <el-table-column
            label="品牌图片"
            prop="brandLogo"
            align="left"
          >
            <template #default="{ row }">
              <img-show :src="row.brandLogo" />
            </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="onAddOrUpdate(row.brandId)"
                >
                  {{ $t("table.edit") }}
                </el-button>
                <el-button
                  v-permission="['product:attr:delete']"
                  type="primary"
                  link
                  @click="onDelete(row.brandId)"
                >
                  {{ $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()"
    />
    <add-or-update
      ref="addOrUpdateRef"

      @refresh-data-list="onGetPage()"
    />
  </div>
</template>

<script setup>
import {
  getStickBrand,
  deleteStickBrand
} from '@/api/product/recycle'
import AddOrUpdate from './add-or-update.vue'
const addOrUpdateRef = ref(null)
const searchRef = ref(null)
const pageLoading = ref(false)
const addOrUpdateVisible = ref(false)
const pageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  brandName: null
})
const pageVO = reactive({
  total: 0,
  list: []
})

const stickBrandList = ref([]) // 获取品牌列表
const stickTypeList = ref([]) // 获取球杆品牌列表
const stickSeriesList = ref([]) // 获取球杆系列列表
const onGetPage = () => {
  pageLoading.value = true
  getStickBrand(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 onDelete = (brandId) => {
  ElMessageBox.confirm('确定删除该球杆吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteStickBrand({ brandId }).then(() => {
        ElMessage.success('删除成功')
        onGetPage()
      })
    })
    .catch(() => {})
}
onMounted(() => {
  onGetPage()
})
</script>

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