import axios from 'axios' // 引入axios
import {
    Message
} from 'element-ui'
import store from '@/store/index.js'
import router from '@/router.js'
import {
    showLoading,
    hideLoading
} from '@/assets/utils/loading'

/*
 * 请求域名
 */
const root = process.env.API_ROOT

/**
 * 提示函数
 */
const tip = msg => {
    Message({
        message: msg,
        type: 'error',
        center: true
    })
}

/**
 * 请求失败后的错误统一处理
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) => {
    // 状态码判断
    switch (status) {
    case 401:
        tip('401')
        router.replace('/login')
        break
    case 403:
        tip('403')
        break
    case 404:
        tip('404')
        break
    default:
        tip('网络服务错误')
    }
}

/*
 *  创建axios 实例
 */
const instance = axios.create({
    baseURL: root,
    timeout: 500000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    isShowLoading: true
})

// 请求拦截器
instance.interceptors.request.use(
    config => {
    // 每次发送请求之前判断是否存在token，如果存在并且不是登录页面或导航，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
        if (config.isShowLoading) {
            showLoading()
        }
        // console.log('请求拦截', config)
        let token = store.state.token
        let pathName = router.history.current.name // 返回Nav
        if (token && pathName !== 'Nav') {
            config.headers.Authorization = `Bearer ${token}`
        }
        return config
    },
    error => {
        console.log('请求拦截 error', error)
        return Promise.error(error)
    }
)

// 响应拦截器
instance.interceptors.response.use(
    response => {
    // console.log('响应拦截器response：' + response)
        hideLoading()
        if (response.status === 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    },
    // 服务器状态码不是200的情况
    error => {
        hideLoading()
        const {
            response
        } = error
        if (response) {
            errorHandle(response.status, response.data.message)
            return Promise.reject(response)
        } else {
            console.log('断网了')
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            // store.commit('changeNetwork', false);
            // 可以按照这个思路做断网处理
        }
    }
)

export default instance
