//導入使用的API 
import { reactive, toRefs, getCurrentInstance,onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, watch,computed} from "vue"
 export default{
   components: {xx},
   props: {},
   setup(props, context){
      console.log("*******setup******")
      //獲取當前實例
      const {ctx, proxy} = getCurrentInstance()
      // 定義響應式data 數(shù)據(jù)
      const state = reactive({
      })
      console.log("*******end reactive******")
      // 定義方法
      const methods = {
         async dealData(firstResData){
           if(firstResData.status == "finished"){
              state.collection_data = firstResData.data
              state.colection_id = firstResData.id
              await get(api+state.colection_id).then((resData) => {
                state.layoutX = resData.x
                state.layoutY = resData.y
                console.log("state.layoutX"+state.layoutX)
                console.log("state.layoutY"+state.layoutY)
             })
           }
        },
        // ***********async/await 實現(xiàn)請求同步功能**************
        async refreshData(){
          await get(api).then(firstResData=>{
              console.log("state.curStatus="+firstResData.status)
              methods.dealData(firstResData)
          }).catch(()=>{
          })
        },
      }
      console.log("*******end methods******")
      onBeforeMount(()=>{
        // dom 掛載前
        console.log("*******onBeforeMount******")
      })
      onMounted(async()=>{
        //dom 掛載后
        console.log("*******onMounted******")
        state.collection_id = proxy.$route.query.id
        await methods.init()
      })
      onBeforeUpdate(()=>{
        //對響應式data數(shù)據(jù)有更新， 更新前
        console.log("*******onBeforeUpdate******")
      })
      onUpdated(()=>{
        //對響應式data數(shù)據(jù)有更新， 更新后
        console.log("*******onUpdated******")
      })
      onBeforeUnmount(()=>{
        //銷毀頁面組件前， 即關閉
        console.log("*******onBeforeUnmount******")
      })
      onUnmounted(()=>{
        //銷毀后
        console.log("*******onUnmounted******")
      })
      return {
        ...toRefs(state),
        ...methods,
      }
  }