//https://vue3-course-api.hexschool.io/api/password/products
// /api/:api_path/admin/product/:product_id
//https://vue3-coursec-api.hexschool.io/api/password/admin/product
const api = "https://vue3-course-api.hexschool.io/";
const signinPath = "admin/signin";
const productsPath = "api/password/";
let myModal = '';
let deleteModal = '';
let deleteId= '';
let editModal ='';
const Vueapp = {
    data(){
        return{
            product :[],
            username :'',
            password :'',
            addProduct :{
                "title": "", 
                "category": "",
                "origin_price": '',
                "price": '',
                "unit": "",
                "description": "",
                "content": "",
                "is_enabled": '',
                "imageUrl" : "",
                "imagesUrl": [
                  "",
                  "",
                  "",
                  "",
                  ""
                ]
            },
            test :"測試",
            editProduct :[],
        }
    },
    methods: {
         //取得產品
        getProductas(){
            axios.get(`${api}api/password/products`)
            .then((response) =>{
                // handle success
                // console.log(response);
                this.product = response.data.products;
                // console.log(this.product);
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              })
              .then(function () {
                // always executed
              });
        },
        deletProducts(id){
            deleteId = id ;
            deleteModal.show();
            // console.log(id);


        },
        deletProductsId(){
            axios.delete(`${api}${productsPath}admin/product/${deleteId}`)
            .then((res)=>{
                // console.log(res);
                this.getProductas();
                deleteId = '';
                // console.log(deleteId);
                deleteModal.hide();
            })
             .catch(function (error) {
              // handle error
               console.log(error);
            })
        },     
         //登入
        signin(){
            if(this.username!=='' && this.password!=='' ){    
                let username = this.username.trim();;
                let password = this.password.trim();;
                const url = `${api}${signinPath}`;
                // console.log(url);
                const user = {
                    username,
                    password
                };
                // console.log(user);
                axios.post(url, user)
                .then((res)=>{
                    console.log(res);
      				if(res.data.success){
                          const token = res.data.token;
                          console.log(token);
                          const expired = res.data.expired;
                          console.log(expired);
                          document.cookie = `hexToken=${token}; expires=${new Date(expired)}`;
                          this.verifyToken();
      					//	
      					var login = document.querySelector('.login-container');
      					var container = document.querySelector('.container');
      					container.style.display="inline";
      					login.style.display="none";
        			}else{
      					//console.log(res.data.error.message);
      					alert_box(res.data.message+":"+res.data.error.message);
      				}

                })
                .catch((error)=>{
                    console.log(error);
                })
            }
            
        },
        //驗證
        verifyToken(){
            const token = document.cookie.replace(/(?:(?:^|.*;\s*)hexToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
            axios.defaults.headers.common['Authorization'] = token;
            axios.post(`${api}api/user/check`)
            .then((res)=>{
                // console.log(res);
            })
        },
        openModal(){
            myModal.show();
        },
        postModal(){
            // console.log(this.addProduct);
            const data = this.addProduct;
            axios.post(`${api}${productsPath}admin/product`,{data})
            .then((res)=>{
                console.log(res);
                this.getProductas();
                myModal.hide();
            })
            this.addProduct = {
                "title": "", 
                "category": "",
                "origin_price": '',
                "price": '',
                "unit": "",
                "description": "",
                "content": "",
                "is_enabled": '',
                "imageUrl" : "",
                "imagesUrl": [
                  "",
                  "",
                  "",
                  "",
                  ""
                ]
            };
        },
        openEdit(id){
            this.product.forEach((item) => {
                if(item.id == id) {
                    this.editProduct = item;
                };
            });
            editModal.show();
        },
        postEdit(){
            let id = this.editProduct.id; 
            let data = this.editProduct;
            axios.put(`${api}${productsPath}admin/product/${id}`,{data})
            .then((res)=>{
                // console.log(res);
                this.getProductas();
                editModal.hide();
            })
            .catch(function (error) {
              // handle error
               console.log(error);
            })
        },
    },
    mounted() {
        myModal = new bootstrap.Modal(document.getElementById('productModal'));
        deleteModal = new bootstrap.Modal(document.getElementById('delProductModal'));
        editModal = new bootstrap.Modal(document.getElementById('editModal'));
        this.getProductas();
        this.verifyToken();
    },
}
  Vue.createApp(Vueapp).mount("#app");