<template>
   <table-search-card :model="queryParams" @getList="getList" @handleQuery="handleQuery" @resetQuery="resetQuery">
      <template #left>
         <el-form-item prop="currencyCode">
            <currency-select v-model="queryParams.currencyCode" @change="handleQuery"></currency-select>
         </el-form-item>
         <el-form-item prop="platformType">
            <dict-select v-model="queryParams.platformType" dictKey="ff_game_type" :empty-values="[null, undefined]"
               :clearable="false" :addOptions="{ label: t('全部类型'), value: '' }"></dict-select>
         </el-form-item>
         <el-form-item prop="popularCategory">
            <el-select v-model="queryParams.popularCategory" :empty-values="[null, undefined]">
               <el-option v-for="item in popularCategoryList" :key="item.value" :label="item.label"
                  :value="item.value" />
            </el-select>
         </el-form-item>
         <el-form-item prop="name">
            <el-input v-model="queryParams.name" :placeholder="t('请输入平台/子游戏名称')" @keyup.enter="handleQuery" />
         </el-form-item>
      </template>
      <template #right>
         {{ t('是否启用') }}
         <el-switch
            v-model="IsEnabledOne"
            v-if="popularType == 1"
            active-value="2" inactive-value="1"
            class="ml-2"
            @click="handleUp(1)"
            style="--el-switch-on-color: #13ce66; margin-left: 4px;"
         />
         <el-switch
            v-model="IsEnabledTow"
            v-if="popularType == 2"
            active-value="2" inactive-value="1"
            class="ml-2"
            @click="handleUp(2)"
            style="--el-switch-on-color: #13ce66; margin-left: 4px;"
         />

      </template>

   </table-search-card>

   <el-table v-loading="loading" :data="gameList" @selection-change="handleSelectionChange" class="c-table-main" stripe
      ref="dragTable" row-key="id" border>
      <el-table-column type="selection" width="55" align="center" />
      <table-drag-sort v-model:tableList="gameList" @dragEnd="dragEnd"></table-drag-sort>
      <el-table-column :label="t('游戏类型')" align="center" prop="platformType">
         <template #default="{ row }">
            <dict-tag :options="ff_game_type" :value="row.platformType" />
         </template>
      </el-table-column>
      <el-table-column :label="t('热门类别')" align="center" prop="popularCategory">
         <template #default="{ row }">
            {{ row.popularCategory === 1 ? t('平台') : t('子游戏') }}
         </template>
      </el-table-column>
      <el-table-column :label="t('平台名称')" align="center" prop="platformName" />
      <el-table-column :label="t('热门名称')" align="center" prop="gameName" />
      <el-table-column :label="t('币种')" align="center" prop="currencyDisplay" />
      <el-table-column :label="t('操作')" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
            <el-button link type="primary" @click="handleDelete(scope.row)"
               v-hasPermi="['game:game:edit']">{{ t('移除') }}</el-button>
         </template>
      </el-table-column>
      <table-operation></table-operation>
   </el-table>

   <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
</template>

<script setup name="Popular">
import * as game from "@/api/game/game";
import useInitDataStore from "@/store/modules/initData";
import TableDragSort from '@/components/TableDragSort';

const useInitData = useInitDataStore();
const { proxy } = getCurrentInstance();
const { ff_game_type } = proxy.useDict('ff_game_type')
const emits = defineEmits(['updateGames']); // 定义自定义事件
const props = defineProps({
   // 热门类型
   // 1:热门管理1 2:热门管理2
   popularType: {
      type: Number,
      default: 1,
      required: true
   },
   hotOne: {
      type: String,
      default: '1',
   },
   hotTwo: {
      type: String,
      default: '1',
   }
})

const gameList = ref([]);  //表格数据
const loading = ref(true);//加载中
const ids = ref([]);//多选框选中数据
const single = ref(true);//是否单选
const IsEnabledOne = ref('1');//是否启用
const IsEnabledTow = ref('1');//是否启用
const multiple = ref(true); //是否多选
const total = ref(0); //总数

const data = reactive({
   form: {},
   queryParams: { // 查询参数
      pageNum: 1,
      pageSize: 20,
      orderByColumn: 'sort_no',
      isAsc: 'asc',
      currencyCode: useInitData.dictInitData.currencyCode||useInitData.currencyCode,
      platformType: '',
      popularCategory: '',
      name: null,
      popularType: null
   },
   rules: {

   },
   popularCategoryList: [
      {
         label: proxy.t('热门类别'),
         value: ''
      },
      {
         label: proxy.t('平台'),
         value: '1'
      },
      {
         label: proxy.t('子游戏'),
         value: '2'
      }
   ]
});

const { queryParams, form, rules, popularCategoryList } = toRefs(data);
/** 查询热门管理列表 */
function getList() {
   loading.value = true;
   queryParams.value.popularType = props.popularType
   game.listPopular(queryParams.value).then(response => {
      gameList.value = response.rows;
      total.value = response.total;
      loading.value = false;
   });
}

/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
   useInitData.setStateData('currencyCode', String(queryParams.value.currencyCode));
}
const handleUp = (type)=>{
   emits('updateGames', type);
}
// 同时监听两个值props.hotOne,props.hotTwo的变化来确定是true 还是false,1就是false 2就是true
watch(() => [props.hotOne, props.hotTwo], ([hotOne, hotTwo]) => {
   nextTick(() => {
      IsEnabledOne.value = hotOne;
      IsEnabledTow.value = hotTwo;
   });
},{ immediate: true })
/** 重置按钮操作 */
function resetQuery() {
   queryParams.value.pageNum = 1;
   getList();
}

// 多选框选中数据
function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
}

/** 移除按钮操作 */
function handleDelete(row) {
   const _ids = row.id || ids.value;
   proxy.$modal.confirm(proxy.t('是否确认移除"') + row.gameName + '"？').then(function () {
      return game.delPopular(_ids);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess(proxy.t('移除成功'));
   }).catch(() => { });
}

// 拖拽结束事件
const dragEnd = (row) => {
   game.popularSort(row).then(() => {
      if (row.isTop) {
         proxy.$modal.msgSuccess(proxy.t('置顶成功'));
      }
      getList();
   })
}

// 监听 popularType 的变化
watch(() => props.popularType, (newVal, oldVal) => {
   // 你可以在这里添加更多的逻辑
   resetQuery();
});

getList();
</script>

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