<script setup>
import { userArtworks } from "@/api/goods/index.js";
import { codeAuthStore } from "@/stores-collect-code/auth/index.js";
import { showImagePreview } from 'vant';


import XImage from '@/components/x-image/index.vue'
import {useRouter} from "#vue-router";
import {goodStore} from "~/stores-collect-code/goods/index.js";
import {ref} from "vue";
import {offlineQrcodeCreate, offlineQrcodeDelete, offlineQrcodeList} from "~/api-collect-code/goods/index.js";
import codeCard from './components/codeCard/index.vue'
import {message} from "~/components/x-message/useMessage.js";
definePageMeta({
  layout: 'default',
  i18n: 'menu.profile',
})
const router = useRouter();
const localState = ref({
  finished: false,
  refreshing: false,
  showDetail: false,
  showHeight: ''
})

const { userInfo, } = codeAuthStore()
const {getOfflineQrcodeList,itemList,  loading: storeLoading,pageRef}= goodStore()
const initData = async () => {
  onRefresh()
}
const show=ref(false)
const close=()=>{
  console.log('show',show.value)
  show.value=false
}
const logOut=()=>{
  localStorage.clear()
  router.push('/collectCode/login')
}
const createForm=ref({
  lotNo:'',
  price:'',
})
const confirm=async ()=>{
  if (!createForm.value.price){
    message.warning(t('collectCode.message.amountRequired'))
    return false
  }else if (!createForm.value.lotNo){
    message.warning(t('collectCode.message.lotNoRequired'))
    return false
  }
 const res=await offlineQrcodeCreate({...createForm.value,price:String(createForm.value.price)})
  if (res.status===0){
    show.value=false
    onRefresh()
  }
}
const onRefresh = async () => {
  try {
    localState.value.refreshing = true
    localState.value.finished = false
    const { finished } = await getOfflineQrcodeList(true)
    localState.value.finished = finished
  } finally {
    localState.value.refreshing = false
  }
}
const loadMore = async () => {
  pageRef.value.page++
  const { finished } = await getOfflineQrcodeList()
  localState.value.finished = finished
}
const abnormal=ref(false)
const abnormalRow=ref({})
const inputLotNo=async (data)=>{
const res=await offlineQrcodeList({
  lotNo:createForm.value.lotNo
})
  if (res.status===0){
    if (res.data.Data?.length>0){
      abnormal.value=true
      abnormalRow.value=res.data.Data?.[0]
    }
  }
}
const deleteData=async (qrUid)=>{
  const res=await offlineQrcodeDelete({
    qrUid:qrUid
  })
  if (res.status===0){
    getOfflineQrcodeList()
    message.success(t('collectCode.message.deleteSuccess'))
    onRefresh()
  }
}
initData()
</script>

<template>
  <div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] h-screen-nav bg-cover pt-43px flex-grow-1 flex flex-col">
    <div class="flex items-center px-16px mb-43px">
      <div class="mr-23px">
        <img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt="">
      </div>
      <div class="flex flex-col">
        <div class="text-18px text-#181818">{{ userInfo.realName }}</div>
        <div class="text-#575757 text-14px">{{ userInfo.telNum }}</div>
      </div>
      <div class="grow-1 flex justify-end" @click="logOut">
        <img class="w-40px h-40px" src="@/static/images/logout.png" alt="">
      </div>
    </div>
    <div class="border-b-1px border-b-#D3D3D3  px-16px flex">
      <div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">{{ $t('collectCode.mine.offlineQrcode') }}</div>
    </div>
    <div class="grow-1 flex flex-col overflow-hidden  py-15px">
      <div class="overflow-auto">
        <van-pull-refresh    v-model="localState.refreshing"
                             :success-text="$t('collectCode.mine.refreshSuccess')"
                             :success-duration="700"
                             @refresh="onRefresh">
          <van-list  v-model:loading="storeLoading"
                     :finished="localState.finished"
                     :finished-text="$t('collectCode.mine.noMore')"
                     @load="loadMore" class="px-14px">
            <template v-for="(item,index) of itemList" :key="item.qrUid">
              <template v-if="item.payStatus===1">
                <van-swipe-cell class="mb-14px" >
                  <codeCard :data="item"></codeCard>
                  <template #right>
                    <div class="w-65px h-full bg-#CF3050 flex items-center justify-center" @click="deleteData(item.qrUid)">
                      <img class="w-22px h-24px" src="@/static/images/delete3@.png" alt="">
                    </div>
                  </template>
                </van-swipe-cell>
              </template>
              <template v-else>
                <div class="mb-14px">
                  <codeCard :data="item"></codeCard>
                </div>

              </template>

            </template>

          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <div class="h-81px w-full flex justify-center shrink-0 pt-10px">
        <div class="w-213px h-38px bg-#2B53AC text-#fff flex justify-center items-center text-14px rounded-4px" @click="show=true">
          {{ $t('collectCode.mine.add') }}</div>
    </div>
    <van-dialog v-model:show="show">
    <div class="pt-18px pb-24px px-24px">
      <div class="text-16px text-#000 font-bold text-center mb-26px">{{ $t('collectCode.mine.addQrcode.title') }}</div>
      <div class="">
        <div class="flex mb-6px items-center">
          <div class="w-58px">
            <div class="text-#1A1A1A text-16px">{{ $t('collectCode.mine.addQrcode.amount') }}</div>
            <div class="text-#939393 text-12px">{{ $t('collectCode.mine.addQrcode.amountUnit') }}</div>
          </div>
          <div>
            <input v-model="createForm.price" type="number"
                   class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" :placeholder="$t('collectCode.mine.addQrcode.amountPlaceholder')">
          </div>
        </div>
        <div class="flex items-center">
          <div class="w-58px">
            <div class="text-#1A1A1A text-16px">{{ $t('collectCode.mine.addQrcode.lotNo') }}</div>
          </div>
          <div>
            <input type="number" v-model="createForm.lotNo" @input="inputLotNo" class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" :placeholder="$t('collectCode.mine.addQrcode.lotNoPlaceholder')">
          </div>
        </div>
      </div>
      <div class="flex flex-col items-center" v-if="abnormal">
        <div class="text-#CF3050 text-12px mb-8px mt-4px">{{ $t('collectCode.mine.addQrcode.existingWarning') }}</div>
        <div>
          <XImage class="w-116px h-116px rounded-4px mb-9px" :src="abnormalRow.hdPic"></XImage>
          <div class="text-12px text-#575757 flex flex-col items-center">
            <div>{{ abnormalRow.title }}</div>
            <div>{{ abnormalRow.author }}</div>
          </div>
        </div>
      </div>
    </div>
      <template #footer>
        <div class="border-t flex">
          <van-button class="w-50% h-56px" style="border: none;border-radius: 0;border-right: 1.5px solid #E7E7E7" @click="show=false">
            <span class="text-#000 text-16px text-center">{{ $t('collectCode.mine.addQrcode.cancel') }}</span>
          </van-button>
          <van-button class="w-50% h-56px !rounded-0" style="border: none;border-radius: 0" @click="confirm">
            <span class="text-#000 text-16px text-center text-#2B53AC">{{ $t('collectCode.mine.addQrcode.confirm') }}</span>
          </van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>
<style scoped lang="scss">
:deep(.van-hairline--top.van-dialog__footer){
  &>.van-button{
    border-top: 1px solid #E7E7E7;
    &.van-dialog__cancel{
      border-right: 1px solid #E7E7E7;
    }
  }
}
</style>