@php
    $version = config('app.version');
@endphp
<div :class="['university_manage_mask',isShowMask?'visibled':'']" id="university_manage_mask" v-show="isShowMask">
    <div :class="['university_manage_container',isShowContainer?'visibled':'']">
        <div class="university_manage_header">
            <div class="university_manage_title">学校列表管理</div>
            <div class="university_manage_close" @click="handlerShowMask">
                <img src="{{asset('img/universityManage/university_manage_close.png')}}" alt="">
            </div>
        </div>

        <div class="university_manage_content">
            <div class="university_manage_content_header">
                <div class="university_manage_content_title">请勾选需要在业务学校列表中显示的学校</div>
                <div class="university_manage_content_controls">
                    @include('admin.form_inputs.search',[
                        'id'=> 'searchName',
                        'placeholder' => '搜索学校名称'
                    ])
                    @include('admin.form_inputs.checkbox', [
                        'name' => 'justCheck',
                        'inputs' => [
                            [
                                'id' => 'justCheck',
                                'label' => '只看未勾选'
                            ]
                        ]
                    ])
                </div>
            </div>
            <div class="university_manage_content_list">
                <div class="university_manage_content_list_checked" v-if="isChekd">
                    <div class="university_manage_content_list_title">已勾选</div>
                    <div class="university_manage_content_list_checked_list" v-if="financialUniversities.length > 0">
                        <div class="university_manage_content_list_checked_list_item" v-for="(item,index) in financialUniversities" v-if="checkIndexOf(item.uniNameChinese) || checkIndexOf(item.uniName)">
                            <div class="form-input-container checkbox-control-container">
                                    <div class="checkbox-control">
                                        <input
                                            type="checkbox"
                                            class="hidden-input"
                                            :name="['university_manage_content_list_checked_list_item_'+item.id]"
                                            :value="item.id"
                                            :id="['university_manage_content_list_checked_list_item_'+item.id]"
                                            @change="handlerChangeCheckStatus(item.id,true)"
                                            checked
                                        >
                                        <label :for="['university_manage_content_list_checked_list_item_'+item.id]" class="fake-label"></label>

                                        <label :for="['university_manage_content_list_checked_list_item_'+item.id]" class="input-label">
                                            <div class="university_manage_content_list_checked_list_item_zh_name">@{{item.uniNameChinese}}</div>
                                            <div class="university_manage_content_list_checked_list_item_en_name">@{{item.uniName}}</div>
                                        </label>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="university_manage_content_list_prompt" v-else>请在下方勾选业务学校～</div>
                    <div class="university_manage_content_list_prompt checked_search_result">没有找到符合条件的内容~</div>
                </div>
                <div class="university_manage_content_list_unchecked">
                    <div :class="['university_manage_content_list_title',!isChekd?'firstCheck':'']">未勾选</div>
                    <div class="university_manage_content_list_unchecked_list" v-if="otherUniversities.length > 0">
                        <div class="university_manage_content_list_checked_list_item" v-for="(item,index) in otherUniversities" v-if="checkIndexOf(item.uniNameChinese) || checkIndexOf(item.uniName)">
                            <div class="form-input-container checkbox-control-container">
                                    <div class="checkbox-control">
                                        <input
                                            type="checkbox"
                                            class="hidden-input"
                                            :name="['university_manage_content_list_checked_list_item_'+item.id]"
                                            :value="item.id"
                                            :id="['university_manage_content_list_checked_list_item_'+item.id]"
                                            @change="handlerChangeCheckStatus(item.id,false)"
                                        >

                                        <label :for="['university_manage_content_list_checked_list_item_'+item.id]" class="fake-label"></label>

                                        <label :for="['university_manage_content_list_checked_list_item_'+item.id]" class="input-label">
                                            <div class="university_manage_content_list_checked_list_item_zh_name">@{{item.uniNameChinese}}</div>
                                            <div class="university_manage_content_list_checked_list_item_en_name">@{{item.uniName}}</div>
                                        </label>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="university_manage_content_list_prompt" v-else>您已勾选了所有学校～</div>
                    <div class="university_manage_content_list_prompt unchecked_search_result">没有找到符合条件的内容~</div>
                </div>
            </div>
        </div>

        <div class="university_manage_footer">
            <button class="university_manage_footer_button university_manage_footer_cancel" @click="handlerShowMask">取消</button>
            <button :class="['university_manage_footer_button', 'university_manage_footer_hold',isFix?'disabled':'']" :disabled="isFix?true:false" @click="handlerSaveFinancialUniversities(false)">暂存</button>
            <button class="university_manage_footer_button university_manage_footer_save" @click="handlerSaveFinancialUniversities(true)">保存</button>
        </div>
    </div>
</div>
<script src="{{asset('js/vue.js')}}?v={{$version}}"></script>
<script>
    let vm = new Vue({
        el: '#university_manage_mask',
        data: {
            isShowMask:false,
            isShowContainer:false,
            financialUniversities:[],
            otherUniversities:[],
            isFix:true,
            isChekd:true,
            searchValue:""
        },
        methods:{
            //隱藏或顯示
            handlerShowMask(){
                let that = this;
                this.isShowMask = !this.isShowMask
                setTimeout(() => {
                    that.isShowContainer = !that.isShowContainer
                    that.isFix = true;
                    that.getUniversityList()
                }, 100);
            },
            //獲取數據
            getUniversityList(){
                let that =this;
                $.ajax({
                    method: 'post',
                    url: '{{route('getFinancialUniversities')}}',
                    data: {
                        '_token': '{{csrf_token()}}',
                    },
                    success: function (data) {
                        if(data.code == 200){
                            that.financialUniversities = data.data.financialUniversities
                            that.otherUniversities = data.data.otherUniversities
                        }else{
                            layer.msg(data.msg);
                        }
                    }
                });
            },
            //保存数据
            handlerSaveFinancialUniversities(status){
                let that =this;
                if(that.financialUniversities.length <= 0){
                    layer.msg("至少勾选一所学校");
                    return false;
                }
                let _financialUniversities = [];
                that.financialUniversities.map(t=>{
                    _financialUniversities.push(t.id)
                })
                $.ajax({
                    method: 'post',
                    url: '{{route('saveFinancialUniversities')}}',
                    data: {
                        '_token': '{{csrf_token()}}',
                        'financialUniversities': _financialUniversities
                    },
                    success: function (data) {
                        if(data.code == 200){
                            layer.msg("保存成功");
                            if(status){
                                that.handlerShowMask()
                            }
                        }else{
                            layer.msg(data.msg);
                        }
                    }
                });
            },
            //选择
            handlerChangeCheckStatus(id,status){
                let that = this,
                    _flag = false;
                if(status){
                    this.financialUniversities.map((t,index)=>{
                        if(t.id == id){
                            that.otherUniversities.push(t)
                            that.financialUniversities.splice(index,1)
                            _flag = true
                        }
                    })
                }else{
                    this.otherUniversities.map((t,index)=>{
                    if(t.id == id){
                            that.financialUniversities.push(t)
                            that.otherUniversities.splice(index,1)
                            _flag = true
                        }
                    })
                }
                if(_flag){
                    $(".university_manage_content_list input.hidden-input").prop("checked",false)
                    setTimeout(() => {
                        $(".university_manage_content_list_checked input.hidden-input").prop("checked",true)
                        $(".university_manage_content_list_unchecked input.hidden-input").prop("checked",false)
                    }, 50);
                }
                that.isFix = false
                that.checkSearchResult()
            },
            //搜索
            checkIndexOf(value){
                if(value.toUpperCase().indexOf(this.searchValue.toUpperCase()) !== -1){
                    return true
                }else{
                    return false;
                }
            },
            //檢查搜索結果
            checkSearchResult(){
                setTimeout(() => {
                    let _searchUncheckLength = $(".university_manage_content_list_unchecked .university_manage_content_list_checked_list_item").length,
                        _searchCheckedLength = $(".university_manage_content_list_checked .university_manage_content_list_checked_list_item").length;
                    if(_searchCheckedLength <= 0 ){
                        $(".checked_search_result").show()
                    }else{
                        $(".checked_search_result").hide()
                    }

                    if(_searchUncheckLength <= 0){
                        $(".unchecked_search_result").show()
                    }else{
                        $(".unchecked_search_result").hide()
                    }
                }, 50);
            }
        },
        mounted(){
            let that = this;
            $(".university_manage_content_controls").on("click","span.clear-icon", function(){
                $("#searchName").val("");
                that.searchValue = "";
                that.checkSearchResult()
            })

            $("#searchName").on("input",function(event){
                let _value = $(this).val();
                that.searchValue = _value;
                that.checkSearchResult()
            })

            $("#justCheck").on("change",function(){
                let _checked = $("#justCheck").prop("checked");
                that.isChekd = !_checked
            })

        }
    })
</script>