<template>
  <div>
    <div>數(shù)據(jù)：{{ list }}</div>
    <el-button type="primary" @click="asyncFetch" :loading="loading">異步獲取</el-button>
    <el-button type="primary" @click="syncFetch" :loading="loading">同步獲取</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FetchApi } from '@/api'

const loading = ref(false)
const list = ref([])
// 異步調用
const asyncFetch = () => {
  loading.value = true
  FetchApi().then(res => {
    console.log(res)
    list.value = res
  }).finally(() => {
    loading.value = false
  })
}
// 同步調用
const syncFetch = async () => {
  loading.value = true
  try {
    const res = await FetchApi()
    console.log(res)
    list.value = res
  } catch (error) {
    console.log(error)
  }
  loading.value = false
}
</script>

<template>
  <!-- 新版本vue中，透傳可省略v-bind="$attrs" -->
  <el-button v-bind="$attrs" :loading="loading" :onClick="handleClick">
    <slot></slot>
  </el-button>
</template>

<script setup>
import { ref } from 'vue'

const { onClick } = defineProps(['onClick'])

const loading = ref(false)
// 重寫點擊方法
const handleClick = async () => {
  loading.value = true
  try {
    // 傳遞的onClick方法必須為同步的
    onClick && await onClick()
  } catch (error) {
    console.error(error)
  }
  loading.value = false
}

</script>

<template>
  <div>
    <div>數(shù)據(jù)：{{ list }}</div>
    <ViButton type="primary" :onClick="syncFetch">同步獲取</ViButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FetchApi } from '@/api'
import ViButton from '@/components/ViButton/ViButton.vue'

const list = ref([])
// 同步調用
const syncFetch = async () => {
  const res = await FetchApi()
  list.value = res
}
</script>

<template>
  <!-- 新版本vue中，透傳可省略v-bind="$attrs" -->
  <el-table v-bind="$attrs" v-loading="loading">
    <slot></slot>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  // 獲取數(shù)據(jù)方法
  fetchData: {
    type: Function,
    default: () => {}
  },
  // 默認是onMounted立即執(zhí)行fetchData
  immediateFetch: {
    type: Boolean,
    default: true
  }
})

const loading = ref(false)

const getList = async () => {
  loading.value = true
  try {
    await props.fetchData()
  } catch (error) {
    console.log(error)
  }
  loading.value = false
}

onMounted(() => {
  props.immediateFetch && getList()
})

// 暴露經過loading處理的fetch方法，比如搜索時候需要在父組件手動調用
defineExpose({ fetchData: getList })
</script>

<template>
  <div>
    <ViTable ref="ViTableRef" :data="list" :fetchData="syncFetch" :immediateFetch="false">
      <el-table-column prop="name" label="姓名"></el-table-column>
    </ViTable>
    <el-button @click="onSearch">查詢</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FetchApi } from '@/api'
import ViTable from '@/components/ViTable/ViTable.vue'

const list = ref([])
const ViTableRef = ref(null)
// 同步調用
const syncFetch = async () => {
  console.log('syncFetch')
  const res = await FetchApi()
  list.value = res
  console.log(list.value)
}

// 搜索
const onSearch = () => {
  ViTableRef.value.fetchData()
}
</script>

import { ref } from 'vue'

// 多個組件共享統(tǒng)一狀態(tài)
const loading = ref(false)

export const useLoading = (prop = {
  fetchData: () => {}
}) => {
  // 對外暴露loading給table組件或者button組件使用
  // 內部只負責處理業(yè)務邏輯，不負責調用，這樣更加靈活
  return {
    loading,
    fetchData: async () => {
      loading.value = true
      try {
        await prop.fetchData()
      } catch (error) {
        console.log(error)
      }
      loading.value = false
    }
  }
}

<template>
  <!-- 新版本vue中，透傳可省略v-bind="$attrs" -->
  <el-table v-bind="$attrs" v-loading="loading">
    <slot></slot>
  </el-table>
</template>

<script setup>
import { useLoading } from '@/hooks/useLoading'

const { loading } = useLoading()
</script>

<template>
  <div>
    <ViTablePlus :data="list" :fetchData="syncFetch" :immediateFetch="false">
      <el-table-column prop="name" label="姓名"></el-table-column>
    </ViTablePlus>
    <el-button @click="onSearch">查詢</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { FetchApi } from '@/api'
import ViTablePlus from '@/components/ViTablePlus/ViTablePlus.vue'
import { useLoading } from '@/hooks/useLoading'

// 手動執(zhí)行經過loading處理的fetchData方法
const { fetchData } = useLoading({
  fetchData: syncFetch
})

const list = ref([])
// 需要使用function定義方法，進行變量提升，因為useLoading在syncFetch方法定義前執(zhí)行
async function syncFetch() {
  const res = await FetchApi()
  list.value = res
}

// 搜索
const onSearch = () => {
  // 經過loading處理的fetchData方法
  fetchData()
}

onMounted(() => {
  // 經過loading處理的fetchData方法
  fetchData()
})
</script>