<script>
import {  defineComponent, reactive, onMounted, toRefs, ref } from "vue";
import { getProjectDetailAPI } from "@/api/api";
export default defineComponent({
  setup() {
    //這里定義一個結(jié)構(gòu)體，用來保存項目信息
    var Data = reactive({
      projectData: [],
      projectDetailData: [],
    });
    function GetProjectDetail(obj) {
      const pid = obj.pid;
      getProjectDetailAPI({ ProjectID: pid })
        .then((result) => {
          /*Data.projectDetailData這個變量是我們定義的reactive對象
          所以你打印出來他是一個數(shù)據(jù)代理的實例，并非array(),所以想要把
          獲取的報文數(shù)據(jù)復(fù)制到里面，需要使用深拷貝*/
          Data.projectDetailData = JSON.parse(JSON.stringify(result.data));
        })
        .catch((err) => {
          console.log(err);
        });
    }
    //掛載后調(diào)用函數(shù)獲取項目數(shù)據(jù)
    onMounted(() => {
      GetProjectData();
    });
    return {
      //解構(gòu)Data結(jié)構(gòu)體，讓模板可以直接調(diào)用Data里面的對象
      ...toRefs(Data),
    };
  },
});
</script>

<script lang="ts" setup>
import {getCoupon} from './request';//request里面包含接口,此處是引入getCoupon這個接口
import { onMounted, reactive, ref, getCurrentInstance, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();//獲取路由參數(shù)
const router = useRouter();//獲取路由對象
const emit = defineEmits(['downStep']);//初始化emit調(diào)用的方法
const props = defineProps({//初始化prop內(nèi)部參數(shù)
	id:Number,
	leave:{
		type:String,//類型
		default:'一級'//默認(rèn)參數(shù)
	}
});
let name = ref('');//ref初始化普通參數(shù)
let obj1 = reactive({//ref初始化復(fù)雜對象參數(shù)
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    });
let obj2 = ref({//ref也可初始化復(fù)雜對象參數(shù)
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    }); 
//ref與reactive都可初始化復(fù)雜對象參數(shù)，但是使用上不同
console.log(obj1.name);
console.log(obj2.value.name);   
console.log(name.value);//ref使用需要.value,reactive則不用      
watch(name, (newVal, oldValue) => {//監(jiān)聽單個基本數(shù)據(jù)類型(ref)
     console.log(newVal, oldValue);
 });    
const getList = async (a)=>{//async函數(shù)
	let data = await getCoupon({a});
};
const getBtnClick =()=>{//普通函數(shù)
	emit('downStep',1);//對比vue2中的this.$emit
	console.log(props.id);//使用props中的id
}
const back = ()=>{
	//router.push("/aa");//跳轉(zhuǎn)其他頁面
	router.push({url:'/aa',query:{name:'測試'}});//帶參跳轉(zhuǎn)
	//router.replace("/aa")//
}
onMounted(() => {//頁面初始化時只請求一次
 //初始化生命周期，一般初始化參數(shù)請求時將獲取數(shù)據(jù)接口寫在此處
 let a = route.query.a;//獲取跳轉(zhuǎn)頁面時傳遞的參數(shù)a
 getList(a); 
});
onActivated(() => {//頁面每次進(jìn)入時都請求一次，當(dāng)使用keep-alive并且每次進(jìn)入頁面都需調(diào)用一次時使用
 let a = route.query.a;//獲取跳轉(zhuǎn)頁面時傳遞的參數(shù)a
 getList(a); 
});
</script>