<script lang="ts" setup>
import {appMerchantCategoryListGet} from "@/service";
import {EventEnum} from '@/constant/enums'

const {t} = useI18n();

const scopeOptions = ref<Scope[]>([])
type Scope = {
  label: string
  value: number
}
const currentScope = ref<number[]>([])

function handleClick(item: Scope) {
  if (currentScope.value.includes(item.id)) {
    currentScope.value = currentScope.value.filter((scope) => scope !== item.id);
  } else {
    currentScope.value.push(item.id);
  }
}

function handleSubmit() {
  if (currentScope.value.length === 0) {
    uni.showToast({
      title: t('toast.selectScope'),
      icon: 'none',
    })
    return
  }
  const selectedScopes = scopeOptions.value.filter(scope => currentScope.value.includes(scope.id));
  uni.$emit(EventEnum.CHOOSE_STORE_TYPE, selectedScopes)
  uni.navigateBack()
}

onLoad((options) => {
  if (options.ids) {
    currentScope.value = options.ids.split(',');
  }
  console.log(options)
  appMerchantCategoryListGet({
    pageNum: 1,
    pageSize: 100,
  }).then(res => {
    console.log(res)
    scopeOptions.value = res.data.map(item => ({
      name: item.name,
      id: item.id,
    }))
  })
})
</script>

<template>
  <view>
    <navbar title="Main Business Scope"/>
    <view class="pt-22rpx">
      <template v-for="(item, index) in scopeOptions">
        <view class="flex-center-sb h-112rpx border-bottom px-30rpx" @click="handleClick(item)">
          <view class="flex-1 text-30rpx lh-30rpx text-#333 font-500 flex items-center">{{ item.name }}</view>
          <view class="w-40rpx h-40rpx shrink-0">
            <image
                :src="
                  currentScope.includes(item.id)
                  ? '/static/images/chef/152.png'
                   : '/static/images/chef/134.png'
                  "
                class="w-40rpx h-40rpx"
                mode="aspectFit"
            />
          </view>
        </view>
      </template>
    </view>

    <fixed-bottom-large-btn
        :text="t('common.confirm')"
        class="z-100"
        fixed
        @click="handleSubmit"
    />
  </view>
</template>

<style>
page {
  background-color: white;
}
</style>