import Images from '../components/images/Images.vue';
import  adminImages from '../components/images/adminImages.vue';
import  selectImages from '../components/images/selectImages.vue';
import Vue from 'vue';
export default async function initImage(){
    function validate() {
        $("#form_image")
        .form({
            on: 'blur',
            // inline:true,
            fields: {
                tag: {
                    identifier  : 'tag',
                    rules: [
                    {
                        type: 'regExp[/^[A-Za-z0-9_.-]{1,100}[A-Za-z0-9_.]$/]',
                    }
                    ]
                },
                description:{
                    identifier  : 'description',
                    rules: [
                    {
                        type: 'empty',
                        
                    }
                    ]
                },
            }
        })
    }
    function $params(obj) {
        var str = [];
        for (var p in obj) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    }
    function initDropdown(){
        $('#dropdown_image')
        .dropdown({
            allowAdditions: true,
            onChange: function(value, text, $selectedItem) {
                $('#course_label_item').empty()
            }
        })
        $('#dropdown_image input.search').bind('input propertychange', function (event) {
            // $("#dropdown_container").removeAttr("style"); 
            const query  = $('input.search').val()
            if(!query){
                $('#course_label_item').empty()
            }else{
                $.get(`/api/v1/image/topics/search?q=${query}`,(data)=>{
                    if(data.topics.length!==0){
                        let html=''
                        $('#course_label_item').empty()
                        data.topics.forEach(element => {
                            html += `<div class="item" data-value="${element.topic_name}">${element.topic_name}</div>`
                        });
                        $('#course_label_item').append(html)
                    }
                })
            }
        });
        
    }
    validate()
    initDropdown()
    let link = $('.submit-image-tmplvalue').data('link')
    let pageform = $('.submit-image-tmplvalue').data('edit-page') || ''
    function postImage(formData) {
        $("#mask").css({"display":"block","z-index":"999"})
        $.ajax({
            url:link,
            type:'POST',
            data:formData,
            success:function(res){
                console.log("res",res)
                if(res.Code===1){
                    $('.alert').html(res.Message).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                }else if(res.Code==0){
                    if(link.indexOf('commit_image')===1){
                        $('.ui.positive.message').text('保存镜像成功').show().delay(1500).fadeOut();
                    }else{
                        $('body')
                        .toast({
                            class: 'success',
                            message: 'Did you notice any difference ?',
                            transition: {
                            showMethod   : 'zoom',
                            showDuration : 10000,
                            hideMethod   : 'fade',
                            hideDuration : 10000
                            }
                        })
                    }
                    
                    if(location.href.indexOf('imageAdmin')!==-1){
                        location.href = `${window.config.AppSubUrl}/admin/images`
                    }else{
                        location.href = `${window.config.AppSubUrl}/explore/images?type=myimage`
                    }
                }
            },
            error: function(xhr){
            // 隐藏 loading
            // 只有请求不正常（状态码不为200）才会执行
                // $('.ui.error.message').text(xhr.responseText)
                // $('.ui.error.message').css('display','block')
                $('.ui.positive.message').html(xhr.responseText).show().delay(1500).fadeOut();
            },
            complete:function(xhr){
                $("#mask").css({"display":"none","z-index":"1"})
            }
        })
    }
    $('.ui.create_image.green.button').click(()=>{
        let pattenTag = new RegExp(/^[A-Za-z0-9_.-]{1,100}[A-Za-z0-9_.]$/)
        if(!pattenTag.test($("input[name='tag']").val())){
            $("input[name='tag']").parent().addClass('error')
            return false
        }
        if(!$("textarea[name='description']").val()){
            $("textarea[name='description']").parent().addClass('error')
            return false
        }
        
        const postData = {
                        _csrf:$("input[name='_csrf']").val(),
                        tag:$("input[name='tag']").val(),
                        description:$("textarea[name='description']").val(),
                        type:$("input[name='type']").val(),
                        isPrivate:$("input[name='isPrivate']:checked").val(),
                        topics:$("input[name='topics']").val(),
                        id:$("input[name='id']").val()
                        }
                    
        console.log(postData)
        let formData = $params(postData)
        console.log(formData)
        console.log()
        if($("input[name='edit']").val()=="edit"){
            postImage(formData)
        }
        else{
            $.ajax({
                url:link+'/check',
                type:'POST',
                data:formData,
                success:function(res){
                    console.log("res",res)
                    if(res.Code===1){
                        $('.ui.modal.image_confirm_submit')
                        .modal({
                            onApprove: function() {
                                postImage(formData)
                            },
                            
                        })
                        .modal('show')
                    }else if(res.Code==0){
                        postImage(formData)
                    }
                },
                error: function(xhr){
                    $('.ui.positive.message').text(xhr.responseText).show().delay(1500).fadeOut();
                }
            })
        }
        
    })
    $('#cancel_submit_image').click(()=>{
        if(link.includes('cloudbrain')){
            let repoLink = link.split('cloudbrain')[0]
            location.href = `${window.config.AppSubUrl}${repoLink}debugjob?debugListType=all`
        }else if(pageform=='imageSquare'){
            location.href = `${window.config.AppSubUrl}/explore/images?type=myimage`
        }else if(pageform=='imageAdmin'){
            location.href = `${window.config.AppSubUrl}/admin/images`
        }
    })
    console.log("initImage")
    
    function initVueImages() {
        const el = document.getElementById('images');
        console.log(el)
        
        if (!el) {
            return;
        }
        
        new Vue({
            el:el,            
            render: h => h(Images)
        });
    }
    function initVueAdminImages() {
        const el = document.getElementById('images-admin');
        console.log(el)
        
        if (!el) {
            return;
        }
        
        new Vue({
            el:el,            
            render: h => h(adminImages)
        });
    }
    function initVueselectImages() {
        const el = document.getElementById('images-new-cb');
        console.log(el)
        
        if (!el) {
            return;
        }
        
        new Vue({
            el:el,            
            render: h => h(selectImages)
        });
    }
    initVueImages()
    initVueAdminImages()
    initVueselectImages()
}