import axios from 'axios'
import router from '../router'
import {Toast} from 'vant'

//跳轉到登入的方法
const goLogin = ()=>{
  router.replace({
    path:'/login',
    query:{
      redirect:router.currentRoute.fullPath
    }
  })
}

//提示

const tip = msg=>{
  Toast({
    message:msg,
    duration:1000,
    forbidClick:
 
true
  })
}

//定義請求失敗統一處理
const errorHandle = (status,other)=>{
  switch(status){
    //未登入，跳轉登入頁
    case 401:
      goLogin()
      break;
      //token過期,請出token並跳轉到登入頁
      case 403:
        tip('登入過期請重新登入')
        localStorage.removeItem('token')
        setTimeout(() => {
          goLogin()
        }, 
 
1000);
        break;
        //404請求不存在
        case 404:
        tip('請求資源不存')
        break;
        default:
          console.log(other)
  }
}

//建立axios例項

var instace = axios.create({
  timeout:1000* 12
})

//設定post請求頭
instace.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

//請求攔截器，每次請求如果token存在則在請求頭中攜帶token
 

instace.interceptors.request.use(
  config=>{
    //登入流程控制中，根據本地是否存在token判斷使用者登入的情況
    //存在token過期的情況，每次請求攜帶token後臺檢查token是否過期，返回狀態碼，我們在攔截器中根據狀態碼進行統一操作
    const token = localStorage.getItem('token')
    if(token && (config.headers.Authorization = token)){
      return config
    }
  },error =>Promise.error(error)
)

//響應攔截器

instace.interceptors.response.use(
  res=>res.status === 200 ? Promise.resolve(res) :Promise.reject(res),
  error => {
    const {response} = error
    if(response){
    //請求發出，但是不是2x
    errorHandle(response.status,response.data.message)
    return Promise.reject(response)
    }else{
       // 處理斷網的情況
      // eg:請求超時或斷網時，更新state的network狀態
     // network狀態在app.vue中控制著一個全域性的斷網提示元件的顯示隱藏
     // 關於斷網元件中的重新整理重新獲取資料，會在斷網元件中說
     if(!window.navigator.onLine){
         //處理斷網的操作
     }else{
        return Promise.reject(error)
     }
    }
   
  })

  export default instace



  //新建一個api資料夾統一管理api 裡面放index.js出口檔案,和其他模組介面檔案例如order.js


  import order from './api/order'

  export default {
    order
  }



  //order.js檔案

  import domain from './domain'
  import axios from '.././request'
  import qs from 'qs'  //用來序列化

  const order = {
    //訂單列表
    orderList(){
      return axios.get(`${domain.offine}/getOrderList`)
    },
    //訂單詳情
    orderDetail(id,params){
      return axios.get(`${domain.offine}/orderDetail/${id}`)
    },
    //post提交
    updateDetai(params){
      return axios.post(`${domain.offine}/updateDetail`,qs.stringify(params))
    }
  }
export default order;


//在main.js中把api掛在到vue原型上方便全域性呼叫
import api from '/api'
Vue.prototype.$api = api


//頁面上具體使用
methods:{
  getOrderDetail(id) {
    this.$api.order.orderDetail(id,{123}).then(res=>{

    })
  }
}