<template>
  <div>
    <Header />
    <List ref="listRef" :customer-list="list" />
    <img src="./assets/images/back_index_icon.svg" class="fixed bottom-11 left-[52px] z-100 h-12 w-28" alt="" @click="back" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useRootStore } from './stores/root'
import { getCustomerList } from './http/api'
import { HTTP_CODE } from './enums'
import { useHandleScreen } from '@/composables/useHandleScreen'
import Header from './components/Header/Header.vue'
import List from './components/List/List.vue'

const store = useRootStore()
const { device } = storeToRefs(store)

const customerInfo = ref<Customer | null>(null)
const list = computed(() => {
  return customerInfo.value?.proposalList
    ? customerInfo.value?.proposalList.map(item => ({
        ...item,
        managerSignature: customerInfo.value?.managerSignature,
        sealUrl: customerInfo.value?.sealUrl
      }))
    : []
})
getCustomerList(device.value.projectCode)
  .then(res => {
    if (res.code === HTTP_CODE.ERR_OK) {
      customerInfo.value = res.data
    } else {
      console.log(res.code)
    }
  })
  .catch(err => {
    console.log(err)
  })

const { checkHandleScreen } = useHandleScreen(handleScreen)

const listRef = ref<InstanceType<typeof List> | null>(null)
//指定时间返回首页时做的操作
function handleScreen() {
  back()
}

function back() {
  listRef.value?.scroll()
}

onMounted(async () => {
  window.addEventListener('touchend', checkHandleScreen)
})
</script>
