<!--
 * @Author: 快乐橙 1760016317@qq.com
 * @Date: 2025-04-14 21:19:35
 * @LastEditors: 快乐橙 1760016317@qq.com
 * @LastEditTime: 2025-04-15 22:44:24
 * @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-series-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="seriesName"
          >
            <el-input
              v-model="pageQuery.seriesName"
              placeholder="系列名称"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <!-- 品牌选择 -->
          <el-form-item
            label="品牌选择:"
            prop="brandId"
          >
            <el-select
              v-model="pageQuery.brandId"
              placeholder="请选择品牌"
              :empty-values="[null, undefined]"
              value-key="brandId"
            >
              <el-option
                v-for="item in stickBrandList"
                :key="item.brandId"
                :disabled="item.brandStatus == 0"
                :label="item.brandName"
                :value="item.brandId"
              />
            </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="seriesSeq"
            align="left"
          />
          <!-- 系列名称 -->
          <el-table-column
            label="系列名称"
            prop="seriesName"
            align="left"
          />
          <el-table-column
            label="品牌名称"
            prop="brandId"
            align="left"
          >
            <template #default="{ row }">
              <span>{{ stickBrandList.find((item) => item.brandId === row.brandId)?.brandName }}</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="onAddOrUpdate(row.seriesId)"
                >
                  {{ $t("table.edit") }}
                </el-button>
                <el-button
                  v-permission="['product:attr:delete']"
                  type="primary"
                  link
                  @click="onDelete(row.seriesId)"
                >
                  {{ $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"
      :stick-brand-list="stickBrandList"
      @refresh-data-list="onGetPage()"
    />
  </div>
</template>

<script setup>
import {
  getStickSeries,
  deleteStickSeries,
  getStickBrand
} 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,
  seriesName: null,
  seriesId: null
})
const pageVO = reactive({
  total: 0,
  list: []
})

const stickBrandList = ref([]) // 获取球杆品牌列表
const onGetPage = () => {
  pageLoading.value = true
  getStickSeries(pageQuery)
    .then((res) => {
      console.log(res)
      pageVO.list = res.list
      pageVO.total = res.total
    })
    .finally(() => {
      pageLoading.value = false
    })
}
const getStickBrandList = (val) => {
  getStickBrand({
    pageNum: 1,
    pageSize: 10000
  }).then((res) => {
    stickBrandList.value = res.list
  })
}
const findBrandName = (seriesId) => {
  console.log(stickBrandList.value)

  const brand = stickBrandList.value.find((item) => item.seriesId == seriesId)
  return brand ? brand.seriesName : ''
}

// 清空搜索内容
const onClearSearchInfo = () => {
  searchRef.value.resetFields()
  onGetPage()
}

const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value.init(id)
  })
}

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

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